Skip to content

Commit

Permalink
Added v2 docs (#1795)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Johan-dutoit @DanielZlotin
Johan-dutoit authored and DanielZlotin committed Sep 5, 2017
1 parent ed3338c commit a147509
Show file tree
Hide file tree
Showing 7 changed files with 416 additions and 256 deletions.
258 changes: 2 additions & 256 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ We are rebuilding react-native-navigation

- [Why?](#why-rebuild-react-native-navigation)
- [Where is it standing now?](#current-status)
- [Getting Started](#getting-started-with-v2)
- [Usage](#usage)
- [Documentation](https://wix.github.io/react-native-navigation/v2/)
- [Contributing](CONTRIBUTING.md)

## Why Rebuild react-native-navigation?
Expand Down Expand Up @@ -109,257 +108,4 @@ Note: v1 properties with names beginning with 'navBar' are replaced in v2 with
| splitViewScreen | :x: | [Contribute](CONTRIBUTING.md) | [Contribute](CONTRIBUTING.md)|


Element tranisitions, adding buttons and styles are not yet implemented. [Contribute](CONTRIBUTING.md)

## Getting started with v2
If v2 supports everything you need for your app we encourage you to use it.

### Installation
1. Download react-native-navigation v2
```bash
npm install --save react-native-navigation@alpha
```
##### iOS
2. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))

3. 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))

4. 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/lib/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))

5. In Xcode, under your project files, modify `AppDelegate.m`. add:

`#import <ReactNativeNavigation/ReactNativeNavigation.h>`

remove everything in the method didFinishLaunchingWithOptions and add:

```
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
```

##### Android
2. Add the following in `android/settings.gradle`.

```groovy
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
```

3. Update project dependencies in `android/app/build.gradle`.
```groovy
android {
compileSdkVersion 25
buildToolsVersion "25.0.1"
...
}

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+"
compile project(':react-native-navigation')
}
```

4. In `MainActivity.java` it should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.

This file can be located in `android/app/src/main/java/com/yourproject/`.

```java
import com.reactnativenavigation.NavigationActivity;

public class MainActivity extends NavigationActivity {

}
```

If you have any **react-native** related methods, you can safely delete them.

5. In `MainApplication.java`, add the following
```java
import com.reactnativenavigation.NavigationApplication;

public class MainApplication extends NavigationApplication {

@Override
public boolean isDebug() {
// Make sure you are using BuildConfig from your own application
return BuildConfig.DEBUG;
}

protected List<ReactPackage> getPackages() {
// Add additional packages you require here
// No need to add RnnPackage and MainReactPackage
return Arrays.<ReactPackage>asList(
// eg. new VectorIconsPackage()
);
}
}
```

Make sure that `isDebug` methods is implemented.

6. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
```xml
<application
android:name=".MainApplication"
...
/>
## Usage
### Top Screen API

#### Navigation
```js
import Navigation from 'react-native-navigation';
```
#### Events - On App Launched
How to initiate your app.

```js
Navigation.events().onAppLaunched(() => {
Navigation.setRoot({
container: {
name: 'navigation.playground.WelcomeScreen'
}
});
});
```

#### registerContainer(screenID, generator)
Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
```js
Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
```

#### setRoot({params})
Start a Single page app with two side menus:
```js
Navigation.setRoot({
container: {
name: 'navigation.playground.WelcomeScreen'
},
sideMenu: {
left: {
container: {
name: 'navigation.playground.TextScreen',
passProps: {
text: 'This is a left side menu screen'
}
}
},
right: {
container: {
name: 'navigation.playground.TextScreen',
passProps: {
text: 'This is a right side menu screen'
}
}
}
}
});
```
Start a tab based app:
```js
Navigation.setRoot({
tabs: [
{
container: {
name: 'navigation.playground.TextScreen',
passProps: {
text: 'This is tab 1',
myFunction: () => 'Hello from a function!'
}
}
},
{
container: {
name: 'navigation.playground.TextScreen',
passProps: {
text: 'This is tab 2'
}
}
}
]
});
```
### Screen API

#### push(params)
Push a new screen into this screen's navigation stack.
```js
Navigation.push(this.props.containerId, {
name: 'navigation.playground.PushedScreen',
passProps: {}
});
```
#### pop(containerId)
Pop the top screen from this screen's navigation stack.
```js
Navigation.pop(this.props.containerId);
```
#### popTo(params)
```js
Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
```
#### popToRoot()
Pop all the screens until the root from this screen's navigation stack
```js
Navigation.popToRoot(this.props.containerId);
```
#### showModal(params = {})
Show a screen as a modal.
```js
Navigation.showModal({
container: {
name: 'navigation.playground.ModalScreen',
passProps: {
key: 'value'
}
}
});
```
#### dismissModal(containerId)
Dismiss modal.
```js
Navigation.dismissModal(this.props.containerId);
```
#### dismissAllModals()
Dismiss all the current modals at the same time.
```js
Navigation.dismissAllModals();
```
#### Screen Lifecycle - didDisappear() and didAppear()

The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:

```js
class LifecycleScreen extends Component {
constructor(props) {
super(props);
this.state = {
text: 'nothing yet'
};
}

didAppear() {
this.setState({ text: 'didAppear' });
}

didDisappear() {
alert('didDisappear');
}

componentWillUnmount() {
alert('componentWillUnmount');
}

render() {
return (
<View style={styles.root}>
<Text style={styles.h1}>{`Lifecycle Screen`}</Text>
<Text style={styles.h1}>{this.state.text}</Text>
</View>
);
}
}
```
Element tranisitions, adding buttons and styles are not yet implemented. [Contribute](CONTRIBUTING.md)
16 changes: 16 additions & 0 deletions docs/_sidebar.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@
- Getting started
- [Installation - iOS](/installation-ios)
- [Installation - Android](/installation-android)
- [Usage](/usage)
<!--
- Guide
- [Top Level API](/top-level-api)
- [Screen API](/screen-api)
- [Deep links](/deep-links)
- [Android Specific Use Cases](/android-specific-use-cases)
- [Third Party Libraries Support](/third-party-libraries-support)
- Customization
- [Styling the Navigator](/styling-the-navigator)
- [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator)
- [Styling the Tab Bar](/styling-the-tab-bar)
-->
56 changes: 56 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Native Navigation - truly native navigation for iOS and Android</title>
<meta name="description" content="React Native Navigation - truly native navigation for iOS and Android">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="shortcut icon" href="_images/favicon.ico" type="image/x-icon">
<link rel="icon" href="_images/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="app">
<img src="https://raw.githubusercontent.com/wix/react-native-navigation/master/logo.png"
alt="react-native-navigation logo">
</div>
</body>
<script>
window.$docsify = {
repo: '',
name: 'React Native Navigation',
search: 'auto',
themeColor: '#21B8F0',
loadSidebar: true,
loadNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
auto2top: true,
ga: 'UA-XXXXX-Y',
plugins: [
function (hook) {
var footer = [
'<hr/>',
'<footer class="Test">',
`<span>Caught a mistake or want to contribute to the documentation? <a href="https://github.com/wix/react-native-navigation/tree/v2/docs" target="_blank">Edit documentation on Github!</a>.</span>`,
'</footer>'
].join('');

hook.afterEach(function (html) {
return html + footer;
});
}
]
};
</script>
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('sw.js')
}
</script>
</html>
Loading

0 comments on commit a147509

Please sign in to comment.