diff --git a/Example/yarn.lock b/Example/yarn.lock index a54e99b97..7066cceff 100644 --- a/Example/yarn.lock +++ b/Example/yarn.lock @@ -3140,9 +3140,9 @@ react-native-drawer-layout@1.3.2: dependencies: react-native-dismiss-keyboard "1.0.0" -react-native-router-flux@4.0.0-beta.2: - version "4.0.0-beta.2" - resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.0-beta.2.tgz#68ad6289f353b73f6f657db99d6e86ee5c4c8c98" +react-native-router-flux@4.0.0-beta.3: + version "4.0.0-beta.3" + resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.0-beta.3.tgz#7153a13e44031fe1017a079f498a848543e335bd" dependencies: mobx "^3.1.16" mobx-react "^4.2.1" diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 000000000..e366a5389 --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,3 @@ +theme: jekyll-theme-minimal +title: React Native Router +description: Simple, minimal routing for React Native diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html new file mode 100644 index 000000000..60da7f726 --- /dev/null +++ b/docs/_layouts/default.html @@ -0,0 +1,77 @@ + + + + + + {{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }} + + + + + + +
+
+

{{ site.title | default: site.github.repository_name }}

+

{{ site.description | default: site.github.project_tagline }}

+ + {% if site.github.is_project_page %} +

View the Project on GitHub {{ github_name }}

+ {% endif %} + + {% if site.github.is_user_page %} +

View My GitHub Profile

+ {% endif %} + + {% if site.show_downloads %} + + {% endif %} +
+
+ + {{ content }} + +
+ +
+ + + + {% if site.google_analytics %} + + {% endif %} + + diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss new file mode 100644 index 000000000..5742f9302 --- /dev/null +++ b/docs/assets/css/style.scss @@ -0,0 +1,4 @@ +--- +--- + +@import "{{ site.theme }}"; diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 000000000..27e527949 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,83 @@ +# Simple React Native Routing + +#### WARNING: react-native-router-flux v4 is in beta. Go [here](https://github.com/aksonov/react-native-router-flux/tree/3.39.1) for v3. + +___ + +Define all your routes in one place... + +```js +class App extends React.Component { + render() { + return ( + + + + + + + + ); + } +} +``` + +...and navigate from scene to scene with a simple, powerful API + +```js +// login.js + +// navigate to 'home' as defined in your top-level router +Actions.home(PARAMS) + +// go back (i.e. pop the current screen off the nav stack) +Actions.pop() + +// refresh the current Scene with the specified props +Actions.refresh({param1: 'hello', param2: 'world'}) +``` + + +## Try the example app + +![rnrf](https://user-images.githubusercontent.com/3681859/27937441-ef61d932-626b-11e7-885f-1db7dc74b32e.gif) + +```bash +# Get the code +git clone git@github.com:aksonov/react-native-router-flux.git` +cd react-native-router-flux/Example + +# Install dependencies +yarn + +# Run it +react-native run-ios +``` + +## v4 Features +* Based on latest [React Navigation](https://reactnavigation.org) API +* Separate navigation logic from presentation. You may change now navigation state directly from your business logic code - stores/reducers/etc. navigationStore +* Built-in state machine (former Switch replacement) - each ‘scene’ has onEnter/onExit handlers. +MobX-powered, all used scenes are wrapped as 'observer' automatically. You may subscribe to navigationStore (former Actions), observe current navigation state, etc. If you are using Redux, skip this. +* Flexible nav bar customization, that is not allowed by react navigation right now: +https://github.com/react-community/react-navigation/issues/779 +* Drawer support (react +* 'Lightbox' support (used by popups like Error alert within Example project) + +## Breaking changes (compared to v3): +* No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop: +https://reactnavigation.org/docs/navigators/custom +* No support for partial hiding of tab bar for some tabs because of react navigation bug: +https://github.com/react-community/react-navigation/issues/1584 +* No possibility to skip animation during reset/replace: +https://github.com/react-community/react-navigation/issues/1493 +* `Switch` is removed - you may use onEnter/onExit handlers for more flexible logic. +* `getSceneStyle` is removed (no needed in v4). +* Custom reducer (`createReducer` prop for Router) - Redux actions now are passed from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.) +* Drawer is 'drawer' attribute Scene +* Modal is 'modal' attribute for Scene +* No flux 'focus' actions - use onEnter/onExit handlers instead. +* Possible other stuff. + +## Migrating from v3 +Coming soon