What is New in React-Navigation 5.x

React Navigation heavily used in the React Native Applications. React Navigation 5.15 version released yesterday (release notes), let's see important changes in release 5.x.

Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use React.memo or React.PureComponent  for your screen components to avoid performance issues.

Screen

Screen components are used to configure various aspects of screens inside a navigator.

Props

name

It is also used for the name property in the route.

options

Options to configure how the screen gets presented in the navigator. It accepts either an object or a function returning an object

When you pass a function, it'll receive the route and navigation

See Options for screens for more details and examples.

getId

Callback to return an unique ID to use for the screen. It receives an object with the route params. This is easier alternative to specifying a key during `navigate` to control unique instances of a screen. 

e.g. - when params.userId is used as an ID, subsequent navigation to the screen with the same userId will navigate to the existing screen instead of adding a new one to the stack. If the navigation was with a different userId, then it'll add a new screen.

component

getComponent

You can use this approach instead of the component prop if you want the ProfileScreen module to be lazily evaluated when needed. This is especially useful when using ram bundles to improve initial load.

children

You can use this approach instead of the component prop if you need to pass additional props. Though we recommend using React context for passing data instead.