⚠️ This version is still in alpha and won’t be stable until some time in 2020! More adventurous users are already using it in production but it’s not for everyone. That said, we would love your feedback, it will help us ship the stable release sooner, so please give it a try and even try converting your app if you have the time.

We’ve been working on several improvements to React Navigation, such as improving animation performance with gesture-handler and reanimated libraries, migrating to TypeScript, and more.

In React Navigation 4.0, we decoupled navigators from the main package to reduce bundle size and improve maintainability. However, the biggest limitation of React Navigation was the static API: since the configuration was done statically outside of render-phase, it wasn’t possible to alter the configuration dynamically. So we decided to write a new implementation focusing on lifting this limitation, which I’ve been working on along with Michał Osadnik for past two months.

We’re finally ready to release an alpha so you can try it out. Let’s take a look at what’s new.

New API

React Navigation 5.0 has a dynamic component based API. Earlier, we used to pass configuration for the navigator when creating it with createXNavigator outside render. With the new API, we render the navigator as a component and pass the configuration as props.

To define our screens, we render them as children of the navigator.

<Stack.Navigator initialRouteName="home">

<Stack.Screen name="settings" component={Settings} />

<Stack.Screen

name="profile"

component={Profile}

options={{ title: 'John Doe' }}

/>

</Stack.Navigator>

The important difference is that all of the configuration is happening inside the render method. This means we have access to props, state and context, and can dynamically change the configuration for the navigator!

Highlights

Hooks first API

With new React Hooks, it’s much easier to reuse stateful logic, and works great with type systems unlike higher order components. The new implementation heavily uses hooks internally, but we have also made some hooks for the public API.

useNavigation — Access the navigation prop of the parent screen in any child component.

— Access the prop of the parent screen in any child component. useRoute — Access the route prop (previously navigation.state ) of the parent screen in any child component.

— Access the prop (previously ) of the parent screen in any child component. useFocusEffect — Run a side-effect when a screen comes into focus, similar to React.useEffect , useful for subscribing to event listeners only when the screen is focused.

— Run a side-effect when a screen comes into focus, similar to , useful for subscribing to event listeners only when the screen is focused. useIsFocused — Get the current focus state of the screen, useful for rendering content based on focus state.

Update options from component

We’ve added a new setOptions method on the navigation prop to make configuring screen navigation options more intuitive than its static navigationOptions predecessor. It lets us easily set screen options based on props, state or context without messing with params. Instead of using static options, we can call it anytime to configure the screen.

navigation.setOptions({

headerRight: () => (

<DoneButton

onPress={async () => {

await saveNote(); navigation.replace('Notes');

}}

/>

),

})

This will make it much easier for patterns such as adding a button in the header which needs to interact with the screen state.

First-class types with TypeScript

Types are no longer an afterthought in React Navigation: v5.0 has been written from the ground-up with TypeScript. We now get first class autocompletion and type-checking.

Notice how we have autocompletion for route params. We also autocomplete methods on the navigation object such as navigate, push etc. When you’re navigating, we can autocomplete the available route names and params.

Redux DevTools integration

We have long recommended that users let React Navigation handle the navigation state rather than putting it inside of their own Redux store. However, many people missed integration with Redux devtools. So we have added experimental integration with Redux DevTools extension.

We can now see navigation actions in the devtools along with the current navigation state. It also supports time-travel debugging!

It also works with the React Native Debugger app which uses the extension under the hood. It’s all automatic without any extra setup.

Upgrading

You don’t need to upgrade to this version if React Navigation 4 is working well for you. It’s still going to receive bug fixes and maintain compatibility with the latest React Native version.

If you do want to upgrade, we have a compatibility layer to help you gradually migrate your code. You should also read our upgrade guide for a list of differences which will give you a better idea of the new changes.

Try it out

To give the new version a try, you can go to reactnavigation.org/next and follow the instructions. Not that it’s still alpha and needs a lot of testing. So let us know if you encounter any bugs or have any suggestions.

You can open bug reports and send pull requests to github.com/react-navigation/navigation-ex. You can also tweet to us at @satya164 and @mosdnk.