I updated my react native application to SDK 42. After that left navigator bar is not working. it only popup and show image only. but if i comment contentComponent: CustomDrawerContentComponent part in the createDrawerNavigator then image disapear and my navigation menus are showing.
My Code
const CustomDrawerContentComponent = (props) => (
<ScrollView>
<Container style={styles.container}>
<Header style={styles.drawerHeader}>
<Body style={styles.headerBody}>
<Image
ref={(ref) => this.logoImgRef = ref}
style={{ width: 120, height: 120, marginTop:10}}
source={imgLogo}
/>
</Body>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
</ScrollView>
)
const DrMenu= createDrawerNavigator({
"Home": {
navigationOptions: {
drawerIcon: () => (
<Icon name='home'
color='#1976D2' size={26}/>
),
title: i18n.t('home'),
},
screen: (props) => <FLHome {...props} propName={FLHome} {...contactData} />
},
"Logout": {
navigationOptions: {
drawerIcon: () => (
<Icon name='sign-out'
color='#1976D2' size={26}/>
),
title: i18n.t('logout'),
},
screen: (props) => <Logout {...props} propName={Logout} />
},
}, {
initialRouteName: "Home",
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
contentOptions: {
activeTintColor: '#1976D2',
inactiveTintColor :'#1999CE',
activeBackgroundColor :'#E8EAF6',
},
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
}
);
const App = createAppContainer(DrMenu);
return(
<App/>
);
}
react-native provides functional creation of rendering objects
const DateSelect = ()=>{
return (<DataSelect/>)
}
export default DateSelect
//import alias
import DateSelection from 'path';
//use
render.dom
<DateSelection/>
I found a solution for this problem. That is you have to create another JS page and render in this page like this below,
export default CustomDrawerContentComponent = props => (
<ScrollView>
<View style={styles.container}>
<Image
source={imgLogo}
style={{ width: 120, height: 120, marginTop:10}}
/>
</View>
<View>
<DrawerNavigatorItems {...props}/>
</View>
</ScrollView>
);
Then you can render in this way in the DrawerViewConfig
contentComponent: props => <CustomDrawerContentComponent {...props} />