Sfoglia il codice sorgente

New Documentation (#819)

* Initial commit

* Initial commit

* Clean-up title
June Domingo 7 anni fa
parent
commit
19cf86874d

+ 0
- 0
docs/.nojekyll Vedi File


+ 1
- 0
docs/CNAME Vedi File

@@ -0,0 +1 @@
1
+rnn-docs.junedomingo.com

+ 34
- 0
docs/README.md Vedi File

@@ -0,0 +1,34 @@
1
+
2
+<h1 align="center">
3
+  <img src="_images/logo.png"/><br>
4
+  React Native Navigation
5
+</h1>
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">
15
+
16
+----
17
+
18
+> ### Important
19
+> 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.
20
+
21
+> To avoid any confusion and breaking existing projects, all continuous development is published under the npm tag `next`, with version `2.0.0-experimental.x`. Once stable, we will publish it as `2.0.0`. **This version supports react-native `0.40.0 and above`**.
22
+
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).
24
+
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
28
+
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.
30
+
31
+If you're trying to deliver a user experience that's on par with the best native apps out there, you simply can't compromise on JS-based components trying to fake the real thing.
32
+
33
+For example, this package replaces the native [NavigatorIOS](https://facebook.github.io/react-native/docs/navigatorios.html) that has been [abandoned](https://facebook.github.io/react-native/docs/navigator-comparison.html) in favor of JS-based solutions that are easier to maintain. For more details see in-depth discussion [here](https://github.com/wix/react-native-controllers#why-do-we-need-this-package).
34
+

BIN
docs/_images/favicon.ico Vedi File


BIN
docs/_images/logo.png Vedi File


+ 1
- 0
docs/_navbar.md Vedi File

@@ -0,0 +1 @@
1
+- [Github](https://github.com/wix/react-native-navigation/)

+ 19
- 0
docs/_sidebar.md Vedi File

@@ -0,0 +1,19 @@
1
+- Getting started
2
+ - [Installation - iOS](/installation-ios)
3
+ - [Installation - Android](/installation-android)
4
+ - [Usage](/usage)
5
+
6
+- Guide
7
+ - [Top Level API](/top-level-api)
8
+ - [Screen API](/screen-api)
9
+ - [Deep links](/deep-links)
10
+ - [Android Scpecific Use Cases](/android-specific-use-cases)
11
+ - [Third Party Libraries Support](/third-party-libraries-support)
12
+ - [Contributing](/contributing)
13
+
14
+- Customization
15
+  - [Styling the Navigator](/styling-the-navigator)
16
+  - [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator)
17
+  - [Styling the Tab Bar](/styling-the-tab-bar)
18
+
19
+- [Milestones](milestones)

+ 145
- 0
docs/adding-buttons-to-the-navigator.md Vedi File

@@ -0,0 +1,145 @@
1
+# Adding buttons to the navigator
2
+
3
+Nav bar buttons can be defined per-screen by adding `static navigatorButtons = {...};` on the screen component definition. This object can also be passed when the screen is originally created; and can be overridden when a screen is pushed. Handle onPress events for the buttons by setting your handler with `navigator.setOnNavigatorEvent(callback)`.
4
+
5
+```js
6
+class FirstTabScreen extends Component {
7
+  static navigatorButtons = {
8
+    rightButtons: [
9
+      {
10
+        title: 'Edit', // for a textual button, provide the button title (label)
11
+        id: 'edit', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
12
+        testID: 'e2e_rules', // optional, used to locate this view in end-to-end tests
13
+        disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
14
+        disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
15
+        showAsAction: 'ifRoom' // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar.
16
+      },
17
+      {
18
+        icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
19
+        id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
20
+      }
21
+    ]
22
+  };
23
+  constructor(props) {
24
+    super(props);
25
+    // if you want to listen on navigator events, set this up
26
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
27
+  }
28
+  onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
29
+    if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
30
+      if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
31
+        AlertIOS.alert('NavBar', 'Edit button pressed');
32
+      }
33
+      if (event.id == 'add') {
34
+        AlertIOS.alert('NavBar', 'Add button pressed');
35
+      }
36
+    }
37
+  }
38
+  render() {
39
+    return (
40
+      <View style={{flex: 1}}>...</View>
41
+     );
42
+  }
43
+```
44
+
45
+#### Buttons object format
46
+
47
+```js
48
+{
49
+  rightButtons: [{ // buttons for the right side of the nav bar (optional)
50
+    title: 'Edit', // if you want a textual button
51
+    icon: require('../../img/navicon_edit.png'), // if you want an image button
52
+    id: 'compose', // id of the button which will pass to your press event handler. See the section bellow for Android specific button ids
53
+    testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
54
+    disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
55
+    disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
56
+  }],
57
+  leftButtons: [] // buttons for the left side of the nav bar (optional)
58
+}
59
+```
60
+
61
+##### Android left button
62
+On Android, only four button types are supported. You can use them by specifying one of the following ids in your left button definition:
63
+
64
+* back
65
+* cancel
66
+* accept
67
+* sideMenu
68
+
69
+> Note: It's currently not possibly to change left button icon on Android.
70
+
71
+#### Floating Action Button (FAB) - Android only
72
+Each screen can contain a single Fab which is displayed at the bottom right corner of the screen.
73
+
74
+* Simple Fab:
75
+```js
76
+  static navigatorButtons = {
77
+    fab: {
78
+      collapsedId: 'share',
79
+      collapsedIcon: require('../../img/ic_share.png'),
80
+      backgroundColor: '#607D8B'
81
+    }
82
+  };
83
+```
84
+
85
+* Fab with expanded state
86
+[Example](https://material-design.storage.googleapis.com/publish/material_v_9/0B8v7jImPsDi-ZmQ0UnFPZmtiSU0/components-buttons-fab-transition_speeddial_02.mp4)
87
+```js
88
+    fab: {
89
+      collapsedId: 'share',
90
+      collapsedIcon: require('../../img/ic_share.png'),
91
+      expendedId: 'clear',
92
+      expendedIcon: require('../../img/ic_clear.png'),
93
+      backgroundColor: '#3F51B5',
94
+      actions: [
95
+        {
96
+          id: 'mail',
97
+          icon: require('../../img/ic_mail.png'),
98
+          backgroundColor: '#03A9F4'
99
+        },
100
+        {
101
+          id: 'twitter',
102
+          icon: require('../../img/ic_twitter.png'),
103
+          backgroundColor: '#4CAF50'
104
+        }
105
+      ]
106
+    }
107
+```
108
+
109
+#### Contextual TopBar Menu - Android only
110
+A contextual menu offers actions that affect a specific item or context frame in the UI. You can provide a context menu for any view, but they are most often used for items in a ListView, GridView, or other view collections in which the user can perform direct actions on each item. (Taken from the [Android documentation](https://developer.android.com/guide/topics/ui/menus.html#context-menu))
111
+
112
+#### showing the contextual menu
113
+
114
+```js
115
+this.props.navigator.showContextualMenu(
116
+  {
117
+    rightButtons: [
118
+      {
119
+        title: 'Add',
120
+        icon: require('../img/add.png')
121
+      },
122
+      {
123
+        title: 'Delete',
124
+        icon: require('../img/delete.png')
125
+      }
126
+    ],
127
+    onButtonPressed: (index) => console.log(`Button ${index} tapped`)
128
+  }
129
+);
130
+```
131
+
132
+##### Hiding the contextual menu
133
+```js
134
+this.props.navigator.dismissContextualMenu();
135
+```
136
+
137
+
138
+To style the `ContextualMenu`, use the following properties in the screen's `navigatorStyle`:
139
+```js
140
+static navigatorStyle = {
141
+  contextualMenuStatusBarColor: '#0092d1',
142
+  contextualMenuBackgroundColor: '#00adf5',
143
+  contextualMenuButtonsColor: '#ffffff'
144
+};
145
+```

+ 140
- 0
docs/android-specific-use-cases.md Vedi File

@@ -0,0 +1,140 @@
1
+# Android Specific Use Cases
2
+
3
+TOC
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)
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)
11
+
12
+# Activity Lifecycle and onActivityResult
13
+In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
14
+
15
+```java
16
+public class MainApplication extends NavigationApplication {
17
+    @Override
18
+    public void onCreate() {
19
+        super.onCreate();
20
+        setActivityCallbacks(new ActivityCallbacks() {
21
+            @Override
22
+            public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
23
+                
24
+            }
25
+
26
+            @Override
27
+            public void onActivityStarted(Activity activity) {
28
+                
29
+            }
30
+
31
+            @Override
32
+            public void onActivityResumed(Activity activity) {
33
+                
34
+            }
35
+
36
+            @Override
37
+            public void onActivityPaused(Activity activity) {
38
+                
39
+            }
40
+
41
+            @Override
42
+            public void onActivityStopped(Activity activity) {
43
+                
44
+            }
45
+
46
+            @Override
47
+            public void onActivityResult(int requestCode, int resultCode, Intent data) {
48
+                
49
+            }
50
+
51
+            @Override
52
+            public void onActivityDestroyed(Activity activity) {
53
+                
54
+            }
55
+        });
56
+    }
57
+}
58
+```
59
+
60
+## Adjusting soft input mode
61
+
62
+```java
63
+public class MyApplication extends NavigationApplication {
64
+    @Override
65
+    public void onCreate() {
66
+        registerActivityLifecycleCallbacks(new LifecycleCallbacks() {
67
+            @Override
68
+            public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
69
+                activity.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
70
+            }
71
+        });
72
+    }
73
+}
74
+```
75
+
76
+## Why overriding these methods in `MainActivity` won't work
77
+`MainActivity` extends `SplashActiviy` which is used to start the react context. Once react is up and running `MainActivity` is **stopped** and another activity takes over to run our app: `NavigationActivity`. Due to this design, there's usually no point in overriding lifecycle callbacks in `MainActivity`.
78
+
79
+# Splash screen
80
+Override `getSplashLayout` or `createSplashLayout` in `MainActivity` to provide a splash layout which will be displayed while Js context initialises.
81
+
82
+# Collapsing React header - Android only
83
+A screen can have a header, either an image or a react component, that collapses as the screen is scrolled.
84
+
85
+## Collapsing react view
86
+
87
+```js
88
+export default class CollapsingReactViewScreen extends Component {
89
+static navigatorStyle = {
90
+    navBarHideOnScroll: false,
91
+    navBarBackgroundColor: '#4dbce9', // This will be the TitleBars color when the react view is hidden and collapsed
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
94
+  };
95
+}
96
+```
97
+
98
+## Collapsing react view with top tabs
99
+
100
+**Note:** `example.header` represents a component that's registered as a screen:
101
+```js
102
+import Header  from './Header';
103
+Navigation.registerComponent('example.header', () => Header);
104
+```
105
+
106
+```js
107
+export default class CollapsingReactViewTopTabsScreen extends Component {
108
+  static navigatorStyle = {
109
+    navBarHideOnScroll: false, // false, since we collapse the TopBar and the TitleBar remains visible with the top tabs
110
+    topBarCollapseOnScroll: true,
111
+    navBarBackgroundColor: '#4dbce9', // This will be the TitleBar's color when the react view is hidden and collapsed
112
+    collapsingToolBarComponent: 'example.header', // id used to register the component
113
+    expendCollapsingToolBarOnTopTabChange: false, // Don't expend the TopBar when selected TopTab changes
114
+    collapsingToolBarCollapsedColor: '#4dbce9' // Optional, use this property with navBarTranslucent: true to animate between translucent and solid color title bar color
115
+  };
116
+}
117
+```
118
+
119
+Specify `topTab` in the screen object you use when starting your app:
120
+
121
+```js
122
+Navigation.startSingleScreenApp({
123
+    screen: {
124
+    screen: 'example.collapsingReactViewTopTabsScreen',
125
+    title: 'Collapsing React TopTabs View',
126
+    topTabs: [
127
+      {
128
+        screenId: 'example.ListScreen',
129
+        icon: require('../img/list.png')
130
+      },
131
+      {
132
+        screenId: 'example.secondTabScreen',
133
+        icon: require('../img/list.png')
134
+      }
135
+    ]
136
+});
137
+```
138
+
139
+# Reloading from terminal
140
+You can easily reload your app from terminal using `adb shell am broadcast -a react.native.RELOAD`. This is particularly useful when debugging on device.

+ 5
- 0
docs/contributing.md Vedi File

@@ -0,0 +1,5 @@
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.

+ 41
- 0
docs/deep-links.md Vedi File

@@ -0,0 +1,41 @@
1
+# Deep Links
2
+
3
+Deep links are strings which represent internal app paths/routes. They commonly appear on push notification payloads to control which section of the app should be displayed when the notification is clicked. For example, in a chat app, clicking on the notification should open the relevant conversation on the "chats" tab.
4
+
5
+Another use-case for deep links is when one screen wants to control what happens in another sibling screen. Normally, a screen can only push/pop from its own stack, it cannot access the navigation stack of a sibling tab for example. Returning to our chat app example, assume that by clicking on a contact in the "contacts" tab we want to open the relevant conversation in the "chats" tab. Since the tabs are siblings, you can achieve this behavior by triggering a deep link:
6
+
7
+```js
8
+onContactSelected(contactID) {
9
+  this.props.navigator.handleDeepLink({
10
+    link: 'chats/' + contactID
11
+  });
12
+}
13
+```
14
+
15
+> Tip: Deep links are also the recommended way to handle side drawer actions. Since the side drawer screen is a sibling to the rest of the app, it can control the other screens by triggering deep links.
16
+
17
+#### Handling deep links
18
+
19
+Every deep link event is broadcasted to all screens. A screen can listen to these events by defining a handler using `setOnNavigatorEvent` (much like listening for button events). Using this handler, the screen can filter links directed to it by parsing the link string and act upon any relevant links found.
20
+
21
+```js
22
+export default class SecondTabScreen extends Component {
23
+  constructor(props) {
24
+    super(props);
25
+    // if you want to listen on navigator events, set this up
26
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
27
+  }
28
+  onNavigatorEvent(event) {
29
+    // handle a deep link
30
+    if (event.type == 'DeepLink') {
31
+      const parts = event.link.split('/');
32
+      if (parts[0] == 'tab2') {
33
+        // handle the link somehow, usually run a this.props.navigator command
34
+      }
35
+    }
36
+  }
37
+```
38
+
39
+#### Deep link string format
40
+
41
+There is no specification for the format of deep links. Since you're implementing the parsing logic in your handlers, you can use any format you wish.

+ 49
- 0
docs/index.html Vedi File

@@ -0,0 +1,49 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+  <meta charset="UTF-8">
5
+  <title>React Native Navigation - truly native navigation for iOS and Android</title>
6
+  <meta name="description" content="React Native Navigation - truly native navigation for iOS and Android">
7
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
8
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
9
+  <link rel="shortcut icon" href="_images/favicon.ico" type="image/x-icon">
10
+  <link rel="icon" href="_images/favicon.ico" type="image/x-icon">
11
+</head>
12
+<body>
13
+  <div id="app">
14
+    <img src="https://raw.githubusercontent.com/wix/react-native-navigation/master/logo.png" alt="react-native-navigation logo">
15
+  </div>
16
+</body>
17
+<script>
18
+  window.$docsify = {
19
+    repo: '',
20
+    name: 'React Native Navigation',
21
+    search: 'auto',
22
+    themeColor: '#21B8F0',
23
+    loadSidebar: true,
24
+    loadNavbar: true,
25
+    maxLevel: 4,
26
+    subMaxLevel: 2,
27
+    auto2top: true,
28
+    ga: 'UA-XXXXX-Y',
29
+    plugins: [
30
+      function (hook) {
31
+        var footer = [
32
+          '<hr/>',
33
+          '<footer class="Test">',
34
+          `<span>Caught a mistake or want to contribute to the documentation? <a href="https://github.com/wix/react-native-navigation/docs" target="_blank">Edit documentation on Github!</a>.</span>`,
35
+          '</footer>'
36
+        ].join('')
37
+
38
+        hook.afterEach(function (html) {
39
+          return html + footer
40
+        })
41
+      }
42
+    ]
43
+  }
44
+</script>
45
+<script src="//unpkg.com/docsify/lib/docsify.js"></script>
46
+<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
47
+<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
48
+<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
49
+</html>

+ 72
- 0
docs/installation-android.md Vedi File

@@ -0,0 +1,72 @@
1
+# Android Installation
2
+
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. 
7
+
8
+----
9
+
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. 
13
+ 
14
+1.  Add the following to your `settings.gradle` file located in the `android` folder:
15
+
16
+	```groovy
17
+	include ':react-native-navigation'
18
+	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
19
+	```
20
+	
21
+2. Update project dependencies in `build.gradle` under `app` folder.
22
+
23
+	```groovy
24
+	dependencies {
25
+	    compile fileTree(dir: "libs", include: ["*.jar"])
26
+	    compile "com.android.support:appcompat-v7:23.0.1"
27
+	    compile "com.facebook.react:react-native:+"
28
+	    compile project(':react-native-navigation')
29
+}
30
+```
31
+
32
+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.
33
+
34
+4. Update the MainApplication file and update the `Application` element in `AndroidManifest.xml`
35
+	
36
+	```java
37
+	import com.reactnativenavigation.NavigationApplication;
38
+	
39
+	public class MainApplication extends NavigationApplication {
40
+	
41
+	}
42
+	```
43
+	
44
+	```xml
45
+	<application
46
+        android:name=".MainApplication"
47
+        ...
48
+        />
49
+	```
50
+5. Implement `isDebug` and `createAdditionalReactPackages` methods
51
+
52
+	```java
53
+	import com.reactnativenavigation.NavigationApplication;
54
+	
55
+	public class MyApplication extends NavigationApplication {
56
+ 
57
+    	@Override
58
+		public boolean isDebug() {
59
+			// Make sure you are using BuildConfig from your own application
60
+			return BuildConfig.DEBUG;
61
+		}
62
+
63
+	    @NonNull
64
+	    @Override
65
+	    public List<ReactPackage> createAdditionalReactPackages() {
66
+		    // Add the packages you require here.
67
+			// No need to add RnnPackage and MainReactPackage
68
+	        return null;
69
+	    }
70
+	}
71
+	```
72
+6. Run react-native start

+ 23
- 0
docs/installation-ios.md Vedi File

@@ -0,0 +1,23 @@
1
+# iOS Installation
2
+
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. 
7
+
8
+----
9
+
10
+ * Make sure you are using react-native version 0.37.0
11
+
12
+ * 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.
14
+
15
+* In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
16
+
17
+* In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
18
+
19
+* In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-navigation/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
20
+
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)
22
+
23
+* Run react-native start

+ 24
- 0
docs/milestones.md Vedi File

@@ -0,0 +1,24 @@
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

+ 239
- 0
docs/screen-api.md Vedi File

@@ -0,0 +1,239 @@
1
+# Screen API
2
+
3
+This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the `navigator` object that is passed to your component through `props`.
4
+
5
+## push(params)
6
+
7
+Push a new screen into this screen's navigation stack.
8
+
9
+```js
10
+this.props.navigator.push({
11
+  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
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)
14
+  passProps: {}, // simple serializable object that will pass as props to the pushed screen (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)
17
+  backButtonHidden: false, // hide the back button altogether (optional)
18
+  navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
19
+  navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
20
+});
21
+```
22
+
23
+## pop(params = {})
24
+
25
+Pop the top screen from this screen's navigation stack.
26
+
27
+```js
28
+this.props.navigator.pop({
29
+  animated: true // does the pop have transition animation or does it happen immediately (optional)
30
+});
31
+```
32
+
33
+## popToRoot(params = {})
34
+
35
+Pop all the screens until the root from this screen's navigation stack.
36
+
37
+```js
38
+this.props.navigator.popToRoot({
39
+  animated: true // does the pop have transition animation or does it happen immediately (optional)
40
+});
41
+```
42
+
43
+## resetTo(params)
44
+
45
+Reset the screen's navigation stack to a new screen (the stack root is changed).
46
+
47
+```js
48
+this.props.navigator.resetTo({
49
+  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
50
+  title: undefined, // navigation bar title of the pushed screen (optional)
51
+  passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
52
+  animated: true, // does the push have transition animation or does it happen immediately (optional)
53
+  navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
54
+  navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
55
+});
56
+```
57
+
58
+## showModal(params = {})
59
+
60
+Show a screen as a modal.
61
+
62
+```js
63
+this.props.navigator.showModal({
64
+  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
65
+  title: "Modal", // title of the screen as appears in the nav bar (optional)
66
+  passProps: {}, // simple serializable object that will pass as props to the modal (optional)
67
+  navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
68
+  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
69
+});
70
+```
71
+
72
+## dismissModal(params = {})
73
+
74
+Dismiss the current modal.
75
+
76
+```js
77
+this.props.navigator.dismissModal({
78
+  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
79
+});
80
+```
81
+
82
+## dismissAllModals(params = {})
83
+
84
+Dismiss all the current modals at the same time.
85
+
86
+```js
87
+this.props.navigator.dismissAllModals({
88
+  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
89
+});
90
+```
91
+
92
+## showLightBox(params = {})
93
+
94
+Show a screen as a lightbox.
95
+
96
+```js
97
+this.props.navigator.showLightBox({
98
+ screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
99
+ passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
100
+ style: {
101
+   backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
102
+   backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
103
+ }
104
+});
105
+```
106
+
107
+## dismissLightBox(params = {})
108
+
109
+Dismiss the current lightbox.
110
+
111
+```js
112
+this.props.navigator.dismissLightBox();
113
+```
114
+
115
+## handleDeepLink(params = {})
116
+
117
+Trigger a deep link within the app. See [deep links](#deep-links) for more details about how screens can listen for deep link events.
118
+
119
+```js
120
+this.props.navigator.handleDeepLink({
121
+  link: "chats/2349823023" // the link string (required)
122
+});
123
+```
124
+
125
+> `handleDeepLink` can also be called statically:
126
+```js
127
+  import {Navigation} from 'react-native-navigation';
128
+  Navigation.handleDeepLink(...);
129
+```
130
+
131
+## setOnNavigatorEvent(callback)
132
+
133
+Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
134
+
135
+```js
136
+// this.onNavigatorEvent will be our handler
137
+this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
138
+```
139
+
140
+## setButtons(params = {})
141
+
142
+Set buttons dynamically on the navigator. If your buttons don't change during runtime, see "Adding buttons to the navigator" below to add them using `static navigatorButtons = {...};`.
143
+
144
+```js
145
+this.props.navigator.setButtons({
146
+  leftButtons: [], // see "Adding buttons to the navigator" below for format (optional)
147
+  rightButtons: [], // see "Adding buttons to the navigator" below for format (optional)
148
+  animated: true // does the change have transition animation or does it happen immediately (optional)
149
+});
150
+```
151
+
152
+## setTitle(params = {})
153
+
154
+Set the nav bar title dynamically. If your title doesn't change during runtime, set it when the screen is defined / pushed.
155
+
156
+```js
157
+this.props.navigator.setTitle({
158
+  title: "Dynamic Title" // the new title of the screen as appears in the nav bar
159
+});
160
+```
161
+
162
+## toggleDrawer(params = {})
163
+
164
+Toggle the side menu drawer assuming you have one in your app.
165
+
166
+```js
167
+this.props.navigator.toggleDrawer({
168
+  side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
169
+  animated: true, // does the toggle have transition animation or does it happen immediately (optional)
170
+  to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
171
+});
172
+```
173
+
174
+## toggleTabs(params = {})
175
+
176
+Toggle whether the tabs are displayed or not (only in tab-based apps).
177
+
178
+```js
179
+this.props.navigator.toggleTabs({
180
+  to: 'hidden', // required, 'hidden' = hide tab bar, 'shown' = show tab bar
181
+  animated: true // does the toggle have transition animation or does it happen immediately (optional)
182
+});
183
+```
184
+
185
+## setTabBadge(params = {})
186
+
187
+Set the badge on a tab (any string or numeric value).
188
+
189
+```js
190
+this.props.navigator.setTabBadge({
191
+  tabIndex: 0, // (optional) if missing, the badge will be added to this screen's tab
192
+  badge: 17 // badge value, null to remove badge
193
+});
194
+```
195
+
196
+## switchToTab(params = {})
197
+
198
+Switch to a tab (sets it as the currently selected tab).
199
+
200
+```js
201
+this.props.navigator.switchToTab({
202
+  tabIndex: 0 // (optional) if missing, this screen's tab will become selected
203
+});
204
+```
205
+
206
+## toggleNavBar(params = {})
207
+
208
+Toggle whether the navigation bar is displayed or not.
209
+
210
+```js
211
+this.props.navigator.toggleNavBar({
212
+  to: 'hidden', // required, 'hidden' = hide navigation bar, 'shown' = show navigation bar
213
+  animated: true // does the toggle have transition animation or does it happen immediately (optional). By default animated: true
214
+});
215
+```
216
+
217
+# Screen Visibility
218
+Listen to screen visibility events in onNavigatorEvent handler:
219
+
220
+```js
221
+export default class ExampleScreen extends Component {
222
+  constructor(props) {
223
+    super(props);
224
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
225
+  }
226
+  onNavigatorEvent(event) {
227
+    switch(event.id) {
228
+      case 'willAppear':
229
+	     break;
230
+      case 'didAppear':
231
+        break;
232
+      case 'willDisappear':
233
+        break;
234
+      case 'didDisappear':
235
+        break;
236
+    }
237
+  }
238
+}
239
+```

+ 55
- 0
docs/styling-the-navigator.md Vedi File

@@ -0,0 +1,55 @@
1
+# Styling the Navigator
2
+
3
+You can style the navigator appearance and behavior by passing a `navigatorStyle` object. This object can be passed when the screen is originally created; can be defined per-screen by setting `static navigatorStyle = {};` on the screen component; and can be overridden when a screen is pushed.
4
+
5
+The easiest way to style your screen is by adding `static navigatorStyle = {};` to your screen React component definition.
6
+
7
+```js
8
+export default class StyledScreen extends Component {
9
+  static navigatorStyle = {
10
+    drawUnderNavBar: true,
11
+    navBarTranslucent: true
12
+  };
13
+  constructor(props) {
14
+    super(props);
15
+  }
16
+  render() {
17
+    return (
18
+      <View style={{flex: 1}}>...</View>
19
+     );
20
+  }
21
+```
22
+
23
+#### Style object format
24
+
25
+```js
26
+{
27
+  navBarTextColor: '#000000', // change the text color of the title (remembered across pushes)
28
+  navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
29
+  navBarButtonColor: '#007aff', // change the button colors of the nav bar (eg. the back button) (remembered across pushes)
30
+  navBarHidden: false, // make the nav bar hidden
31
+  navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
32
+  navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
33
+  navBarTransparent: false, // make the nav bar transparent, works best with drawUnderNavBar:true,
34
+  topBarElevationShadowEnabled: false, // Android only, default: true. Disables TopBar elevation shadow on Lolipop and above
35
+  navBarNoBorder: false, // hide the navigation bar bottom border (hair line). Default false
36
+  drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
37
+  drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
38
+  statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
39
+  navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
40
+  tabBarHidden: false, // make the screen content hide the tab bar (remembered across pushes)
41
+  statusBarHideWithNavBar: false // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
42
+  statusBarHidden: false, // make the status bar hidden regardless of nav bar state
43
+  statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
44
+  statusBarTextColorSchemeSingleScreen: 'light' // same as statusBarTextColorScheme but does NOT remember across pushes
45
+  collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar 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
48
+  navBarSubtitleColor: 'red', // subtitle color
49
+  screenBackgroundColor: 'white' // Default screen color, visible before the actual react view is rendered
50
+}
51
+```
52
+
53
+> Note: If you set any styles related to the Status Bar, make sure that in Xcode > project > Info.plist, the property `View controller-based status bar appearance` is set to `YES`.
54
+
55
+All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-navigation). There's also an example project there showcasing all the different styles.

+ 37
- 0
docs/styling-the-tab-bar.md Vedi File

@@ -0,0 +1,37 @@
1
+# Styling the Tab Bar
2
+
3
+You can style the tab bar appearance by passing a `tabsStyle` object when the app is originally created (on `startTabBasedApp`).
4
+
5
+```js
6
+Navigation.startTabBasedApp({
7
+  tabs: [ ... ],
8
+  tabsStyle: { // optional, **iOS Only** add this if you want to style the tab bar beyond the defaults
9
+    tabBarButtonColor: '#ff0000'
10
+  }
11
+});
12
+```
13
+
14
+#### Style object format
15
+
16
+```js
17
+{
18
+  tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
19
+  tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
20
+  tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
21
+}
22
+```
23
+
24
+> *Note:* On Android, add BottomTabs styles to `AppStyle`:
25
+```js
26
+Navigation.startTabBasedApp({
27
+  tabs: [...],
28
+  appStyle: {
29
+    tabBarBackgroundColor: '#0f2362',
30
+    tabBarButtonColor: '#ffffff',
31
+    tabBarSelectedButtonColor: '#63d7cc'
32
+  },
33
+...
34
+}
35
+```
36
+
37
+All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-tab-bar). There's also an example project there showcasing all the different styles.

+ 8
- 0
docs/third-party-libraries-support.md Vedi File

@@ -0,0 +1,8 @@
1
+# Third Party Libraries Support
2
+
3
+### react-native-vector-icons
4
+
5
+If you would like to use [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) for your Toolbar icons, you can follow [this example](https://github.com/wix/react-native-navigation/issues/43#issuecomment-223907515) or [this](https://gist.github.com/dropfen/4a2209d7274788027f782e8655be198f) gist.
6
+
7
+### Mobx
8
+If you prefer Mobx over Redux, show your interest in this [thread](https://github.com/wix/react-native-navigation/issues/187). Also checkout @mastermoo's [POC](https://github.com/mastermoo/navigation-mobx-example) of using navigation with Mobx.

+ 157
- 0
docs/top-level-api.md Vedi File

@@ -0,0 +1,157 @@
1
+# Top Level API
2
+
3
+### `Navigation`
4
+
5
+```js
6
+import { Navigation } from 'react-native-navigation';
7
+```
8
+
9
+#### `registerComponent(screenID, generator, store = undefined, Provider = undefined)`
10
+
11
+Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component`.
12
+
13
+```js
14
+// not using redux (just ignore the last 2 arguments)
15
+Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
16
+
17
+// using redux, pass your store and the Provider object from react-redux
18
+Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);
19
+```
20
+
21
+#### `startTabBasedApp(params)`
22
+
23
+Change your app root into an app based on several tabs (usually 2-5), a very common pattern in iOS (like Facebook app or the iOS Contacts app). Every tab has its own navigation stack with a native nav bar.
24
+
25
+```js
26
+Navigation.startTabBasedApp({
27
+  tabs: [
28
+    {
29
+      label: 'One', // tab label as appears under the icon in iOS (optional)
30
+      screen: 'example.FirstTabScreen', // unique ID registered with Navigation.registerScreen
31
+      icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
32
+      selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
33
+      title: 'Screen One', // title of the screen as appears in the nav bar (optional)
34
+      navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
35
+      navigatorButtons: {} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
36
+    },
37
+    {
38
+      label: 'Two',
39
+      screen: 'example.SecondTabScreen',
40
+      icon: require('../img/two.png'),
41
+      selectedIcon: require('../img/two_selected.png'),
42
+      title: 'Screen Two'
43
+    }
44
+  ],
45
+  tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
46
+    tabBarButtonColor: '#ffff00', // optional, change the color of the tab icons and text (also unselected)
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
49
+  },
50
+  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
52
+      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
53
+    },
54
+    right: { // optional, define if you want a drawer from the right
55
+      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
56
+    },
57
+    disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
58
+  },
59
+  passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
60
+  animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
61
+});
62
+```
63
+
64
+##### Listening to tab selected events
65
+In order to listen to `bottomTabSelected` event, set an `onNavigatorEventListener` on screens that are pushed to BottomTab. The event is dispatched to the top most screen pushed to the selected tab's stack.
66
+
67
+#### `startSingleScreenApp(params)`
68
+
69
+Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
70
+
71
+```js
72
+Navigation.startSingleScreenApp({
73
+  screen: {
74
+    screen: 'example.WelcomeScreen', // unique ID registered with Navigation.registerScreen
75
+    title: 'Welcome', // title of the screen as appears in the nav bar (optional)
76
+    navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
77
+    navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
78
+  },
79
+  drawer: { // optional, add this if you want a side menu drawer in your app
80
+    left: { // optional, define if you want a drawer from the left
81
+      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
82
+    },
83
+    right: { // optional, define if you want a drawer from the right
84
+      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
85
+    },
86
+    disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
87
+  },
88
+  passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
89
+  animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
90
+});
91
+```
92
+
93
+#### `showModal(params = {})`
94
+
95
+Show a screen as a modal.
96
+
97
+```js
98
+Navigation.showModal({
99
+  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
100
+  title: "Modal", // title of the screen as appears in the nav bar (optional)
101
+  passProps: {}, // simple serializable object that will pass as props to the modal (optional)
102
+  navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
103
+  navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
104
+  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
105
+});
106
+```
107
+
108
+#### `dismissModal(params = {})`
109
+
110
+Dismiss the current modal.
111
+
112
+```js
113
+Navigation.dismissModal({
114
+  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
115
+});
116
+```
117
+
118
+#### `dismissAllModals(params = {})`
119
+
120
+Dismiss all the current modals at the same time.
121
+
122
+```js
123
+Navigation.dismissAllModals({
124
+  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
125
+});
126
+```
127
+
128
+#### `showLightBox(params = {})`
129
+
130
+Show a screen as a lightbox.
131
+
132
+```js
133
+Navigation.showLightBox({
134
+  screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
135
+  passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
136
+  style: {
137
+    backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
138
+    backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
139
+  }
140
+});
141
+```
142
+
143
+#### `dismissLightBox(params = {})`
144
+
145
+Dismiss the current lightbox.
146
+
147
+```js
148
+Navigation.dismissLightBox();
149
+```
150
+
151
+#### `registerScreen(screenID, generator)`
152
+
153
+This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
154
+
155
+```js
156
+Navigation.registerScreen('example.AdvancedScreen', () => AdvancedScreen);
157
+```

+ 72
- 0
docs/usage.md Vedi File

@@ -0,0 +1,72 @@
1
+# Usage 
2
+
3
+If you don't like reading, just jump into the fully working example projects:
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.
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.
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).
9
+
10
+#### Step 1 - Change the way your app starts
11
+
12
+This would normally go in your `index.ios.js`
13
+
14
+```js
15
+import { Navigation } from 'react-native-navigation';
16
+
17
+import { registerScreens } from './screens';
18
+registerScreens(); // this is where you register all of your app's screens
19
+
20
+// start the app
21
+Navigation.startTabBasedApp({
22
+  tabs: [
23
+    {
24
+      label: 'One',
25
+      screen: 'example.FirstTabScreen', // this is a registered name for a screen
26
+      icon: require('../img/one.png'),
27
+      selectedIcon: require('../img/one_selected.png'), // iOS only
28
+      title: 'Screen One'
29
+    },
30
+    {
31
+      label: 'Two',
32
+      screen: 'example.SecondTabScreen',
33
+      icon: require('../img/two.png'),
34
+      selectedIcon: require('../img/two_selected.png'), // iOS only
35
+      title: 'Screen Two'
36
+    }
37
+  ]
38
+});
39
+```
40
+
41
+#### Step 2 - Register all of your screen components
42
+
43
+Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered. We recommend doing this in a central place, like [`screens/index.js`](example/src/screens/index.js).
44
+
45
+> Note: Since your screens will potentially be bundled with other packages, your registered name must be **unique**! Follow a namespacing convention like `packageName.ScreenName`.
46
+
47
+```js
48
+import { Navigation } from 'react-native-navigation';
49
+
50
+import FirstTabScreen from './FirstTabScreen';
51
+import SecondTabScreen from './SecondTabScreen';
52
+import PushedScreen from './PushedScreen';
53
+
54
+// register all screens of the app (including internal ones)
55
+export function registerScreens() {
56
+  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
57
+  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
58
+  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
59
+}
60
+```
61
+
62
+#### Step 3 - That's it
63
+
64
+If you want to do a navigation action like push a new screen over an existing one, take a look at the [Screen API](#screen-api). It would look something like this:
65
+
66
+```js
67
+// this would go inside the Component implementation of one of your screens, like FirstTabScreen.js
68
+this.props.navigator.push({
69
+  screen: 'example.PushedScreen',
70
+  title: 'Pushed Screen'
71
+});
72
+```