Electrode Native Navigation API.

This SDK is automatically generated by Electrode Native API generator.

It uses swagger to generate bridge code for Swift, Android and React Native.

Motive

Electrode native team wants to make the react native navigation easier for MiniApps. Currently there are many navigation frameworks availbe 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 which will be 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 palce. Electrode native during container generation will look for this and api and inject an implemenation inside the native container.

Installation

For Node.js

ern

ern add ernnavigation-api

npm

npm install ernnavigation-api --save

Then start developing each page as an independant UI component that can render itslef provided it receives all the props passed in inside the intial props. One major difference you will see from a traditional react native app developement to this approach is that, each component needs to be registerd to the 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 improvemnets 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 implementaion

• android
• iOS