Exponent - ex-navigation

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

Navigation bar configuration

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 = {
    title: 'Assignments',
    backgroundColor: 'tomato',
    elevation: 2,
    renderLeft: () => <MenuButton />,
  };

  render() { /* … */ };
}

How can I slide my view from bottom up (transition) from one screen to the other?

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() { /* … */ };
}

`StackNavigation` default config

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() { /* … */ };
}

Modals

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');

Reset/modify the navigation stack (history)

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>
);

`immediatelyResetStack(routes, index)`

the function takes two arguments:

routes - an array of routes
index - index of a route which navigation stack should be reset to

sibelius/ex-navigation.md