react-native-navigation-simple

Simple zero-dependency Javascript-only navigation for React Native with Typescript support!

The goal of this package is to provide an alternative to other popular React Native navigation packages when there is a need for a simple navigational patterns (usually simple navigation between a couple of screen) and/or wanting to have more control of number of external dependencies app is using.

This package does not have any external dependencies and is not dependent of underlying platform on which it is being executed, since all of navigation work is done in pure React. At the moment this poses a limitation since there is not stack-like tracking of routes history or similar bahaviours. If you have a need for a more complex use-case, feel free to give this package a try if it can be used as a base and implement your own logic on top of it.

Installation

npm i react-native-navigation-simple

Usage

First, define your routes as a type. Navigation supports flatten routes structure where every route component can have it's props defined. Define routes as a new type, let's say you want to have three screens: home, details and settings.

1type NavigationRoutes = {
2    Home: undefined;
3    Details: DetailsProps;
4    Settings: undefined.
5}

In order to start using navigation, you need to instantiate it using provided factory function.

First, import the function from the package:

1import { createNavigation } from "react-native-navigation-simple";

Then, instantiate it using provided NavigationRoutes type, preferrably in some separate file:

1import { createNavigation } from 'react-native-navigation-simple';
2
3type NavigationRoutes = {
4    Home: undefined;
5    Details: DetailsProps;
6    Settings: undefined.
7}
8
9export type RouteName = keyof NavigationRoutes;
10
11const { useNavigation, Navigation, NavigationRoute } = createNavigation<NavigationRoutes>();
12
13export {
14    useNavigation,
15    Navigation,
16    NavigationRoute,
17};

Somewhere in the root of your app, add navigation with defined routes as navigation configuration:

1import { Navigation, NavigationRoute } from "./your-custom-file";
2
3function App() {
4  return (
5    <Navigation>
6      <NavigationRoute route="Home" component={HomeScreen} default />
7      <NavigationRoute
8        route="Details"
9        component={DetailsScreen}
10        initialProps={/* Your component props */}
11      />
12      <NavigationRoute route="Game" component={SettingsScreen} />
13    </Navigation>
14  );
15}

If you want to navigate to some arbitrary route from some component, import the useNavigation hook which will return navigation instance, and use it to navigate to a route:

1function MyCustomComponent() {
2    const navigation = useNavigation();
3
4    const navigateToRoute = () => {
5        navigation.navigate({
6            route: 'Details',
7            props: /* component props */,
8        });
9    }
10
11    // ... rest of component's code
12}

Advanced

Navigation component has an optional prop onHardwareBackPress, which is fired when the hardware back press is detected (usually on Android). Parameter to callback fired is navigation instance, the same one which is returned from useNavigation hook. This prop can be used to implement stack-like navigation or to return to specific route.