feature-react-navigation

= feature-react-navigation - _Feature based navigation using react-navigation_

feature-react-navigation is a https://feature-u.js.org/[feature-u] module which provide a routing aspect into your features using https://reactnavigation.org/[react-navigation].

The module aim to build a single navigation tree with routes provided by each feature registred in your feature-u instance. Your features don't have the knowledge off the final tree, they only have to expose their routes throught the route aspect.

image:https://travis-ci.org/sylvainlg/feature-react-navigation.svg?branch=master[title="TravisCI Status", link="https://travis-ci.com/sylvainlg/feature-react-navigation"]
image:https://api.codacy.com/project/badge/Grade/508c8d7d913a4c3ca61b7428dea59bdb[title="Codacy Grade Badge",link="https://www.codacy.com/manual/sylvainlg/feature-react-navigation?utm_source=github.com&utm_medium=referral&utm_content=sylvainlg/feature-react-navigation&utm_campaign=Badge_Grade"]
image:https://api.codacy.com/project/badge/Coverage/508c8d7d913a4c3ca61b7428dea59bdb[title="Codacy Coverage Badge",link="https://www.codacy.com/manual/sylvainlg/feature-react-navigation?utm_source=github.com&utm_medium=referral&utm_content=sylvainlg/feature-react-navigation&utm_campaign=Badge_Coverage"]
image:https://img.shields.io/npm/v/feature-react-navigation.svg[title="NPM Version Badge",link="https://www.npmjs.com/package/feature-react-navigation"]

== Getting started

$ yarn add feature-react-navigation

Additionnally, you may need peerDependencies installed :

[source,bash]
----
$ yarn add feature-u
$ yarn add @react-navigation/core
$ yarn add @react-navigation/native
or
$ yarn add @react-navigation/web
----

== Usage

=== 1 - Register the aspect

Within your mainline, register the feature-react-navigation routeAspect to feature-u's https://feature-u.js.org/cur/api.html#launchApp[launchApp()] method.

Please note that routeAspect has 1 required named parameter (see below for details) :

- <Navigator>>

==== App.js

[source,js]
----
import { launchApp } from 'feature-u';
import { createRouteAspect } from 'feature-react-navigation';
import { createAppContainer } from '@react-navigation/native';
import features from './feature';

// configure Aspects (as needed)
const routeAspect = createRouteAspect({
Navigator
});

export default launchApp({

aspects: [
routeAspect,
... other Aspects here
],

features,

registerRootAppElm(rootAppElm) {
AppRegistry.registerComponent(appName, () => () => rootAppElm); // convert rootAppElm to a React Component
},
});
----

==== Navigator object configuration

This is the classic

With this configuration, the module stay a pure react module. Any adherence with react-native is no longer required.

==== navigationPattern configuration

In mobile application, the navigation stack could be a lot more complex than on the web and react-navigation respond to that complexity by providing some different navigators (https://reactnavigation.org/docs/en/stack-navigator.html[stack], https://reactnavigation.org/docs/en/switch-navigator.html[switch], https://reactnavigation.org/docs/en/bottom-tab-navigator.html[tab], https://reactnavigation.org/docs/en/drawer-navigator.html[drawer]). The navigationPattern configuration is the way to deal with it in feature-react-navigation.

Beside, features don't have to know how the navigation is organize in the final application. Even, you may want to re-use some feature across applications whithout inheriting the same navigation stack. With this way of building navigation stack, your application have total control about it.

- navigator: create[Navigator] function
- navigationOptions: options taken by the navigator function
- routes: list of named route from features
- featureRoutes: list of feature names, expended to each routes starting by the feature name - see <>.

[source,javascript]
----
const Navigator = ({ routes }) => {
return (


{routes.map(route => )}


)
}
----

$3

Within each feature that promotes UI Screens, simply register the feature's route through the Feature.route property _(using feature-u's [createFeature()])_.

In the sample, login feature promotes somes routes in a react-navigation compatible format. It's strongly encouraged to prefix all route names by the feature name in order to use <> pattern configuration.

.src/feature/login/index.js
[source,javascript]
----
import React from 'react';
import {createFeature} from 'feature-u';

import fname from './feature-name'
import {LoginScreen,
LoginSuccessScreen} from './screens';

export default createFeature({

name: 'login',

route: {
routes: {
[${fname}.LOGIN]: {
screen: LoginScreen,
},
[${fname}.SUCCESS]: {
screen: LoginSuccessScreen,
},
},
},

... snip snip
});
----