ern-navigation

Getting Started

Prerequisites

• All prerequisites of Electrode Native
• An Electrode Native miniapp

Installation

Install ern-navigation as a dependency in your miniapp:

yarn add ern-navigation

Alternatively: npm i --save ern-navigation

Documentation

Detailed API documentation is available on our website:

https://www.electrode.io/ern-navigation

Updates to the documentation will be deployed to gh-pages automatically with every merge to master. The documentation can also be generated locally by running yarn docs. Open public/index.html to preview the website. Use yarn docs -p to include private symbols as well.

Example

First, let's create some components to act as the app's different screens. Each of these components should extend Electrode Native Navigation's Component class, and will need to define a few class properties:

import {Component} from 'ern-navigation';

export default class MainScreenComponent extends Component {
  static displayName = 'Main Screen';
  static navigationOptions = {
    title: 'My Application',
    buttons: [{
      icon: Image.resolveAssetSource(exitIcon).uri,
      id: 'exit',
      location: 'right',
      adaLabel: 'Exit this app'
    }]
  };
  onNavButtonPress (buttonId) {
    switch (buttonId) {
      case 'exit':
        this.finish();
        break;
      default:
        console.warn(
          `'${buttonId}' not handled in '${MainScreenComponent.getRegisteredRoute()}'`,
        );
        break;
    }
  }
}

Once all screen components have been created, they will need to be registered using Electrode Native Navigation's AppNavigator class:

import {AppNavigator} from 'ern-navigation';

new AppNavigator({
  'MainScreen': MainScreenComponent,
  'SecondScreen': SecondScreenComponent,
  // ...
}, {
  initialScreen: 'MainScreen'
}).registerAll('MyMiniApp');

In this example, the MainScreenComponent and SecondScreenComponent are referred to as MainScreen and SecondScreen, respectively, whenever any navigation is performed. From inside any of the screen components, calling this.navigateInternal(screenName) will navigate to the specified registered screen.

Further Reading

The movies-reloaded miniapp outlines the different mechanisms that are provided to you by Electrode Native Navigation.

Also check out our Electrode Native Navigation Blog Post.

License

Copyright 2020 Walmart Labs

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.