registerScreen(screenName, getScreen[, options])
Arguments
screenName
(string
): The screen identifier to be registered with this screen.getScreen
(Thunk<Component>
): A function returning the component to use for the screen.options
(ScreenOptions
optional):options.waitForRender
(boolean
optional): Iftrue
, 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 totrue
.options.initialConfig
(ScreenConfig
optional): AnyScreenConfig
props to apply initially to the screen. Values passed here will get merged with values passed into anyNavigator.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',
},
});