React Navigation 5.0 alpha – Rethinking Navigation as a Component-first API

Just announced at React Native EU is an alpha release of React Navigation 5.0, a navigator for use with React Native.

An exploration of a component-first API for React Navigation for building more dynamic navigation solutions.

  • Should play well with static type system
  • Navigation state should be contained in root component (helpful for stuff such as deep linking)
  • Component-first API

Instead of using constructs where you had to call the createStackNavigator function with an object …

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

… there’s now a component that provides you with it:

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationNativeContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationNativeContainer>
  );
}

React Navigation @next Documentation →
React Navigation @next Source (GitHub) →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.