Skip to main content
Version: 7.37.0

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
callbackNoFunctionFunction that will be executed once inner setState is completed

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.