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.

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.

Electrode Native Navigation