NativeScript React — Navigation

React is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript React.

Navigation

We can use the react-nativescript-navigation package to add navigation to our app.

To install the package, we run:

npm install --save react-nativescript-navigation @react-navigation/native

Tab Navigation

Once we installed the package, we can add tab navigation by using the TabNavigator object.

For instance, we can write:

import * as React from "react";
import { BaseNavigationContainer } from '@react-navigation/core';
import { stackNavigatorFactory, tabNavigatorFactory } from "react-nativescript-navigation";

const TabNavigator = tabNavigatorFactory();

function First({ navigation }) {
  function onButtonTap() {
    navigation.navigate('second');
  }

  return (
    <flexboxLayout
      style={{
        flexGrow: 1,
        width: "100%",
        height: "100%",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "yellow",
      }}
    >
      <label fontSize={24} text={"first route!"} />
      <button onTap={onButtonTap} fontSize={24} text={"Go to next route"} />
    </flexboxLayout>
  );
}

function Second({ navigation }) {
  function onButtonTap() {
    navigation.goBack();
  }

  return (
    <flexboxLayout
      style={{
        flexGrow: 1,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "gold",
      }}
    >
      <label fontSize={24} text={"second route!"} />
      <button onTap={onButtonTap} fontSize={24} text={"Go back"} />
    </flexboxLayout>
  );
}

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <BaseNavigationContainer>
          <TabNavigator.Navigator initialRouteName="first">
            <TabNavigator.Screen name="first" component={First} />
            <TabNavigator.Screen name="second" component={Second} />
          </TabNavigator.Navigator>
        </BaseNavigationContainer>
      </page>
    </frame>
  );
}

We call the tabNavigationFactory to create the TabNavigator object.

It has the TabNavigator.Navigator component to add navigation.

And the TabNavigator.Screen component adds the screens for the navigation.

The name prop has the name of the screen.

The First and Second components are added as the screens.

First and Second have the navigation prop, which has the navigate method to navigate to the screen we want by its name.

The goBack method goes back to the previous screen.

Stack Navigation

If we don’t want to add tabs into our app but want to add navigation, we can use the StackNavigator object.

To do this, we write:

import * as React from "react";
import { BaseNavigationContainer } from '@react-navigation/core';
import { stackNavigatorFactory, tabNavigatorFactory } from "react-nativescript-navigation";

const StackNavigator = stackNavigatorFactory();

function First({ navigation }) {
  function onButtonTap() {
    navigation.navigate('second');
  }

  return (
    <flexboxLayout
      style={{
        flexGrow: 1,
        width: "100%",
        height: "100%",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "yellow",
      }}
    >
      <label fontSize={24} text={"first route!"} />
      <button onTap={onButtonTap} fontSize={24} text={"Go to next route"} />
    </flexboxLayout>
  );
}

function Second({ navigation }) {
  function onButtonTap() {
    navigation.goBack();
  }

  return (
    <flexboxLayout
      style={{
        flexGrow: 1,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "gold",
      }}
    >
      <label fontSize={24} text={"second route!"} />
      <button onTap={onButtonTap} fontSize={24} text={"Go back"} />
    </flexboxLayout>
  );
}

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <BaseNavigationContainer>
          <StackNavigator.Navigator initialRouteName="first">
            <StackNavigator.Screen name="first" component={First} />
            <StackNavigator.Screen name="second" component={Second} />
          </StackNavigator.Navigator>
        </BaseNavigationContainer>
      </page>
    </frame>
  );
}

We have similar code as the TabNavigator , the only difference is that we replaced it with StackNavigator .

StackNavigator is created with the stackNavigatorFactory function.

Then we see the screens rendered and we can navigate by tapping on the buttons.

Conclusion

We can add navigation into our React NativeScript app with the react-nativescript-navigation package.