DrawerLayoutAndroid in react native - react-native

Question

I'm trying 'DrawerLayoutAndroid' in react native with inside the drawer I added the react-navigation 'stackNavigator' to navigate between screen.What I'm trying to do
but the problem is when I navigate it opens in the drawer
How do I open it full screen as a normal page
Is there a better method to achieve this
(redux state ?)
Thank you in advance

Answer 1

I found a solution
what I did is created a routing page and added it as the root component
routes.js
import Main from '../screens/main';
import Ad from '../screens/adView';
export const AdNav = StackNavigator({
Home:{screen:Main,
navigationOptions:{
header:null,
}
},
Ad:{screen:Ad,
navigationOptions:{
title:'Details',
}}
}
);
App.js
import {AdNav} from './src/config/routes';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<AdNav />
</View>
);
}
}
Then I added DrawerLayoutAndroid to the main screen
inside the drawer layout I used stackNavigator to navigate with no issues
main screen with DrawerLayoutAndroid
render() {
var navigationView = (
<View style={{flex: 1}}>
<Button onPress={()=>this.props.navigation.navigate('Ad')} title="go to next page"/>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.container}>
{/*content*/}
</View>
</DrawerLayoutAndroid>
);
}
}