api-component.mdx

id	title	sidebar_label
component	Component	Component

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

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

Name	Required	Type	Description
componentName	Yes	string	Unique component name - not to be confused with componentId
componentProvider	Yes	Function	Anonymous function that returns the React component to register, OR the component wrapped with Providers
concreteComponentProvider	No	Function	Anonymous 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

Name	Required	Type	Description
lazyRegistratorFn	Yes	(lazyComponentRequest: string	number) => 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

Name	Required	Type	Description
componentId	Yes	string	Unique component id
options	Yes	object	Props object to pass to the component
callback	No	Function	Function 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. :::