Getting Started

Installation

React-nonav needs the following dependencies; if you do not have those installed, you need to install them with the correspondig command:

Then, follow any post-installation instruction of react-native-reanimated. See react-native-reanimated Installation Instructions.

Then, install React-Nonav with:

yarn add react-nonav

or

npm i react-nonav

Basic Usage

Create a canal

In order to create a canal, use the Canal and Screen components. Your screens order is important: the order is the elevation order. If two or more screens are visible, last visible in the array is shown.

xxxxxxxxxx

import React from 'react';

import { Canal, Screen } from 'react-nonav';

import { FirstName } from './FirstName';

import { LastName } from './LastName';

​

const SignInCanal = () => (

  <Canal>

    <Screen name="firstname" Component={FirstName} visible />

    <Screen name="lastname" Component={LastName} visible={false} />

  </Canal>

);

That's all !

Add a full screen page

If you want to add full screen page, pass the isFullScreen flag prop to your Screen when creating a canal. In the following example, lastname is a full screen page.

xxxxxxxxxx

import React from 'react';

import { Canal, Screen } from 'react-nonav';

import { FirstName } from './FirstName';

import { LastName } from './LastName';

​

const SignInCanal = () => (

  <Canal>

    <Screen name="firstname" Component={FirstName} visible />

    <Screen name="lastname" Component={LastName} visible={false} isFullScreen />

  </Canal>

);

In order to render the full screen page, add the FullScreenPortal at the top level in your rendering tree.

xxxxxxxxxx

import React, { Component } from 'react';

import { MyCanal } from './canals/MyCanal';

import { FullScreenPortal } from 'react-nonav';

​

export default class App extends Component {

  render() {

    return (

      <FullScreenPortal>

        <MyCanal />

      </FullScreenPortal>

    );

  }

}

Go Back

Back events are also managed in a declarative way. Use the onBack callback prop on your screen.

xxxxxxxxxx

import React from 'react';

import { Canal, Screen } from 'react-nonav';

import { FirstName } from './FirstName';

import { LastName } from './LastName';

​

const SignInCanal = () => (

  <Canal>

    <Screen name="firstname" Component={FirstName} visible />

    <Screen

      name="lastname"

      Component={LastName}

      visible={false}

      onBack={() => {

        doSomething();

      }}

    />

  </Canal>

);

You are ready to use React-Nonav 🎸.