registerScreen(screenName, getScreen[, options])

Arguments

  1. screenName (string): The screen identifier to be registered with this screen.

  2. getScreen (Thunk<Component>): A function returning the component to use for the screen.

  3. options (ScreenOptions optional):

    • options.waitForRender (boolean optional): If true, the screen will not get pushed or presented until it renders once, allowing for react-rendered views to render and navigation configuration to happen if it needs to. Defaults to true.
    • options.initialConfig (ScreenConfig optional): Any ScreenConfig props to apply initially to the screen. Values passed here will get merged with values passed into any Navigator.Config in the actual rendered screen, with the rendered config values taking precedence. Defaults to {}.
    • options.mode ('screen' | 'tabs'): Defaults to 'screen'.

Example Usage

This function is used to expose React components to the native context. Under the hood, it utilizes Application.registerComponent.

We recommend that you separate screen registration from screen definition. As your app grows in number of screens, it is advantageous to import as few files as possible at app startup time, and lazily import some files using require as they are needed.

For example, here we have our screen component defined and exported in one file:

// ScreenOne.js
import React from 'react';

export default class ScreenOne extends React.Component {
  render() {
    // ...
  }
}

And then we have a separate register.js file where we register the screen, with the getScreen parameter being an anonymous function returning the result of require('./ScreenOne'), which is referred to a "Thunk", or a "lazy value".

// register.js
import Navigator from 'native-navigation';

Navigator.registerScreen('ScreenOne', () => require('./ScreenOne'));

You can also pass some static configuration to the screen, if it is convenient:

// register.js
import Navigator from 'native-navigation';

Navigator.registerScreen('ScreenOne', () => require('./ScreenOne'), {
  waitForRender: false,
  initialConfig: {
    title: 'ScreenOne',
  },
});