How to get props value through drawer navigator - react-redux

Question

How to get the userdata props value in head component ?I am mapping state to
props but not able to take that value in head component.How to pass this.
Passing values to Higher order component.Provinding the code.Can someone
please go through it. How to get the userdata props value in head component ?I am mapping state to
props but not able to take that value in head component.How to pass this.
Passing values to Higher order component.Provinding the code.Can someone
please go through it
import React from "react";
import {Image, Text, View, ToastAndroid} from "react-native";
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createMaterialTopTabNavigator, createStackNavigator, createAppContainer,DrawerActions} from "react-navigation";
import {Icon} from 'react-native-elements';
import DrawerContent from "./DrawerContent";
import {connect} from "react-redux";
import FirstList from "./FirstList";
import SecList from "./SecList";
import ThirList from "./ThirList";
import color from "../util/Colors";
import DashBoard from "./DashBoard";
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const TabNavigator = createMaterialTopTabNavigator(
{
FirstList : FirstList ,
SecList : SecList ,
},
{
tabBarOptions: {
labelStyle: {fontSize: 13},
activeTintColor: color.basecolor,
inactiveTintColor: 'black',
scrollEnabled: false,
style: {
backgroundColor: 'white',
height:45
},
indicatorStyle: {
backgroundColor: color.basecolor,
}
},
title: 'Details',
}
);
const StackNavigator1 = createStackNavigator({
TabNavigator: {
screen: TabNavigator,
navigationOptions:({navigation})=>{
return{
header: (
<Head/>
)
}
},
},
List: {
screen: ThirList
navigationOptions:({navigation})=>{
return{
header: null
}
},
},
});
const RootNav = createAppContainer(StackNavigator1);
var name;
class Head extends React.Component {
constructor(props) {
super(props);
name='';
var today = new Date();
this.state = {
'date': today.getDate() + " " + monthNames[today.getMonth()] + " " + today.getFullYear()
};
console.log(JSON.stringify(this.props)+"userdata");
}
render() {
const {date} = this.state;
return (
<View>
<View style={{flexDirection: 'row', backgroundColor: color.mainback, height: 40,padding:10}}>
<Text style={{
fontSize: 14,
textAlign: 'left',
marginLeft: 10,
flex:1,
color:color.textcolor,
fontWeight:'bold',
textAlignVertical: "center"
}}>Orders</Text>
<Text style={{
fontSize: 10,
textAlign: 'right',
marginLeft: 20,
marginRight: 20,
fontWeight: 'bold',
color:color.datetextcolor,
textAlignVertical: "center"
}}>{date}</Text>
</View>
</View>
);
}
}
class RootScreen extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<RootNav/>
</View>
);
}
}
const StackNavigator = createStackNavigator({
DrawerNavigator: {
screen: RootScreen,
activeTintColor: color.basecolor,
navigationOptions: ({navigation}) => ({title: 'Home'}, {
headerLeft:
<View style={{flexDirection: 'row', marginLeft: 20}}>
<Icon name="menu" onPress={()=>navigation.dispatch(DrawerActions.toggleDrawer())} size={30} color="white"/>
<Image source={require('../images/logo.png')}
style={{height: 35, width: 150, resizeMode: 'contain'}}/>
</View>,
}
),
},
Dashboard: {
screen: DashBoard,
navigationOptions: {
headerTitle: (
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
<View style={{flex: 1, justifyContent: 'center'}}>
<Image
source={require('../images/logo.png')}
style={{height: 35, width: 150, marginLeft: -20, resizeMode: 'contain'}}
/>
</View>
</View>
),
},
},
}, {
defaultNavigationOptions: {
headerTintColor: 'white',
headerStyle: {
backgroundColor: color.basecolor,
},
}
}
);
const DrawerNavigator = createDrawerNavigator(
{
Home: StackNavigator
},
{
contentComponent: DrawerContent,
drawerWidth: 280,
navigationOptions: {
header: null
},
}
);
function mapStateToProps(state) {
return {
userdata: state.auth.userdata
}
}
export default connect(mapStateToProps) (DrawerNavigator);

Answer 1

Your aim is to connect Head component to Redux Store, right?
Simply using connect() function will suffice.
The solution would be to add this line of code.
const NewHead = connect(mapStateToProps)(Head)
Replace the <Head/> with <NewHead/> in StackNavigator1
Then, access the data within the Head component in the following manner.
this.props.userdata
OR
If you want to pass data to routes when you navigate to them, you can refer to this documentation.