How to render redux store value in function component?

Question

I am working on react native 0.62 in which i have used Drawer Navigator. when user logged into the app i am storing auth api response into the redux store. After login, i wanted to display logged in user name in the dashboard header but i am unable to use redux store inside my function. Tried with hooks but not worked. Any help or suggestion. Thank You in advance. Here is my code:

const GradientHeader = props => (
  <View style={{ backgroundColor: 'transparent' }}>
      <LinearGradient
        colors={['#6CCFF6', '#596AB2']}
        start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
      >
          <Header {...props} />   
      </LinearGradient>
    </View>
  ) 

const DashboardStackScreen = ({ navigation }) => {
  return (
    <DashboardStack.Navigator screenOptions={{
      headerTitle: 'Good Morning, John', // i wanted to access the redux store here 
      header: props => <GradientHeader {...props} />,     
      headerLeft: () => (
        <TouchableOpacity onPress={navigation.openDrawer} style={{padding: 20}}>
          <Image source={require('../assets/images/menu_bar.png')} style={{width:18, height:12}}/>
        </TouchableOpacity>
      ),
      headerTransparent: true,
      headerStyle: {
        backgroundColor:  'transparent' 
      },
      headerTintColor: '#fff',    
      headerTitleStyle: { fontFamily: 'OpenSans-SemiBold', fontSize: 20},
    }}>
      <DashboardStack.Screen name="Dashboard" component={Dashboard} />
    </DashboardStack.Navigator>
  );
}

const MainNavigator = ({navigation}) => {
   return (
    <Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  
   >
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        )
      }}      
      />
    </Drawer.Navigator>
  );
}

const mapStateToProps = state => {
  return {
    data: state
  };
};
export default connect(mapStateToProps)(MainNavigator);

login.reducer.js import { AUTH_REQUEST, AUTH_SUCCESS, AUTH_FAILURE, SET_AUTH } from '../utility/Constants';

const INITIAL_STATE = { user: {}, loading: false, error: '', //false isAuthorized: false };

const login = (state = INITIAL_STATE, action) => { switch (action.type) { case AUTH_REQUEST: return Object.assign({}, state, { loading: true, user: {}, error: '',//false isAuthorized: false }); case AUTH_SUCCESS: return Object.assign({}, state, { user: action.payload, loading: false, error: '',//false isAuthorized: true }); case AUTH_FAILURE: return Object.assign({}, state, { user: {}, error: action.payload,//true, loading: false, isAuthorized: false }); case SET_AUTH: return Object.assign({}, state, { error: '',//true, loading: false, }); default: return state; } };

export default login;

Answer 1

If you have connected to the store using Provider then you can access to the data in your component MainNavigator with props as data since your mapStateToProps returns data which has your state.

const MainNavigator = ({navigation, data}) => {
   console.log('Redux store data', data);
   return (
    <Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  
   >
      <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
        drawerIcon: ({ focused, size }) => (
          <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
        )
      }}      
      />
    </Drawer.Navigator>
  );
}

Answer 2

You can use props.data to use in the component wherever in the component you want to display, try like this headerTitle: props.data

Answer 3

Instead of using store value from mapStateToProps in my DashboardScreenStack, which was not working, i have directly called store.getState() from my function based component. it works for me as i needed.