Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configuration of Drawer, Tabs and Stacks #32

Closed
Zefau opened this issue Mar 4, 2019 · 1 comment
Closed

Configuration of Drawer, Tabs and Stacks #32

Zefau opened this issue Mar 4, 2019 · 1 comment

Comments

@Zefau
Copy link

Zefau commented Mar 4, 2019

I've been trying to setup the boilerplate with a drawer having tabs as well as stacks, but unfortunately failed it and looking for some help.

I'm not able to open the drawer by sliding to the right and I do not get the drawer icon which is usually on the top left.
It shows the tabs though.

My code of the RootScreen looks like:

/*
 * TABS
 */
const TabsNavigator = createMaterialTopTabNavigator(
	{
		Welcome: {
			screen: ExampleScreen
		},
		Story: {
			screen: ExampleScreen
		}
	}
);

/*
 * DRAWER
 */
const DrawerNavigator = createDrawerNavigator(
	{
		Home: {
			screen: TabsNavigator
		},
		Links: {
			screen: ExampleScreen
		},
		Settings: {
			screen: SettingsScreen
		}
	}
);

/*
 * STARTSCREEN
 */
const AppNav = createStackNavigator(
	{
		// Create the application routes here (the key is the route name, the value is the target screen)
		// See https://reactnavigation.org/docs/en/stack-navigator.html#routeconfigs
		SplashScreen: SplashScreen,
		
		// The main application screen is our "ExampleScreen". Feel free to replace it with your
		// own screen and remove the example.
		MainScreen: DrawerNavigator,
	},
	{
		// By default the application will show the splash screen
		initialRouteName: 'SplashScreen',
		
		// See https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig
		headerMode: 'none',
	}
)

const App = createAppContainer(AppNav)
class RootScreen extends Component {
  componentDidMount() {
    // Run the startup saga when the application is starting
    this.props.startup()
  }

  render() {
    return (
      <View style={styles.container}>
        <App
          // Initialize the NavigationService (see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
          ref={(navigatorRef) => {
            NavigationService.setTopLevelNavigator(navigatorRef)
          }}
        />
      </View>
    )
  }
}

Any ideas?
I would also much appreciate if this is standard part of the boilerplate.

Thanks,
Zefau

@Zefau Zefau changed the title Configuration of Drawer. Tabs and Stacks Configuration of Drawer, Tabs and Stacks Mar 4, 2019
@Zefau
Copy link
Author

Zefau commented Mar 6, 2019

It was a long way, but I finally figured it out!
The issue with the drawer is solved by https://stackoverflow.com/a/53396072/10249387 (which has also been added to the Getting started at React Navigation (see https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant