-
-
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 />); | |
} | |
} |
Alvarotony17
commented
Jan 13, 2021
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