1 | # React Native Router (v3.x) [![Join the chat at https://gitter.im/aksonov/react-native-router-flux](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aksonov/react-native-router-flux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
2 |
|
3 | - [Mini-Tutorial](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/MINI_TUTORIAL.md)
|
4 | - [API and Configuration](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/API_CONFIGURATION.md)
|
5 | - Available Imports
|
6 | - Router API
|
7 | - Scene API
|
8 | - [Detailed Example](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/DETAILED_EXAMPLE.md)
|
9 | - [Reactive/Redux/Flux](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/REDUX_FLUX.md)
|
10 | - [Other Info](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/OTHER_INFO.md)
|
11 | - Modals
|
12 | - Tabbar
|
13 | - Custom navbar
|
14 | - Switch
|
15 | - Splitting Scenes
|
16 | - Drawer (side-menu)
|
17 | - Sub-Scenes
|
18 | - [Changelog](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/CHANGELOG.md)
|
19 | - [Migrating from 2.x](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/MIGRATION.md)
|
20 |
|
21 | ## Features
|
22 |
|
23 | `react-native-router-flux` is a routing package that allows you to:
|
24 |
|
25 | - Define scene transitions in one central location
|
26 | - Without having to pass navigator objects around, and allow you to
|
27 | - Call transitions anywhere in your code with a simple syntax (e.g. `Actions.login({username, password})` or `Actions.profile({profile})` or even `Actions.profile(123)` - all params will be part of `this.props` for given Scene component).
|
28 |
|
29 | ### New Features and Highlights
|
30 |
|
31 | - **Highly Customizable Navigation Bar** - Show/hide the navbar depending on Scene or even the state of a Scene (e.g. Edit/Save navbar for edit mode).
|
32 |
|
33 | - **Tab Bar Support** using [react-native-tabs](https://github.com/aksonov/react-native-tabs) (see Example app).
|
34 |
|
35 | - **Nested Navigators** (e.g. Each tab can have its own navigator, nested in a root navigator).
|
36 |
|
37 | - **Custom Scene Renderers** for action sheet, native TabBarIOS or anything else. See built-in `Modal` renderer (to display popups) for example. *Call for PRs!* let's build some custom renderers for ActionSheet, Drawer, etc. Let's make an awesome library! Currently, if you want to use Action Sheets you'll need to use a 3rd party module.
|
38 |
|
39 | - **Dynamic Routing** allows you to choose which scene to render depending on application state (see the `Switch` renderer, useful for authentication).
|
40 |
|
41 | - **Bring Your Own Reducer** for navigation state.
|
42 |
|
43 | - **Reset History Stack** - The new [`reset`](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/API_CONFIGURATION.md#scene)type for clearing the history stack and eliminating the navbar back button.
|
44 |
|
45 | - **More Powerful State Control** - Support for having different states while on the same screen. For example, "View My Account" could allow in-place editing of fields and "Save", "Cancel" navigation bar buttons should appear.
|
46 |
|
47 | ## Getting Started
|
48 |
|
49 | Check out the [mini-tutorial](https://github.com/aksonov/react-native-router-flux/blob/v3/docs/MINI_TUTORIAL.md) for a quick walkthrough of the routing system.
|
50 |
|
51 | ## Supported configurations
|
52 |
|
53 | While ExperimentalNavigation API is not stable, RNRF uses separated fork of ExperimentalNavigation API to avoid dependency from React Native version.
|
54 | So 3.30 version of RNRF doesn't depend from React Native version, but from that fork (now it is based on 0.26 API).
|
55 | You could use this component with RN0.26+
|
56 |
|
57 | ## Installation
|
58 | ```
|
59 | npm i react-native-router-flux --save
|
60 | ```
|
61 |
|
62 | ## Usage
|
63 | In your top-level `index.js`, define your scenes using the `Scene` component and pass it into the `Router` as children:
|
64 | ```js
|
65 | import {Scene, Router} from 'react-native-router-flux';
|
66 |
|
67 | class App extends React.Component {
|
68 | render() {
|
69 | return <Router>
|
70 | <Scene key="root">
|
71 | <Scene key="login" component={Login} title="Login"/>
|
72 | <Scene key="register" component={Register} title="Register"/>
|
73 | <Scene key="home" component={Home}/>
|
74 | </Scene>
|
75 | </Router>
|
76 | }
|
77 | }
|
78 | ```
|
79 | Alternatively, you could define all of your scenes during compile time and use it later within `Router`:
|
80 | ```js
|
81 | import {Actions, Scene, Router} from 'react-native-router-flux';
|
82 |
|
83 | const scenes = Actions.create(
|
84 | <Scene key="root">
|
85 | <Scene key="login" component={Login} title="Login"/>
|
86 | <Scene key="register" component={Register} title="Register"/>
|
87 | <Scene key="home" component={Home}/>
|
88 | </Scene>
|
89 | );
|
90 |
|
91 | /* ... */
|
92 |
|
93 | class App extends React.Component {
|
94 | render() {
|
95 | return <Router scenes={scenes}/>
|
96 | }
|
97 | }
|
98 | ```
|
99 |
|
100 | On any Scene, you can also call the following functions by first importing the `Actions` object:
|
101 | ```js
|
102 | import {Actions} from 'react-native-router-flux'
|
103 | ```
|
104 | And then:
|
105 |
|
106 | * `Actions.ACTION_NAME(PARAMS)` will call the appropriate action and params will be passed to the scene.
|
107 | * `Actions.pop()` will pop the current screen. It accepts following optional params:
|
108 | * `{popNum: [number]}` allows to pop multiple screens at once
|
109 | * `{refresh: {...propsToSetOnPreviousScene}}` allows to refresh the props of the scene that it pops back to
|
110 | * `Actions.refresh(PARAMS)` will update the properties of the current screen.
|
111 |
|
112 | ## Production Apps using react-native-router-flux
|
113 | + Buddify ([iOS](https://itunes.apple.com/app/id1149011372), [Android](https://play.google.com/store/apps/details?id=com.buddify)) - helps travelers discover fun things to do locally.
|
114 | + GuavaPass.com ([iOS](https://itunes.apple.com/en/app/guavapass-one-pass-fitness/id1050491044?l=en&mt=8), Android) - offers convenient access to top classes at boutique fitness studios across Asia.
|
115 | + Epic Fail Videos ([iOS](https://itunes.apple.com/us/app/epic-fail-videos-best-fail/id1115219339), [Android](https://play.google.com/store/apps/details?id=com.hazuu.epicfailvideos)) - The best Fail Videos Collection, never miss a laugh with your friends!
|
116 | + Junk Free ([iOS](https://itunes.apple.com/us/app/junk-free-by-junk-free-june/id1109940159)) - A simple way to find, share, and save recipes, workouts, and other healthy content with your friends, family and workmates.
|
117 | + chozun ([iOS](https://itunes.apple.com/au/app/chozun/id1097365167), [Android](https://play.google.com/store/apps/details?id=com.chozun)) - Your travel companion, matching your lifestyle on the go!
|
118 | + Snappatizer ([iOS](https://itunes.apple.com/us/app/snappatizer-find-rank-best/id1147400405?mt=8)) - Find and rank the best food around you.
|
119 | + Look Lock ([GitHub](https://github.com/7kfpun/PhotosReactNative), [iOS](https://itunes.apple.com/us/app/look-lock-show-photos-without/id1151863742), [Android](https://play.google.com/store/apps/details?id=com.kfpun.photos)) - Show photos without worries.
|
120 | + BusDue, ([iOS](https://itunes.apple.com/gb/app/busdue/id1185327843?mt=8), [Android](https://play.google.com/store/apps/details?id=com.busdue)) - London bus arrival time app
|
121 |
|
122 | ## Support
|
123 | Thanks to all who submitted PRs to 2.x/3.x releases. If you like the component and want to support it, feel free to donate any amount or help with issues.
|
124 |
|
125 |
|
126 |
|
127 |
|