Browse Source

update docs (#958)

Guy Carmeli 7 years ago
parent
commit
23819b04bd

+ 1
- 10
docs/README.md View File

4
   React Native Navigation
4
   React Native Navigation
5
 </h1>
5
 </h1>
6
 
6
 
7
-[![NPM Version](https://img.shields.io/npm/v/react-native-navigation.svg?style=flat)](https://www.npmjs.com/package/react-native-navigation)
8
-[![NPM Downloads](https://img.shields.io/npm/dm/react-native-navigation.svg?style=flat)](https://www.npmjs.com/package/react-native-navigation)
9
-[![Build Status](https://travis-ci.org/wix/react-native-navigation.svg?branch=master)](https://travis-ci.org/wix/react-native-navigation)
10
-[![Join us on Discord](https://img.shields.io/badge/discord-react--native--navigation-738bd7.svg?style=flat)](https://discord.gg/DhkZjq2)
11
-
12
-App-wide support for 100% native navigation with an easy cross-platform interface. For iOS, this package is a wrapper around [react-native-controllers](https://github.com/wix/react-native-controllers), but provides a simplified more abstract API over it. This abstract API will be unified with the Android solution which is currently work in progress. It also fully supports redux if you use it.
13
-
14
-<img src="https://github.com/wix/react-native/blob/master/assets/themes/bootstrap-3/images/demo.gif?raw=true" width="240">
7
+App-wide support for 100% native navigation with an easy cross-platform interface.
15
 
8
 
16
 ----
9
 ----
17
 
10
 
22
 
15
 
23
 > The last stable version is `1.30.x` with npm tag `latest`. **This version supports react-native `0.25.1`**. It's installation instructions are [here](https://github.com/wix/react-native-navigation/blob/v1.x.x/README.md#installation---ios).
16
 > The last stable version is `1.30.x` with npm tag `latest`. **This version supports react-native `0.25.1`**. It's installation instructions are [here](https://github.com/wix/react-native-navigation/blob/v1.x.x/README.md#installation---ios).
24
 
17
 
25
->If you don't want your code to break on a daily basis and don't need the new features ASAP please use the `latest` version or just specify a specific version number.
26
-
27
 ## Why use this package
18
 ## Why use this package
28
 
19
 
29
 One of the major things missing from React Native core is fully featured native navigation. Navigation includes the entire skeleton of your app with critical components like nav bars, tab bars and side menu drawers.
20
 One of the major things missing from React Native core is fully featured native navigation. Navigation includes the entire skeleton of your app with critical components like nav bars, tab bars and side menu drawers.

+ 1
- 3
docs/_sidebar.md View File

9
  - [Deep links](/deep-links)
9
  - [Deep links](/deep-links)
10
  - [Android Scpecific Use Cases](/android-specific-use-cases)
10
  - [Android Scpecific Use Cases](/android-specific-use-cases)
11
  - [Third Party Libraries Support](/third-party-libraries-support)
11
  - [Third Party Libraries Support](/third-party-libraries-support)
12
- - [Contributing](/contributing)
13
 
12
 
14
 - Customization
13
 - Customization
15
   - [Styling the Navigator](/styling-the-navigator)
14
   - [Styling the Navigator](/styling-the-navigator)
16
   - [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator)
15
   - [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator)
17
   - [Styling the Tab Bar](/styling-the-tab-bar)
16
   - [Styling the Tab Bar](/styling-the-tab-bar)
18
-
19
-- [Milestones](milestones)
17
+  

+ 9
- 6
docs/android-specific-use-cases.md View File

2
 
2
 
3
 TOC
3
 TOC
4
 * [Activity Lifecycle and onActivityResult](https://github.com/wix/react-native-navigation/wiki/Android#activity-lifecycle-and-onactivityresult)
4
 * [Activity Lifecycle and onActivityResult](https://github.com/wix/react-native-navigation/wiki/Android#activity-lifecycle-and-onactivityresult)
5
-* [Adjusting soft input mode](https://github.com/wix/react-native-navigation/wiki/Android/_edit#adjusting-soft-input-mode)
6
-* [Splash screen](https://github.com/wix/react-native-navigation/wiki/Android/_edit#splash-screen)
7
-* [Collapsing React header](https://github.com/wix/react-native-navigation/wiki/Android/_edit#collapsing-react-header---android-only)
8
-  * [Collapsing react view](https://github.com/wix/react-native-navigation/wiki/Android/_edit#collapsing-react-view)
5
+* [Adjusting soft input mode](https://github.com/wix/react-native-navigation/wiki/Android/#adjusting-soft-input-mode)
6
+* [Splash screen](https://github.com/wix/react-native-navigation/wiki/Android/#splash-screen)
7
+* [Collapsing React header](https://github.com/wix/react-native-navigation/wiki/Android/#collapsing-react-header---android-only)
8
+  * [Collapsing react view](https://github.com/wix/react-native-navigation/wiki/Android/#collapsing-react-view)
9
   * [Collapsing react view with top tabs](https://github.com/wix/react-native-navigation/wiki/Android/_edit#collapsing-react-view-with-top-tabs)
9
   * [Collapsing react view with top tabs](https://github.com/wix/react-native-navigation/wiki/Android/_edit#collapsing-react-view-with-top-tabs)
10
-* [Reloading from terminal](https://github.com/wix/react-native-navigation/wiki/Android/_edit#reloading-from-terminal)
10
+* [Reloading from terminal](https://github.com/wix/react-native-navigation/wiki/Android/#reloading-from-terminal)
11
 
11
 
12
 # Activity Lifecycle and onActivityResult
12
 # Activity Lifecycle and onActivityResult
13
 In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
13
 In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
90
     navBarHideOnScroll: false,
90
     navBarHideOnScroll: false,
91
     navBarBackgroundColor: '#4dbce9', // This will be the TitleBars color when the react view is hidden and collapsed
91
     navBarBackgroundColor: '#4dbce9', // This will be the TitleBars color when the react view is hidden and collapsed
92
     collapsingToolBarComponent: 'example.header',
92
     collapsingToolBarComponent: 'example.header',
93
-    navBarTranslucent: true // Optional, sets a translucent dark background to the TitleBar. Useful when displaying bright colored header to emphasize the title and buttons in the TitleBar
93
+    navBarTranslucent: true, // Optional, sets a translucent dark background to the TitleBar. Useful when displaying bright colored header to emphasize the title and buttons in the TitleBar
94
+    showTitleWhenExpended: false, // default: true. Show the screens title only when the toolbar is collapsed
95
+    collapsingToolBarCollapsedColor: 'green', // optional. The TitleBar (navBar) color in collapsed state
96
+    collapsingToolBarExpendedColor: 'red' // optional. The TitleBar (navBar) color in expended state
94
   };
97
   };
95
 }
98
 }
96
 ```
99
 ```

+ 0
- 5
docs/contributing.md View File

1
-# Contributing
2
-
3
-We are currently working hard on redesigning and refactoring this project with high quality and robustness in mind. As a result, issues and pull requests will take more time to process.
4
-
5
-If you have any question, you're welcome to join our [discord channel](https://discord.gg/DhkZjq2). Please try to use the issues section only for bug reports and suggestions for improvements.

+ 5
- 10
docs/installation-android.md View File

1
 # Android Installation
1
 # Android Installation
2
 
2
 
3
 ### Important
3
 ### Important
4
-The `latest` (stable) version of this framework is `1.x.x` which supports react-native `0.25.1`. It's installation instructions are [here](https://github.com/wix/react-native-navigation/blob/v1.x.x/README.md#installation---android). To use it specify `"react-native-navigation": "latest"` in your package.json dependencies.
5
-
6
-The following instructions are for the `next` version `2.0.0-experimental.x`, which supports react-native `0.37.0`. To use it specify `"react-native-navigation": "next"` in your package.json dependencies. Bear in mind, as the name of the version suggests - this version is experimental and under heavy development, and will break from time to time - thus when using it you should check out these instructions from time to time to avoid breaking your project. 
4
+The following instructions are for the `next` version `2.0.0-experimental.x`, which supports react-native `0.40.0` or higher. To use it specify `"react-native-navigation": "next"` in your package.json dependencies. Bear in mind, as the name of the version suggests - this version is experimental and under heavy development.
7
 
5
 
8
 ----
6
 ----
9
 
7
 
10
-* Make sure you are using react-native version 0.37.0
11
-
12
- >Note: Android adaptation is still under active development therfore the API might break from time to time. 
8
+* Make sure you are using react-native version 0.40.0 or above
13
  
9
  
14
 1.  Add the following to your `settings.gradle` file located in the `android` folder:
10
 1.  Add the following to your `settings.gradle` file located in the `android` folder:
15
 
11
 
19
 	```
15
 	```
20
 	
16
 	
21
 2. Update project dependencies in `build.gradle` under `app` folder.
17
 2. Update project dependencies in `build.gradle` under `app` folder.
22
-
23
 	```groovy
18
 	```groovy
24
 	dependencies {
19
 	dependencies {
25
 	    compile fileTree(dir: "libs", include: ["*.jar"])
20
 	    compile fileTree(dir: "libs", include: ["*.jar"])
26
 	    compile "com.android.support:appcompat-v7:23.0.1"
21
 	    compile "com.android.support:appcompat-v7:23.0.1"
27
 	    compile "com.facebook.react:react-native:+"
22
 	    compile "com.facebook.react:react-native:+"
28
 	    compile project(':react-native-navigation')
23
 	    compile project(':react-native-navigation')
29
-}
24
+	}
25
+	```
30
 
26
 
31
 3. Your `MainActivity` should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`. If you have any `react-native` related methods in your `MainActivity` you can safely delete them.
27
 3. Your `MainActivity` should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`. If you have any `react-native` related methods in your `MainActivity` you can safely delete them.
32
 
28
 
59
 			return BuildConfig.DEBUG;
55
 			return BuildConfig.DEBUG;
60
 		}
56
 		}
61
 
57
 
62
-	    @NonNull
63
 	    @Override
58
 	    @Override
64
 	    public List<ReactPackage> createAdditionalReactPackages() {
59
 	    public List<ReactPackage> createAdditionalReactPackages() {
65
 		    // Add the packages you require here.
60
 		    // Add the packages you require here.
68
 	    }
63
 	    }
69
 	}
64
 	}
70
 	```
65
 	```
71
-6. Run react-native start
66
+6. Run `react-native start`

+ 3
- 5
docs/installation-ios.md View File

1
 # iOS Installation
1
 # iOS Installation
2
 
2
 
3
 ### Important
3
 ### Important
4
-The `latest` (stable) version of this framework is `1.x.x` which supports react-native `0.25.1`. It's installation instructions are [here](https://github.com/wix/react-native-navigation/blob/v1.x.x/README.md#installation---ios). To use it specify `"react-native-navigation": "latest"` in your package.json dependencies.
5
-
6
-The following instructions are for the `next` version `2.0.0-experimental.x`, which supports react-native `0.37.0`. To use it specify `"react-native-navigation": "next"` in your package.json dependencies. Bear in mind, as the name of the version suggests - this version is experimental and under heavy development, and will break from time to time - thus when using it you should check out these instructions from time to time to avoid breaking your project. 
4
+The following instructions are for the `next` version `2.0.0-experimental.x`, which supports react-native `0.40.0` or higher. To use it specify `"react-native-navigation": "next"` in your package.json dependencies. Bear in mind, as the name of the version suggests - this version is experimental and under heavy development.
7
 
5
 
8
 ----
6
 ----
9
 
7
 
10
- * Make sure you are using react-native version 0.37.0
8
+ * Make sure you are using react-native version 0.40.0 or higher
11
 
9
 
12
  * In your project folder run `npm install react-native-navigation@next --save`
10
  * In your project folder run `npm install react-native-navigation@next --save`
13
 > Note: We recommend using npm ver 3+. If you insist on using npm ver 2 please notice that the location for react-native-controllers in node_modules will be under the react-native-navigation folder and you'll need to change the paths in Xcode below accordingly.
11
 > Note: We recommend using npm ver 3+. If you insist on using npm ver 2 please notice that the location for react-native-controllers in node_modules will be under the react-native-navigation folder and you'll need to change the paths in Xcode below accordingly.
20
 
18
 
21
 * In Xcode, under your project files, modify `AppDelegate.m` according to this [example](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m)
19
 * In Xcode, under your project files, modify `AppDelegate.m` according to this [example](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m)
22
 
20
 
23
-* Run react-native start
21
+* Run `react-native start`

+ 0
- 24
docs/milestones.md View File

1
-# Milestones
2
-
3
-### [Version 2.0.0](https://github.com/wix/react-native-navigation/milestone/1)
4
-
5
-> Due by November 30, 2016
6
-
7
-#### The general goals for this version are:
8
-* [react-native-controllers](https://github.com/wix/react-native-controllers) will be deprecated and fully merged into [react-native-navigation](https://github.com/wix/react-native-navigation).
9
-* iOS - Redesign and Refactor
10
-* Android - Redesign and Refactor
11
-* Complete feature parity between Android and iOS
12
-
13
-#### The main feature that we are planning for this version are:
14
-* [Screens lifecycle](https://github.com/wix/react-native-navigation/labels/Screens%20Lifecycle)
15
-* [Pass props and functions](https://github.com/wix/react-native-navigation/labels/Passprops%20%26%20Functions)
16
-* [Dynamic styling](https://github.com/wix/react-native-navigation/labels/Dynamic%20styling)
17
-
18
-
19
-### [Version 2.1.0](https://github.com/wix/react-native-navigation/milestone/2)
20
-
21
-#### The general goals for this version are:
22
-* Android tests
23
-* iOS tests
24
-* Activity results

+ 2
- 2
docs/screen-api.md View File

11
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
11
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
12
   title: undefined, // navigation bar title of the pushed screen (optional)
12
   title: undefined, // navigation bar title of the pushed screen (optional)
13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
14
-  passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
14
+  passProps: {}, // Object that will be passed as props to the pushed screen (optional)
15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
16
   backButtonTitle: undefined, // override the back button title (optional)
16
   backButtonTitle: undefined, // override the back button title (optional)
17
   backButtonHidden: false, // hide the back button altogether (optional)
17
   backButtonHidden: false, // hide the back button altogether (optional)
226
   onNavigatorEvent(event) {
226
   onNavigatorEvent(event) {
227
     switch(event.id) {
227
     switch(event.id) {
228
       case 'willAppear':
228
       case 'willAppear':
229
-	     break;
229
+       break;
230
       case 'didAppear':
230
       case 'didAppear':
231
         break;
231
         break;
232
       case 'willDisappear':
232
       case 'willDisappear':

+ 4
- 1
docs/styling-the-navigator.md View File

46
   collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image. Android only
46
   collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image. Android only
47
   collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color. Android only
47
   collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color. Android only
48
   navBarSubtitleColor: 'red', // subtitle color
48
   navBarSubtitleColor: 'red', // subtitle color
49
-  screenBackgroundColor: 'white' // Default screen color, visible before the actual react view is rendered
49
+  screenBackgroundColor: 'white', // Default screen color, visible before the actual react view is rendered
50
+  orientation: 'portrait' // Sets a specific orientation to a modal and all screens pushed to it. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
51
+  disabledBackGesture: false, // disable the back gesture (swipe gesture) in order to pop the top screen. Default is false. iOS Only
52
+  screenBackgroundImageName: '<name of image in Images.xcassets>', // Optional. default screen background image. iOS only
50
 }
53
 }
51
 ```
54
 ```
52
 
55
 

+ 3
- 0
docs/top-level-api.md View File

47
     tabBarSelectedButtonColor: '#ff9900', // optional, change the color of the selected tab icon and text (only selected)
47
     tabBarSelectedButtonColor: '#ff9900', // optional, change the color of the selected tab icon and text (only selected)
48
     tabBarBackgroundColor: '#551A8B' // optional, change the background color of the tab bar
48
     tabBarBackgroundColor: '#551A8B' // optional, change the background color of the tab bar
49
   },
49
   },
50
+  appStyle: {
51
+    orientation: 'portrait' // Sets a specific orientation to the entire app. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
52
+  },
50
   drawer: { // optional, add this if you want a side menu drawer in your app
53
   drawer: { // optional, add this if you want a side menu drawer in your app
51
     left: { // optional, define if you want a drawer from the left
54
     left: { // optional, define if you want a drawer from the left
52
       screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
55
       screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen

+ 1
- 1
docs/usage.md View File

3
 If you don't like reading, just jump into the fully working example projects:
3
 If you don't like reading, just jump into the fully working example projects:
4
 
4
 
5
 * [example](https://github.com/wix/react-native-navigation/tree/master/example) - Example project showing the best practice use of this package. Shows many navigation features.
5
 * [example](https://github.com/wix/react-native-navigation/tree/master/example) - Example project showing the best practice use of this package. Shows many navigation features.
6
-* [redux-example(**deprecated**)](https://github.com/wix/react-native-navigation/tree/master/old-example-redux) - Best practice use of this package in a [redux](https://github.com/reactjs/redux)-based project.
6
+* [redux-example](https://github.com/wix/react-native-navigation/tree/master/old-example-redux) - (**deprecated** in favor of [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp/tree/feature/similar-movies)) Best practice use of this package in a [redux](https://github.com/reactjs/redux)-based project.
7
 
7
 
8
 > Note: example redux is deprecated. Since we did not have enough time and resources to maintain both example projects, we decided to stop maintaining the redux example. This does not mean redux can't be used with react-native-navigation (In fact, we use redux in the Wix app). For a working example project which uses redux with RNN you can refer to [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp).
8
 > Note: example redux is deprecated. Since we did not have enough time and resources to maintain both example projects, we decided to stop maintaining the redux example. This does not mean redux can't be used with react-native-navigation (In fact, we use redux in the Wix app). For a working example project which uses redux with RNN you can refer to [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp).
9
 
9