React Navigation v7 sneak peek: Static API introduced

Two of the major pain points of using React Navigation have been TypeScript and deep linking configuration. Due to the dynamic nature of the navigators, it is necessary to manually maintain the TypeScript and deep linking configuration to match the navigation structure. This can be error-prone and time-consuming.

Source_

Hi everyone!

Today, we are exploring some interesting upcoming updates in React Navigation 7, aimed at smoothing out some of the pain points developers have faced, particularly in dealing with TypeScript and deep linking configuration. It's my pleasure to walk you through these updates and provide some insights into how they can streamline your navigation setup.

React Navigation, a vital React Native library, is nearing the release of version 7, currently in alpha. This update brings back a static API, yes, enabling screen definition through object configuration. This simplifies type inference and deep linking setup, easing the creation of dynamic navigation trees.

Static API: A Simplified Approach

One of the primary updates in React Navigation 7 is the (re)introduction of the Static API. This addition provides a simpler, more straightforward way to configure navigation, especially for those who found the dynamic API a bit overwhelming. Now, instead of manually maintaining TypeScript and deep linking configurations, developers can opt for the static approach to streamline their codebase.

const RootStack = createStackNavigator({
  screens: {
    Dashboard: {
      screen: Dashboard,
    },
    Profile: {
      screen: Profile,
    },
    Settings: {
      screen: Settings,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

function App() {
  return <Navigation />;
}

TypeScript Made Easier

This introduces a handy feature to simplify type inference. With the StaticParamList type, typescript types can be automatically inferred from the root navigator, making them readily available wherever you use useNavigation.

declare global {
  namespace ReactNavigation {
    interface RootParamList extends StaticParamList<typeof RootStack> {}
  }
}

Deep Linking Enhancements

Deep linking configuration receives a significant upgrade in React Navigation 7. Now, linking configurations can be seamlessly integrated into the navigation setup, ensuring better synchronization between navigation structure and deep linking. Additionally, paths can be generated automatically, reducing the manual effort required for each screen.

const RootStack = createStackNavigator({
  screens: {
    Profile: {
      screen: ProfileScreen,
      linking: {
        path: 'user/:id',
      },
    },
    Settings: {
      screen: SettingsScreen,
      linking: {
        path: 'settings',
      },
    },
  },
});

Declarative Authentication Flow

Maintaining the spirit of declarative programming, React Navigation 7 brings dynamism to the static API with the introduction of the 'if' property. This property allows developers to define authentication flows declaratively, specifying which screens are accessible based on user authentication status.

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      if: useIsSignedIn,
      screen: HomeScreen,
    },
    SignIn: {
      if: useIsSignedOut,
      screen: SignInScreen,
    },
  },
});

Excited to try out the new Static API? You can dive into React Navigation 7 alpha by installing the next tag of the React Navigation packages.

yarn add @react-navigation/native@next @react-navigation/native-stack@next

Make sure to also read the v7 upgrade guide if you want to know about other changes coming!

Stay tuned for more updates and until next time!.....