Component

registerComponent

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component or React.PureComponent. It can also be a HOC to provide context (or a Redux store) or a functional component. Similar to React Native's AppRegistry.registerComponent.

Parameters

NameRequiredTypeDescription
componentNameYesstringUnique component name - not to be confused with componentId
componentProviderYesFunctionAnonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProviderNoFunctionAnonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.

Examples

Registering a component
Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
Registering a component wrapped with Providers
import { Provider } from 'react-redux';
const store = createStore();
Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
<Provider store={store}>
<MyScreen {...props} />
</Provider>,
() => MyScreen)
);

setLazyComponentRegistrator

Pass a function that will allow you to register a component lazily. When encountering an unknown component name, this function will be called, giving you a chance to register the component before an error is thrown.

Parameters

NameRequiredTypeDescription
lazyRegistratorFnYes(lazyComponentRequest: stringnumber) => void

Example

Navigation.setLazyComponentRegistrator((componentName) => {
if (componentName === 'navigation.playground.LazyScreen') {
Navigation.registerComponent(Screens.LazilyRegisteredScreen, () => LazyScreen);
}
});

updateProps

Update props of a component registered with registerComponent. Updating props triggers the component lifecycle methods related to updating.

Parameters

NameRequiredTypeDescription
componentIdYesstringUnique component id
optionsYesobjectprops object to pass to the component

Example

Navigation.updateProps('MY_COMPONENT', {
// props to pass to the component
};
important

updateProps is called with a componentId. This is the same unique id components have in props. Don't confuse it with the componentName we use when registering components with Navigation.registerComponent.