https://github.com/sylvainlg/feature-react-navigation
Feature based navigation for react-native (using react-navigation)
https://github.com/sylvainlg/feature-react-navigation
feature feature-u navigation react react-native react-navigation router routing
Last synced: 5 months ago
JSON representation
Feature based navigation for react-native (using react-navigation)
- Host: GitHub
- URL: https://github.com/sylvainlg/feature-react-navigation
- Owner: sylvainlg
- License: mit
- Created: 2019-12-20T23:37:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T09:46:17.000Z (over 3 years ago)
- Last Synced: 2025-10-10T09:09:03.658Z (8 months ago)
- Topics: feature, feature-u, navigation, react, react-native, react-navigation, router, routing
- Language: JavaScript
- Size: 3.1 MB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 33
-
Metadata Files:
- Readme: README.adoc
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
= 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) :
- <>
==== 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 => )}
)
}
----
### 2 - Promote routes
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](https://reactnavigation.org/docs/en/hello-react-navigation.html). 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
});
----