NativeScript React — Navigation

Photo by Museums Victoria on Unsplash

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…