Skip to content

Commit

Permalink
First stab at docs using Github pages (#1978)
Browse files Browse the repository at this point in the history
* first stab at Github pages

* Update index.md
  • Loading branch information
southerneer authored and aksonov committed Jul 7, 2017
1 parent bd648eb commit 2395e1c
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 3 deletions.
6 changes: 3 additions & 3 deletions Example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3140,9 +3140,9 @@ [email protected]:
dependencies:
react-native-dismiss-keyboard "1.0.0"

[email protected].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"
[email protected].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"
Expand Down
3 changes: 3 additions & 0 deletions docs/_config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
theme: jekyll-theme-minimal
title: React Native Router
description: Simple, minimal routing for React Native
77 changes: 77 additions & 0 deletions docs/_layouts/default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>{{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}</title>

<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>{{ site.title | default: site.github.repository_name }}</h1>
<p>{{ site.description | default: site.github.project_tagline }}</p>

{% if site.github.is_project_page %}
<p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ github_name }}</small></a></p>
{% endif %}

{% if site.github.is_user_page %}
<p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
{% endif %}

{% if site.show_downloads %}
<ul>
<li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
<li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
<li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
</ul>
{% endif %}
</header>
<section>

{{ content }}

</section>
<footer>
{% if site.github.is_project_page %}
<p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
{% endif %}
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>


{% if site.google_analytics %}
<script>
;(function(i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r
;(i[r] =
i[r] ||
function() {
;(i[r].q = i[r].q || []).push(arguments)
}), (i[r].l = 1 * new Date())
;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
a.async = 1
a.src = g
m.parentNode.insertBefore(a, m)
})(
window,
document,
"script",
"https://www.google-analytics.com/analytics.js",
"ga"
)

ga("create", "{{ site.google_analytics }}", "auto")
ga("send", "pageview")
</script>
{% endif %}
</body>
</html>
4 changes: 4 additions & 0 deletions docs/assets/css/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
---

@import "{{ site.theme }}";
83 changes: 83 additions & 0 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -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 (
<Router>
<Scene key="root">
<Scene key="login" component={Login} title="Login"/>
<Scene key="register" component={Register} title="Register"/>
<Scene key="home" component={Home}/>
</Scene>
</Router>
);
}
}
```

...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 [email protected]: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

0 comments on commit 2395e1c

Please sign in to comment.