-
-
Save kevinold/fefd93803ebe4b023158e47655990fa0 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react'; | |
import { Text } from 'react-native'; | |
import { DrawerNavigator } from 'react-navigation'; | |
const ContentScreen = ({ navigation }) => ( | |
<Text>Content Hello World</Text> | |
); | |
const LeftDrawerScreen = ({ navigation }) => ( | |
<Text>Left Drawer</Text> | |
); | |
const RightDrawerScreen = ({ navigation }) => ( | |
<Text>Right Drawer</Text> | |
); | |
const ContentNavigator = DrawerNavigator({ | |
Content: { | |
screen: ContentScreen, | |
} | |
}, { | |
contentComponent: RightDrawerScreen, | |
drawerPosition: 'right' | |
}); | |
const RootNavigator = DrawerNavigator({ | |
Child: { | |
screen: ContentNavigator, | |
} | |
}, { | |
contentComponent: LeftDrawerScreen | |
}); | |
export default class App extends Component { | |
render() { | |
return (<RootNavigator />); | |
} | |
} |
Hi @kevinold - I have a question on drawer navigator. If I do props.navigation.openDrawer().. and I have 2 drawer navigators, one within another.. how do I control which drawer navigator to open?
@rawadrifai
If anyone is still interested, found a strange workaround for pinpointing which drawer to open.
Normally, you've found that if you use the navigation.openDrawer()
, it will open the right drawer (or whichever is the closest drawer navigation parent).
If you want to open the other drawer, you have to call the openDrawer()
from its instance.
The only way I managed to do this was to get the 3rd parent of the current screen:
navigation.dangerouslyGetParent().dangerouslyGetParent().dangerouslyGetParent().openDrawer()
✔️
I know it doesn't seem right, but it works for now. Any suggestion is welcome.
Note that I have tried to use the navigation.navigate('OpenLeftDrawer')
, where 'OpenLeftDrawer' is the value given to the DrawerNavigatorConfig.drawerOpenRoute
attribute. Needless to say that it did not work.
navigation.dangerouslyGetParent().dangerouslyGetParent().dangerouslyGetParent().openDrawer()
✔️
yup it works
code snippet below is my implementation for two side drawer, when I set the drawerPosition
to right
it goes to a transparent screen like thing and doesn't show the drawerContent
component,
do you have any idea, any suggestion is appreciated.
const HomeDrawer = createDrawerNavigator();
const MainDrawer = createDrawerNavigator();
const SettingsScreen = () => (
<AppLayout>
<Text>Settings Screen</Text>
</AppLayout>
);
const FilterScreen = () => {
return (
<AppLayout>
<Text>Filter Screen</Text>
</AppLayout>
);
};
export const _HomeScreenNavigation = () => {
const { Screen, Navigator } = HomeDrawer;
return (
<Navigator screenOptions={{ headerShown: false }} drawerContent={() => <SettingsScreen />}>
<Screen name={SharedHomeScreenNavigationTypes.SharedHomeScreen} component={HomeScreen} />
<Screen name={SharedHomeScreenNavigationTypes.PostScreen} component={PostScreen} />
<Screen name={SharedHomeScreenNavigationTypes.UserProfileScreen} component={UserProfileScreen} />
<Screen name={SharedHomeScreenNavigationTypes.CreatePostScreen} component={CreatePostScreen} />
</Navigator>
);
};
export const HomeScreenNavigation = () => {
const { Navigator, Screen } = MainDrawer;
return (
<Navigator screenOptions={{ headerShown: false, drawerPosition: "right" }} drawerContent={() => <FilterScreen />}>
<Screen name={"homeDrawer"} component={_HomeScreenNavigation} />
</Navigator>
);
};
code snippet below is my implementation for two side drawer, when I set the
drawerPosition
toright
it goes to a transparent screen like thing and doesn't show thedrawerContent
component, do you have any idea, any suggestion is appreciated.const HomeDrawer = createDrawerNavigator(); const MainDrawer = createDrawerNavigator(); const SettingsScreen = () => ( <AppLayout> <Text>Settings Screen</Text> </AppLayout> ); const FilterScreen = () => { return ( <AppLayout> <Text>Filter Screen</Text> </AppLayout> ); }; export const _HomeScreenNavigation = () => { const { Screen, Navigator } = HomeDrawer; return ( <Navigator screenOptions={{ headerShown: false }} drawerContent={() => <SettingsScreen />}> <Screen name={SharedHomeScreenNavigationTypes.SharedHomeScreen} component={HomeScreen} /> <Screen name={SharedHomeScreenNavigationTypes.PostScreen} component={PostScreen} /> <Screen name={SharedHomeScreenNavigationTypes.UserProfileScreen} component={UserProfileScreen} /> <Screen name={SharedHomeScreenNavigationTypes.CreatePostScreen} component={CreatePostScreen} /> </Navigator> ); }; export const HomeScreenNavigation = () => { const { Navigator, Screen } = MainDrawer; return ( <Navigator screenOptions={{ headerShown: false, drawerPosition: "right" }} drawerContent={() => <FilterScreen />}> <Screen name={"homeDrawer"} component={_HomeScreenNavigation} /> </Navigator> ); };
this is the question that I also have asked at StackOverflow.
I have solved the problem by using react-native-reanimated
and an overlay View
on the top of other components :). I thought this is going to put me in trouble while I'm going to have a deep nested navigation
Hi @kevinold - I have a question on drawer navigator. If I do props.navigation.openDrawer().. and I have 2 drawer navigators, one within another.. how do I control which drawer navigator to open?