ernnavigation-api

This SDK is automatically generated by Electrode Native API generator.

It uses Swagger to generate bridge code for Android, iOS, and React Native.

Motive

The Electrode Native team wants to make the React Native navigation easier for ERN MiniApps. Currently, there are many navigation frameworks available for React Native in the open source world. Those frameworks work great for a single react native app since there is only one application controlling the entire navigation.

When we talk about MiniApps, we are assuming a modularized structure where you can build multiple MiniApps and run them all inside a native app by being able to communicate to each other easily. Electrode native also emphasise on the fact that it should be possible to build part of an app in native and be able to talk to a MiniApp if needed. In this case the navigation gets trickier as there is no longer a single place/module that controls the navigation or maintains the uniformity of the top/bottom bar, navigation etc between screens. It is also possible with Electrode Native to have a feature built in native to have React Native screens.

All these different use cases have driven us to a new navigation solution that is pre-built inside the container generated by electrode native. This api is a pure interface that will only be functional when an implementation is put in place. Electrode Native during container generation will look for this and api and inject an implementation inside the native container.

Installation

For Node.js

ern

ern add ernnavigation-api

npm

npm install ernnavigation-api

Start developing each page as an independent UI component that can render itself provided it receives all the props passed in inside the initial props. One major difference you will see from a traditional React Native app development to this approach is that, each component needs to be registered with AppRegistry in your index.js file. Find a sample index.js below. Best practice is to append each component with the app name to avoid name collisions when more MiniApps are involved.

import {AppRegistry} from 'react-native';
import Page1 from './Page1';
import Page2 from './Page2';
import PageN from './PageN';
import {name as appName} from './app.json';

AppRegistry.registerComponent(`${appName}`, () => Page1);
AppRegistry.registerComponent(`${appName}_Page2`, () => Page2);
AppRegistry.registerComponent(`${appName}_PageN`, () => PageN);

And to navigate to ${appName}_Page2 the following code can be executed.

import {EnNavigationApi} from 'ernnavigation-api';

EnNavigationApi.requests()
  .navigate({path: `${appName}_Page2`})
  .then(e => {
    console.log('Navigation Succeeded: ', e);
  })
  .catch(e => {
    console.error('Navigation Failed: ', e);
  });

Documentation for API Endpoints

Method	Description
back	Navigates back to a previous route. If the route does not exist, it will be pushed onto the route stack.
finish	Finishes the route, popping the current route stack from the activities.
navigate	Navigates to a new route.
update	Updates the current route. The route path must match the current path.

Documentation for Models

• ernnavigationApi.ErnRoute
• ernnavigationApi.NavigationBar
• ernnavigationApi.NavigationBarButton

Contributing

Code in this repository is generated by the ern regen-api command whenever there is a change made to the schema.json file. Please open an issue for any suggestions or improvements that can be made to the api. Also, Feel free to open PR for documentation and code generated using the ern regen-api command.

Native implementation

• Android
• iOS