React Native - состояние redux обновляется, но панель вкладок - нет

Я пытаюсь реализовать темный режим для своего приложения. Я использую управление состоянием redux, чтобы сохранить текущую тему.

Я использую функцию redux connect в своих компонентах, чтобы получить эту тему и визуализировать компоненты в светлом или темном режиме. Это работает довольно хорошо, но, к сожалению, у меня проблемы с панелью BottomTabbar.

Я использую функциональный компонент настраиваемой панели вкладок, где я получаю текущее состояние редукции. Я также попытался подключить свой AnimatedCircleBarComponent к состоянию редукции (таким образом, связав его с моим компонентом класса), но результат был таким же.

const MaterialTopTabBar = props => {
 const Colors = useSelector(state => state.themeReducer.theme);

 return (
   <AnimatedCircleBarComponent
     {...props}
     style={{
       backgroundColor: Colors.tabbar,
     }}
     activeTintColor={Colors.icon}
     inactiveTintColor={Colors.icon}
     fillColor={Colors.tabbar}
     activeBackgroundColor={Colors.iconActive}
     // indicatorStyle={styles.indicatorStyle}
     // style={styles.root}
   />
 );
};

Вот мой навигатор:

const MainTab = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({screenProps}) => {
        return {
          tabBarLabel: () => <Text></Text>,
          tabBarIcon: ({tintColor, focused}) => (
            <Icon
              size={28}
              name={focused ? 'home' : 'home-outline'}
              style={
                focused
                  ? {color: screenProps.Colors.textWhite}
                  : {color: screenProps.Colors.icon, top: 6}
              }
            />
          ),
        };
      },
    },

    Restaurants: {
      screen: RestaurantScreen,
      navigationOptions: ({screenProps}) => {
        return {
          tabBarLabel: () => <Text></Text>,
          tabBarIcon: ({tintColor, focused}) => (
            <Icon
              size={28}
              name={focused ? 'format-list-checkbox' : 'format-list-checkbox'}
              style={
                focused
                  ? {color: screenProps.Colors.textWhite}
                  : {color: screenProps.Colors.icon, top: 6}
              }
            />
          ),
        };
      },
    },
  },
  {
    tabBarComponent: MaterialTopTabBar,
    tabBarPosition: 'bottom',
    optimizationsEnabled: true,
    swipeEnabled: false,
    initialRouteName: 'Home',
  },
);

Компонент панели вкладок получает новое состояние, но не выполняет повторную визуализацию. Он только перерисовывает и меняет цвета на новые после нажатия на новой вкладке.

Можно ли принудительно перерисовать панель вкладок или почему это не работает? Все остальные компоненты на моем экране обновляются правильно.

Я думаю, что это довольно распространенный вариант использования, не так ли?