Drawer Navigator doesnt scroll after making other pages - reactjs

Question

I made a toggler menu by createDrawerNavigator. at first the menu was working perfectly but after making each page i realized it doesnt scroll verticaly as same before. i dont understand what the problem is. in addtion when each page has error, after clicking on that page the app freezes and menu do scroll! any help? many thanks
.see the menu here https://i.stack.imgur.com/FwoqI.jpg
//imports;
class NavigationDrawerStructure extends React.Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('./image/drawer.png')}
style={{ width: 30, height: 30, marginLeft: 20, marginBottom:10 }}
/>
</TouchableOpacity>
</View>
);
}
}
const firstScreen = createStackNavigator({
Data: {
screen: Data,
navigationOptions: ({ navigation }) => ({
title: 'Data',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: 'black',
}),
},
});
const screensDrawerNavigator = createDrawerNavigator(
{
Data: {
screen: firstScreen,
navigationOptions: {
drawerLabel: 'Data',
},
},
},
{
intialRouteName: 'login',
navigationOptions: {
headerStyle : {
backgroundColor: '#f4511e',
},
color: 'white',
},
},
}
)
export default createAppContainer(screensDrawerNavigator);
[1]: https://i.stack.imgur.com/FwoqI.jpg

Answer 1

according the doc's it seems that you are not able to scroll by default because there is no scrollview component added by default. maybe you can try to add a custom-component from this example: https://reactnavigation.org/docs/en/drawer-navigator.html
I think in your case it would be similar to this (see contentComponent):
const screensDrawerNavigator = createDrawerNavigator(
{
Data: {
screen: firstScreen,
navigationOptions: {
drawerLabel: 'Data',
},
},
},
{
intialRouteName: 'login',
contentComponent: props => (
<ScrollView>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
),
navigationOptions: {
headerStyle : {
backgroundColor: '#f4511e',
},
color: 'white',
},
},
)