Browse Source

update docs (#958)

Guy Carmeli 7 years ago
parent
commit
23819b04bd

+ 1
- 10
docs/README.md View File

@@ -4,14 +4,7 @@
4 4
   React Native Navigation
5 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,8 +15,6 @@ App-wide support for 100% native navigation with an easy cross-platform interfac
22 15
 
23 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 18
 ## Why use this package
28 19
 
29 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,11 +9,9 @@
9 9
  - [Deep links](/deep-links)
10 10
  - [Android Scpecific Use Cases](/android-specific-use-cases)
11 11
  - [Third Party Libraries Support](/third-party-libraries-support)
12
- - [Contributing](/contributing)
13 12
 
14 13
 - Customization
15 14
   - [Styling the Navigator](/styling-the-navigator)
16 15
   - [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator)
17 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,12 +2,12 @@
2 2
 
3 3
 TOC
4 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 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 12
 # Activity Lifecycle and onActivityResult
13 13
 In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
@@ -90,7 +90,10 @@ static navigatorStyle = {
90 90
     navBarHideOnScroll: false,
91 91
     navBarBackgroundColor: '#4dbce9', // This will be the TitleBars color when the react view is hidden and collapsed
92 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,5 +0,0 @@
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,15 +1,11 @@
1 1
 # Android Installation
2 2
 
3 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 10
 1.  Add the following to your `settings.gradle` file located in the `android` folder:
15 11
 
@@ -19,14 +15,14 @@ The following instructions are for the `next` version `2.0.0-experimental.x`, wh
19 15
 	```
20 16
 	
21 17
 2. Update project dependencies in `build.gradle` under `app` folder.
22
-
23 18
 	```groovy
24 19
 	dependencies {
25 20
 	    compile fileTree(dir: "libs", include: ["*.jar"])
26 21
 	    compile "com.android.support:appcompat-v7:23.0.1"
27 22
 	    compile "com.facebook.react:react-native:+"
28 23
 	    compile project(':react-native-navigation')
29
-}
24
+	}
25
+	```
30 26
 
31 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,7 +55,6 @@ The following instructions are for the `next` version `2.0.0-experimental.x`, wh
59 55
 			return BuildConfig.DEBUG;
60 56
 		}
61 57
 
62
-	    @NonNull
63 58
 	    @Override
64 59
 	    public List<ReactPackage> createAdditionalReactPackages() {
65 60
 		    // Add the packages you require here.
@@ -68,4 +63,4 @@ The following instructions are for the `next` version `2.0.0-experimental.x`, wh
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,13 +1,11 @@
1 1
 # iOS Installation
2 2
 
3 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 10
  * In your project folder run `npm install react-native-navigation@next --save`
13 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,4 +18,4 @@ The following instructions are for the `next` version `2.0.0-experimental.x`, wh
20 18
 
21 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,24 +0,0 @@
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,7 +11,7 @@ this.props.navigator.push({
11 11
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
12 12
   title: undefined, // navigation bar title of the pushed screen (optional)
13 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 15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
16 16
   backButtonTitle: undefined, // override the back button title (optional)
17 17
   backButtonHidden: false, // hide the back button altogether (optional)
@@ -226,7 +226,7 @@ export default class ExampleScreen extends Component {
226 226
   onNavigatorEvent(event) {
227 227
     switch(event.id) {
228 228
       case 'willAppear':
229
-	     break;
229
+       break;
230 230
       case 'didAppear':
231 231
         break;
232 232
       case 'willDisappear':

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

@@ -46,7 +46,10 @@ export default class StyledScreen extends Component {
46 46
   collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image. Android only
47 47
   collapsingToolBarCollapsedColor: '#0f2362', // Collapsing Toolbar scrim color. Android only
48 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,6 +47,9 @@ Navigation.startTabBasedApp({
47 47
     tabBarSelectedButtonColor: '#ff9900', // optional, change the color of the selected tab icon and text (only selected)
48 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 53
   drawer: { // optional, add this if you want a side menu drawer in your app
51 54
     left: { // optional, define if you want a drawer from the left
52 55
       screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen

+ 1
- 1
docs/usage.md View File

@@ -3,7 +3,7 @@
3 3
 If you don't like reading, just jump into the fully working example projects:
4 4
 
5 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 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