Is it possible to get the state from my reducer into my navigation if its not a component,

Question

I am using a different format for navigation but I want to show a number from state when people add items in the tab

tabBarBadge: 'allows a string';

but I need state from the store and I don't know how to access it in this format.

Wondering if its possible and how? can I call getstate()? or pass via the component in appjs.

import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs'
import LoginScreen from '../screens/LoginScreen';





const WorkoutNavigator = createStackNavigator({
  Search: HomeScreen,
   Workouts: WorkoutList,
   Display: WorkoutListDetailScreen,
   Play: PlayWorkoutScreen,
   Details: WorkoutDetail,
  

},
{
    
    defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: Colors.twentyThree,
        },
        headerTintColor: Colors.accent,
        headerTitleStyle: {
          fontWeight: '100',
        },
      },
    }


);

const WorkoutFavTabNav = createMaterialBottomTabNavigator({
    Search: { screen:  WorkoutNavigator, navigationOptions: {
      tabBarIcon: (tabInfo) =>{
      return  <Ionicons name="search" size={25} color={tabInfo.tintColor}/>

      }
    }},
     Workout:{ screen:  FavoritesScreen, navigationOptions: {
      tabBarIcon: (tabInfo) =>{
      return   <Ionicons name="albums" size={25} color={tabInfo.tintColor}/>
              
      

      },
      tabBarBadge: 'I allow a string';
       }},
   

},{
     activeColor: Colors.accent,
   inactiveColor: Colors.primary,
   
    barStyle:{
      backgroundColor:'rgba(0, 0, 0, 0.71)'
    }



  
 
});


export default createAppContainer(WorkoutFavTabNav);

Answer 1

Instead of using the tabBarBadge, we can modify the tabBarIcon.

function TabBarIcon({ value, tabInfo }) {
  return (
    <View style={styles.container}>
      <Text style={styles.badge}>{value}</Text>
      <Ionicons name="search" size={25} color={tabInfo.tintColor} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: "relative",
    width: "fit-content",
    padding: 12,
  },
  badge: {
    fontSize: 12,
    fontWeight: "bold",
    position: "absolute",
    top: 0,
    right: -10,
  },
});


const TabBarIconContainer = connect(state => ({ value: state.count }))(TabBarIcon);

Inside the navigation config:

Workout: {
        screen: FavoritesScreen,
        navigationOptions: {
            tabBarIcon: (tabInfo) => {
                return <TabBarIconContainer tabInfo={tabInfo} />
            },
        },
}