Using NativeRouter in a React Native Application

The React Router library provides the react-router-native package, which includes the implementation of the NativeRouter component for use in React Native applications. The React Native framework allows you to build native mobile applications for iOS and Android using JavaScript and React.

From React Native's Documentation (https://facebook.github.io/react-native/):

"With React Native, you don't build a mobile web app, an HTML5 app, or a hybrid app. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React."

In this chapter, the following topics are discussed:

• Using NativeRouter in a React Native application...

Using NativeRouter in a React Native application

Similar to the create-react-app CLI, the create-react-native-app CLI is used to create an application that includes build scripts that can be used to build an application for both development and production environments. It also includes packager, which allows you to test your application on iOS and Android emulators and also on real devices.

Creating a new project with the create-react-native-app CLI

Let's get started by first installing the CLI:

npm install -g create-react-native-app

The preceding command installs the CLI in the global node_modules directory. The next step is to create a React Native project using the CLI:

create-react-native-app react-native-test-app...

The <NativeRouter> component

The NativeRouter component uses the MemoryRouter component defined in the react-router package to provide routing support in a React Native application. MemoryRouter is used when you want to maintain the browsing history in memory without updating the URL in the address bar. It's particularly useful in non-browser environments where an address bar is not available. The MemoryRouter component creates a history object using the createMemoryHistory class available in the history package. This history object is then provided to the low-level <Router> interface.

In NativeRotuer.js:

import MemoryRouter from "react-router/MemoryRouter";

const NativeRouter = props => <MemoryRouter {...props} />;

Then the MemoryRouter component creates a history object using createMemoryHistory, in MemoryRouter.js:

import { createMemoryHistory...

The <BackButton> component

By default, when you press the back button on an Android device, the application exits instead of navigating the user to the previous state in the history. The React Native library includes a BackHandler class, which lets you customize the behavior of the devices' hardware back button. The <BackButton> component in React Router uses the BackHandler class to customize the behavior of the back button on an Android device:

import { NativeRouter, BackButton } from 'react-router-native';

export default class App extends Component {
    render() {
        return (
            <NativeRouter>
                <View style={styles.container}>
                    <BackButton />
                    <SideMenu menu={menu}>
                        <ContentView />
                    </SideMenu>
                <...

Creating Deeplinks with <DeepLinking>

In a web application, the HTTP URL refers to a location that can be accessed by entering the same in the address bar of the browser. In Single Page Applications, this location refers to a specific route that the user can navigate to. In the context of a mobile application, DeepLink refers to a specific page or content that you would want to view. For example, when you click on a link on a mobile device, instead of opening a new tab in the browser window, an application is launched and the requested page is shown.

Unlike web applications, which use HTTP to refer to a specific location, applications on a mobile device need to declare a URI scheme for the application. For example, the Twitter application uses the URI scheme twitter:// and thus you could view their Twitter profile by referring to the URI twitter://profile. Deeplinks are...

Summary

In this chapter, we looked at how React Router's <NativeRouter> component can be used in a React Native application. The <NativeRouter> component is available in the react-router-native package, and it uses the <MemoryRouter> component internally, which is defined in the react-router package. The <NativeRouter> component accepts props: initialEntries, initialIndex, getUserConfirmation, keyLength, and children. Also, it provides a default implementation for the getUserConfirmation function, which uses React Native's Alert component to display a confirmation message. This confirmation message is shown when the <Prompt> component is included in the application and the user tries to navigate away from the current route.

The <BackButton> component in react-router-native is a wrapper around React Native's BackHandler class,...