From 85f69595861c906f86fb603664cbccddbf0d627e Mon Sep 17 00:00:00 2001 From: titusefferian Date: Fri, 6 Dec 2019 22:00:41 +0700 Subject: [PATCH 1/3] catch up with react navigation 4 integration --- .../versioned_docs/version-0.5/navigation.md | 70 ++++++++++++++++++- 1 file changed, 67 insertions(+), 3 deletions(-) diff --git a/website/versioned_docs/version-0.5/navigation.md b/website/versioned_docs/version-0.5/navigation.md index 7db110597c1..1dde64d595e 100644 --- a/website/versioned_docs/version-0.5/navigation.md +++ b/website/versioned_docs/version-0.5/navigation.md @@ -12,15 +12,17 @@ If you'd like to achieve a native look and feel on both Android and iOS, or you' ## React Navigation -The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code. +The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code. Assuming you are on the latest react-native version. The first step is to install in your project: ``` -npm install --save react-navigation +yarn add react-navigation +# or with npm +# npm install react-navigation ``` -The second step is to install react-native-gesture-handler +The second step is to install additional dependencies such as `react-native-gesture-handler`, `react-native-reanimated`, and `react-native-screens`: ``` yarn add react-native-gesture-handler @@ -28,6 +30,68 @@ yarn add react-native-gesture-handler # npm install --save react-native-gesture-handler ``` +``` +yarn add react-native-reanimated +# or with npm +# npm install --save react-native-reanimated +``` + +``` +yarn add react-native-screens +# or with npm +# npm install --save react-native-screens +``` + +To complete your installation on **iOS**, make sure you have [Cocoapods](https://cocoapods.org/). Then run: + +``` +cd ios +pod install +cd .. +``` + +To Complete your installation on **Android**. Add the following two lines to dependencies section in `android/app/build.gradle`: + +``` +implementation 'androidx.appcompat:appcompat:1.1.0-rc01' +implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' +``` + +And make the following modifications to `MainActivity.java`: + +```diff +package com.reactnavigation.example; + +import com.facebook.react.ReactActivity; ++ import com.facebook.react.ReactActivityDelegate; ++ import com.facebook.react.ReactRootView; ++ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; + +public class MainActivity extends ReactActivity { + + @Override + protected String getMainComponentName() { + return "Example"; + } + ++ @Override ++ protected ReactActivityDelegate createReactActivityDelegate() { ++ return new ReactActivityDelegate(this, getMainComponentName()) { ++ @Override ++ protected ReactRootView createRootView() { ++ return new RNGestureHandlerEnabledRootView(MainActivity.this); ++ } ++ }; ++ } +} +``` + +Then add the following at the top of your entry file, such as `index.js` or `App.js`: + +``` +import 'react-native-gesture-handler' +``` + The third step is to install react-navigation-stack ``` From 571f5ed1056eccac556a608256363587d9993674 Mon Sep 17 00:00:00 2001 From: Titus Efferian Date: Mon, 2 Mar 2020 13:46:14 +0700 Subject: [PATCH 2/3] join dependencies into one step installation --- .../versioned_docs/version-0.5/navigation.md | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/website/versioned_docs/version-0.5/navigation.md b/website/versioned_docs/version-0.5/navigation.md index 1dde64d595e..4fdec9fa91f 100644 --- a/website/versioned_docs/version-0.5/navigation.md +++ b/website/versioned_docs/version-0.5/navigation.md @@ -22,24 +22,10 @@ yarn add react-navigation # npm install react-navigation ``` -The second step is to install additional dependencies such as `react-native-gesture-handler`, `react-native-reanimated`, and `react-native-screens`: +The second step is to install additional dependencies such as `react-native-gesture-handler`, `react-native-reanimated`, `react-native-screens`, `react-native-safe-area-context`, and `@react-native-community/masked-view`: ``` -yarn add react-native-gesture-handler -# or with npm -# npm install --save react-native-gesture-handler -``` - -``` -yarn add react-native-reanimated -# or with npm -# npm install --save react-native-reanimated -``` - -``` -yarn add react-native-screens -# or with npm -# npm install --save react-native-screens +npm install --save react-navigation react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view ``` To complete your installation on **iOS**, make sure you have [Cocoapods](https://cocoapods.org/). Then run: From 8a25db7d4468a4a82a24348d15d20ff2eeb3c1b2 Mon Sep 17 00:00:00 2001 From: Titus Efferian Date: Mon, 2 Mar 2020 13:51:50 +0700 Subject: [PATCH 3/3] undo misphrase word --- website/versioned_docs/version-0.5/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-0.5/navigation.md b/website/versioned_docs/version-0.5/navigation.md index 4fdec9fa91f..62e45a07530 100644 --- a/website/versioned_docs/version-0.5/navigation.md +++ b/website/versioned_docs/version-0.5/navigation.md @@ -12,7 +12,7 @@ If you'd like to achieve a native look and feel on both Android and iOS, or you' ## React Navigation -The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code. Assuming you are on the latest react-native version. +The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code. The first step is to install in your project: