My exponent's ex-navigation docs/thoughts

ex-navigation.md

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 = {
    navigationBar: {
      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

@yeso126 - getNavigatior is a typo in the example, it's meant to be getNavigator

Thank you for sharing this.

I noticed that isFocused is a hit or miss. Is there a workaround for finding out consistently if the screen is in focus?

The same issue as @annelorraineuy

Hey thanks!! It is very useful. A small correction this line

this.props.navigation.getNaviagtor('master');

should be

this.props.navigation.getNavigator('master');

😄

Thanks again!!

Edited: It was already mentioned ... sorry

Hey,
i want to use this modal style but I always get an error while starting the app which says:
Invariant Violation: Navigator does not exist

My main.js looks up to the parameters exactly like the example above and my route "app" looks like this.

`render() {

return (
  <NavigationProvider router={Router}>
      <StackNavigation
        id='app'
        initialRoute='home'
        defaultRouteConfig={{
          navigationBar: {
            /* options and renderings here */
          }
        }}
      />
  </NavigationProvider>
);

}`

Could anyone tell me what I'm doing wrong? :/
If I remove the StackNavigation from the App, it works and doesn't crash.

best regards
kay

SOLVED: Just had to remove the NavigationProvider in the app screen because its already provided by the main.js.

hello guyz..I am new to react native need some help. I am using expo/ex-navigation for a react native mobile application.In that i want to hide tabbar on a particular screen .For example when i navigate home to another screen In that another screen i dont want tabbar how can we do that...actually when i am navigationg to another screen it was navigating in same tab so that tabbar is sticky in bottom..I dont want that tabbar on navigation..Help me friends

I tried this this.props.navigation.getNavigator('master').push(Router.getRoute('postDetail', {id}));
OutPut: Navigator Does Not Exist
what is getNavigator('master') ???