This is for now, for my personal use only, things might not be correctly explained here. For the official docs please check: https://github.com/exponentjs/ex-navigation/blob/master/README.md
On every screen you can use the built-in navigation bar, you can add a title, left button, right button or change navigation bar’s style. All you need to do is pass appropriate params to navigationBar in the route configuration:
import React, { Component } from 'react';
class Foo extends Component {
static route = {
navigationBar: {
title: 'Assignments',
backgroundColor: 'tomato',
elevation: 2,
renderLeft: () => <MenuButton />,
},
};
render() { /* … */ };
}You simply need to add styles to your route configuration in the Component that you are pushing onto StackNavigation:
import React, { Component } from 'react';
import { NavigationStyles } from '@exponent/ex-navigation';
class Foo extends Component {
static route = {
styles: {
...NavigationStyles.SlideVertical,
},
};
render() { /* … */ };
}You can set a default config for StackNavigation by using defaultRouteConfig property:
import { StackNavigation, NavigationStyles } from '@exponent/ex-navigation';
import Router from '../navigation/Router';
<StackNavigation
id="master"
defaultRouteConfig={{
styles: {
...NavigationStyles.SlideVertical,
},
navigationBar: {
backgroundColor: '#fff',
tintColor: 'tomato',
},
}}
initialRoute={Router.getRoute('about')}
/>Having these set like above will make each screen to slide vertically, have a white background color, and tomato tint color. But you can obviously override these setting within your particular route config.
How to disable "slide screen to go back" (the native behaviour of pop()ing the view if you swipe from left to right or top to bottom)
In order to disable it you need to pass a gesture: null to styles in route configuration:
import React, { Component } from 'react';
import { NavigationStyles } from '@exponent/ex-navigation';
class Foo extends Component {
static route = {
styles: {
gestures: null,
},
};
render() { /* … */ };
}I found it as a good practice to always have the very high level navigator in my app. I usually use StackNavigation. And then have another navigator under it which is in use most of the times. Then whenever I need to push the modal (i.e. Login screen, Menu, etc.) I push it on the top level (master) StackNavigation.
Here is an example of my main.js :
/* ... */
return (
<Provider store={configureStore()}>
<View style={styles.container}>
<NavigationProvider router={Router}>
<StackNavigation
id="master"
initialRoute={Router.getRoute('app', { notification })}
defaultRouteConfig={{
styles: {
...NavigationStyles.SlideVertical,
},
}}
/>
</NavigationProvider>
{Platform.OS === 'ios' && <StatusBar barStyle="light-content" animated />}
{Platform.OS === 'android' && <View style={styles.statusBarUnderlay} />}
</View>
</Provider>
);And then my app route can be a DrawerNavigation or StackNavigation or whatever navigator you want it to be, but you can always push the modal onto master.
Here is how you can get any navigator from where you have naviagtion available in your props (if you don't, you can use withNavigation() HOC, or pass it down as a prop from the component where you have it available).
Use getNavigator():
this.props.navigation.getNaviagtor('master');Sometimes you might want to reset or modify your navigation stack. For example I have an app where user needs to fill up a questionaire, and after is presented with some results. At this point I don't want the user to be able to go back to the questionaire anymore, instead the user can click DONE, and go back to the route foo (which is the route from which the user start the questonaire from). At this point the only thing I want in my navigation stack is the route foo.
You can achieve that using immediatelyResetStack() which is a function available from the navigator object. Here is an example usage:
const rootNavigator = this.props.navigation.getNavigator('root');
return (
<TouchableOpacity
onPress={() =>
rootNavigator.immediatelyResetStack([Router.getRoute('foo')], 0)
}
>
<Text>Done!</Text>
</TouchableOpacity>
);the function takes two arguments:
- routes - an array of routes
- index - index of a route which navigation stack should be reset to
@knowbody I have filed an issue with a gif that shows exactly what my problem is. Would appreciate any input.