Skip to content

Commit 62a7abe

Browse files
brentvatnebrentvatne
authored
Merge pull request react-navigation#268 from react-navigation/@vonovak/versioning
use docusaurus versioning
2 parents 0fb58c4 + 9f53412 commit 62a7abe

File tree

99 files changed

+9455
-10
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+9455
-10
lines changed

‎crowdin.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ files:
1414
source: '/website/i18n/en.json'
1515
translation: '/website/i18n/%locale%.json'
1616
languages_mapping: *anchor
17+
-
18+
source: '/website/versioned_docs/**/*.md'
19+
translation: '/website/translated_docs/%locale%/**/%original_file_name%'
20+
languages_mapping: *anchor

‎website/core/Footer.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,6 @@ class Footer extends React.Component {
4848
Contributing
4949
</a>
5050
</div>
51-
<div>
52-
<h5>Versions</h5>
53-
<a href="https://reactnavigation.org/docs/getting-started.html">
54-
Version 2 docs
55-
</a>
56-
<a href="https://v1.reactnavigation.org/docs/getting-started.html">
57-
Version 1 docs
58-
</a>
59-
</div>
6051
<div>
6152
<h5>Support</h5>
6253
<a href="https://discord.gg/4xEK3nD">

‎website/i18n/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,8 @@
132132
"Build your own Navigator": "Build your own Navigator",
133133
"Related Resources": "Related Resources",
134134
"Meta": "Meta",
135-
"API Reference": "API Reference"
135+
"API Reference": "API Reference",
136+
"How do I do ...?": "How do I do ...?"
136137
},
137138
"pages-strings": {
138139
"Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html)|no description given": "Learn more using the [documentation on this site.](/test-site/docs/en/doc1.html)",

‎website/pages/en/versions.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/**
2+
* Copyright (c) 2017-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
const React = require('react');
9+
10+
const CompLibrary = require('../../core/CompLibrary');
11+
12+
const Container = CompLibrary.Container;
13+
14+
const CWD = process.cwd();
15+
16+
const siteConfig = require(`${CWD}/siteConfig.js`);
17+
const versions = require(`${CWD}/versions.json`);
18+
19+
function Versions() {
20+
const latestVersion = versions[0];
21+
const repoUrl = `https://github.com/${siteConfig.organizationName}/${
22+
siteConfig.projectName
23+
}`;
24+
return (
25+
<div className="docMainWrapper wrapper">
26+
<Container className="mainContainer versionsContainer">
27+
<div className="post">
28+
<header className="postHeader">
29+
<h1>{siteConfig.title} Versions</h1>
30+
</header>
31+
<p>You can come back to this page and switch the version of the docs you're reading at any time by clicking on the version number at the top of the page.</p>
32+
<a href="https://github.com/react-navigation/react-navigation/blob/master/CHANGELOG.md">React Navigation changelog</a>
33+
<h3 id="latest">Current version (Stable)</h3>
34+
<table className="versions">
35+
<tbody>
36+
<tr>
37+
<th>{latestVersion}</th>
38+
<td>
39+
<a href={`/docs/en/getting-started.html`}>Documentation</a>
40+
</td>
41+
</tr>
42+
</tbody>
43+
</table>
44+
<p>
45+
This is the version that is configured automatically when you first
46+
install this project.
47+
</p>
48+
49+
{/*
50+
<h3 id="rc">Pre-release versions</h3>
51+
<table className="versions">
52+
<tbody>
53+
<tr>
54+
<th>master</th>
55+
<td>
56+
<a href="">Documentation</a>
57+
</td>
58+
</tr>
59+
</tbody>
60+
</table>
61+
<p>Other text describing this section.</p>
62+
*/}
63+
64+
<h3 id="archive">Past Versions</h3>
65+
<table className="versions">
66+
<tbody>
67+
{versions.map(
68+
version =>
69+
version !== latestVersion && (
70+
<tr key={version}>
71+
<th>{version}</th>
72+
<td>
73+
<a href={`/docs/en/${version}/getting-started.html`}>Documentation</a>
74+
</td>
75+
</tr>
76+
)
77+
)}
78+
</tbody>
79+
</table>
80+
<p>
81+
You can find past versions of this project on{' '}
82+
<a href={repoUrl}>GitHub</a>.
83+
</p>
84+
</div>
85+
</Container>
86+
</div>
87+
);
88+
}
89+
90+
module.exports = Versions;

‎website/versioned_docs/version-1.5.13/alternatives.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
id: version-1.5.13-alternatives
3+
title: Alternative libraries
4+
sidebar_label: Alternative libraries
5+
original_id: alternatives
6+
---
7+
8+
React Navigation isn't your only option for routing and navigation in React Native. If the [pitch & anti-pitch](pitch.html) or the API design leave you wanting to explore other options, here are a few to consider.
9+
10+
- [react-native-router-flux](https://github.com/aksonov/react-native-router-flux): this library is based on React Navigation but provides you with a different API to interact with it.
11+
- [react-native-navigation](https://github.com/wix/react-native-navigation): uses the underlying native APIs on iOS and Android, this is a popular alternative to React Navigation and worth considering if you value adhering to the platform conventions exactly and do not care as much about customization.
12+
- [react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native): this library is somewhat incomplete, but if you're familiar with the React Router API already and have simple requirements for your app, this might work for you.

‎website/versioned_docs/version-1.5.13/api-reference.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: version-1.5.13-api-reference
3+
title: API Reference
4+
sidebar_label: Overview
5+
original_id: api-reference
6+
---
7+
8+
This section of the documentation describes the public API of React Navigation. It always refers to the latest version of the library.

‎website/versioned_docs/version-1.5.13/auth-flow.md

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
id: version-1.5.13-auth-flow
3+
title: Authentication flows
4+
sidebar_label: Authentication flows
5+
original_id: auth-flow
6+
---
7+
8+
Most apps require that a user authenticate in some way to have access to data associated with a user or other private content. Typically the flow will look like this:
9+
10+
* The user opens the app.
11+
* The app loads some authentication state from persistent storage (for example, `AsyncStorage`).
12+
* When the state has loaded, the user is presented with either authentication screens or the main app, depending on whether valid authentication state was loaded.
13+
* When the user signs out, we clear the authentication state and send them back to authentication screens.
14+
15+
> Note: we say "authentication screens" because usually there is more than one. You may have a main screen with a username and password field, another for "forgot password", and another set for sign up.
16+
17+
## Set up our navigators
18+
19+
```js
20+
import { StackNavigator, SwitchNavigator } from 'react-navigation';
21+
22+
// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
23+
// goes here.
24+
25+
const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
26+
const AuthStack = StackNavigator({ SignIn: SignInScreen });
27+
28+
export default SwitchNavigator(
29+
{
30+
AuthLoading: AuthLoadingScreen,
31+
App: AppStack,
32+
Auth: AuthStack,
33+
},
34+
{
35+
initialRouteName: 'AuthLoading',
36+
}
37+
);
38+
```
39+
<a href="https://snack.expo.io/@react-navigation/auth-flow" target="blank" class="run-code-button">&rarr; Run this code</a>
40+
41+
You may not be familiar with `SwitchNavigator` yet. The purpose of `SwitchNavigator` is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that we want from the authentication flow: when users sign in, we want to throw away the state of the authentication flow and unmount all of the screens, and when we press the hardware back button we expect to not be able to go back to the authentication flow. We switch between routes in the `SwitchNavigator` by using the `navigate` action. You can read more about the `SwitchNavigator` in the [API reference](/docs/switch-navigator).
42+
43+
We set the `initialRouteName` to `'AuthLoading'` because we will fetch our authentication state from persistent storage inside of that screen component.
44+
45+
## Implement our authentication loading screen
46+
47+
```js
48+
import React from 'react';
49+
import {
50+
ActivityIndicator,
51+
AsyncStorage,
52+
StatusBar,
53+
StyleSheet,
54+
View,
55+
} from 'react-native';
56+
57+
class AuthLoadingScreen extends React.Component {
58+
constructor(props) {
59+
super(props);
60+
this._bootstrapAsync();
61+
}
62+
63+
// Fetch the token from storage then navigate to our appropriate place
64+
_bootstrapAsync = async () => {
65+
const userToken = await AsyncStorage.getItem('userToken');
66+
67+
// This will switch to the App screen or Auth screen and this loading
68+
// screen will be unmounted and thrown away.
69+
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
70+
};
71+
72+
// Render any loading content that you like here
73+
render() {
74+
return (
75+
<View style={styles.container}>
76+
<ActivityIndicator />
77+
<StatusBar barStyle="default" />
78+
</View>
79+
);
80+
}
81+
}
82+
```
83+
<a href="https://snack.expo.io/@react-navigation/auth-flow" target="blank" class="run-code-button">&rarr; Run this code</a>
84+
85+
## Fill in other components
86+
87+
Our `App` and `Auth` routes are both `StackNavigators`, but you could do whatever you like here. As mentioned above, you probably want your authentication route to be a stack for password reset, signup, etc. Similarly for your app, you probbaly have more than one screen. We won't talk about how to implement the text inputs and buttons for the authentication screen, that is outside of the scope of navigation. We'll just fill in some placeholder content.
88+
89+
```js
90+
class SignInScreen extends React.Component {
91+
static navigationOptions = {
92+
title: 'Please sign in',
93+
};
94+
95+
render() {
96+
return (
97+
<View style={styles.container}>
98+
<Button title="Sign in!" onPress={this._signInAsync} />
99+
</View>
100+
);
101+
}
102+
103+
_signInAsync = async () => {
104+
await AsyncStorage.setItem('userToken', 'abc');
105+
this.props.navigation.navigate('App');
106+
};
107+
}
108+
109+
class HomeScreen extends React.Component {
110+
static navigationOptions = {
111+
title: 'Welcome to the app!',
112+
};
113+
114+
render() {
115+
return (
116+
<View style={styles.container}>
117+
<Button title="Show me more of the app" onPress={this._showMoreApp} />
118+
<Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
119+
</View>
120+
);
121+
}
122+
123+
_showMoreApp = () => {
124+
this.props.navigation.navigate('Other');
125+
};
126+
127+
_signOutAsync = async () => {
128+
await AsyncStorage.clear();
129+
this.props.navigation.navigate('Auth');
130+
};
131+
}
132+
133+
// More code like OtherScreen omitted for brevity
134+
```
135+
<a href="https://snack.expo.io/@react-navigation/auth-flow" target="blank" class="run-code-button">&rarr; Run this code</a>
136+
137+
That's about all there is to it. At the moment, `SwitchNavigator` doesn't support animating between screens. Let us know if this is important to you [on Canny](https://react-navigation.canny.io/feature-requests).

‎website/versioned_docs/version-1.5.13/connecting-navigation-prop.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
id: version-1.5.13-connecting-navigation-prop
3+
title: Access the navigation prop from any component
4+
sidebar_label: Access the navigation prop from any component
5+
original_id: connecting-navigation-prop
6+
---
7+
8+
[`withNavigation`](/docs/with-navigation) is a higher order component which passes the `navigation` prop into a wrapped Component. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
9+
10+
```javascript
11+
import React from 'react';
12+
import { Button } from 'react-native';
13+
import { withNavigation } from 'react-navigation';
14+
15+
export default class MyBackButton extends React.Component {
16+
render() {
17+
// This will throw an 'undefined is not a function' exception because the navigation
18+
// prop is undefined.
19+
return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
20+
}
21+
}
22+
```
23+
24+
To resolve this exception, you could pass the `navigation` prop in to `MyBackButton` when you render it from a screen, like so: `<MyBackButton navigation={this.props.navigation} />`.
25+
26+
Alternatively, you can use the `withNavigation` function to provide the `navigation` prop automatically (through React context, if you're curious). This function behaves similarly to Redux's `connect` function, except rather than providing the `dispatch` prop to the component it wraps, it provides the `navigation` prop.
27+
28+
```js
29+
import React from 'react';
30+
import { Button } from 'react-native';
31+
import { withNavigation } from 'react-navigation';
32+
33+
class MyBackButton extends React.Component {
34+
render() {
35+
return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
36+
}
37+
}
38+
39+
// withNavigation returns a component that wraps MyBackButton and passes in the
40+
// navigation prop
41+
export default withNavigation(MyBackButton);
42+
```
43+
44+
Using this approach, you can render `MyBackButton` anywhere in your app without passing in a `navigation` prop explicitly and it will work as expected.

0 commit comments

Comments
 (0)