Simplify getting started

satya164 · satya164 · commit 63e54d5168f8 · 2019-09-02T00:30:49.000+02:00
diff --git a/docs/deep-linking.md b/docs/deep-linking.md
@@ -70,10 +70,9 @@ First, you will want to specify a url scheme for your app. This corresponds to t
 }
 ```
 
-
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 import * as Expo from 'expo';
@@ -91,10 +90,10 @@ The reason that is necessary to use `Expo.Linking.makeUrl` is that the scheme wi
 
 To test the URI on the simulator in the Expo client app, run the following:
 
-```
+```sh
 xcrun simctl openurl booted [ put your URI prefix in here ]
 
-// for example
+# for example
 
 xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/Eric
 ```
@@ -103,10 +102,10 @@ xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/Eric
 
 To test the intent handling in Android (Expo client app ), run the following:
 
-```
+```sh
 adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp
 
-// for example
+# for example
 
 adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/chat/Eric" com.simpleapp
 ```
@@ -117,7 +116,7 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = createAppContainer(createStackNavigator({...}));
@@ -133,7 +132,7 @@ Let's configure the native iOS app to open based on the `mychat://` URI scheme.
 
 In `SimpleApp/ios/SimpleApp/AppDelegate.m`:
 
-```
+```objc
 // Add the header at the top of the file:
 #import <React/RCTLinkingManager.h>
 
@@ -158,7 +157,7 @@ react-native run-ios
 
 To test the URI on the simulator, run the following:
 
-```
+```sh
 xcrun simctl openurl booted mychat://chat/Eric
 ```
 
@@ -172,7 +171,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
 1. Set `launchMode` of `MainActivity` to `singleTask` in order to receive intent on existing `MainActivity`. It is useful if you want to perform navigation using deep link you have been registered - [details](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters)
 2. Add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:
 
-```
+```xml
 <activity
     android:name=".MainActivity"
     android:launchMode="singleTask">
@@ -184,7 +183,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
-        <data android:scheme="mychat" />            
+        <data android:scheme="mychat" />
     </intent-filter>
 </activity>
 ```
@@ -197,10 +196,22 @@ react-native run-android
 
 To test the intent handling in Android, run the following:
 
-```
+```sh
 adb shell am start -W -a android.intent.action.VIEW -d "mychat://chat/Eric" com.simpleapp
 ```
 
+## Hybrid iOS Applications (Skip for RN only projects)
+
+If you're using React Navigation within a hybrid app - an iOS app that has both Swift/ObjC and React Native parts - you may be missing the `RCTLinkingIOS` subspec in your Podfile, which is installed by default in new RN projects. To add this, ensure your Podfile looks like the following:
+
+```pod
+ pod 'React', :path => '../node_modules/react-native', :subspecs => [
+    . . . // other subspecs
+    'RCTLinkingIOS',
+    . . .
+  ]
+```
+
 ## Disable deep linking
 
 In case you want to handle routing with deep-linking by yourself instead of `react-navigation`, you can pass `enableURLHandling={false}` prop to your app container:
diff --git a/website/versioned_docs/version-4.x/drawer-navigator.md b/website/versioned_docs/version-4.x/drawer-navigator.md
@@ -50,7 +50,38 @@ Next, we need to link these libraries. The steps depends on your React Native ve
   react-native link react-native-gesture-handler
   ```
 
-**IMPORTANT:** There are additional steps required for `react-native-gesture-handler` on Android after linking (for all React Native versions). Check the [this guide](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to complete the installation.
+To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary 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);
++      }
++    };
++  }
+}
+```
+
+Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
+
+## API Definition
 
 Then import it from `react-navigation-drawer`:
 
diff --git a/website/versioned_docs/version-4.x/getting-started.md b/website/versioned_docs/version-4.x/getting-started.md
@@ -25,86 +25,6 @@ yarn add react-navigation
 # npm install react-navigation
 ```
 
-Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated).
+When you use a navigator, you'll need to follow the installation instructions of that navigator for any additional configuration.
 
-If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
-
-```sh
-expo install react-native-gesture-handler react-native-reanimated
-```
-
-If you are not using Expo, run the following:
-
-```sh
-yarn add react-native-reanimated react-native-gesture-handler
-```
-
-If you are using Expo, you are done. Otherwise, continue to the next steps.
-
-Next, we need to link these libraries. The steps depends on your React Native version:
-
-- **React Native 0.60 and higher**
-
-  On newer versions of React Native, [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).
-
-  To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
-
-  ```sh
-  cd ios
-  pod install
-  cd ..
-  ```
-
-- **React Native 0.59 and lower**
-
-  If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
-
-  ```sh
-  react-native link react-native-reanimated
-  react-native link react-native-gesture-handler
-  ```
-
-To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary 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);
-+      }
-+    };
-+  }
-}
-```
-
-Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
-
-## Hybrid iOS Applications (Skip for RN only projects)
-
-If you're using React Navigation within a hybrid app - an iOS app that has both Swift/ObjC and React Native parts - you may be missing the `RCTLinkingIOS` subspec in your Podfile, which is installed by default in new RN projects. To add this, ensure your Podfile looks like the following:
-
-```
- pod 'React', :path => '../node_modules/react-native', :subspecs => [
-    . . . // other subspecs
-    'RCTLinkingIOS',
-    . . .
-  ]
-```
-
-You're good to go! Continue to ["Hello React Navigation"](hello-react-navigation.html) to start writing some code.
+Continue to ["Hello React Navigation"](hello-react-navigation.html) to start writing some code.
diff --git a/website/versioned_docs/version-4.x/material-top-tab-navigator.md b/website/versioned_docs/version-4.x/material-top-tab-navigator.md
@@ -52,7 +52,38 @@ Next, we need to link these libraries. The steps depends on your React Native ve
   react-native link react-native-gesture-handler
   ```
 
-**IMPORTANT:** There are additional steps required for `react-native-gesture-handler` on Android after linking (for all React Native versions). Check the [this guide](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to complete the installation.
+To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary 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);
++      }
++    };
++  }
+}
+```
+
+Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
+
+## API Definition
 
 To use this tab navigator, import it from `react-navigation-tabs`:
 
diff --git a/website/versioned_docs/version-4.x/stack-navigator-2.0.md b/website/versioned_docs/version-4.x/stack-navigator-2.0.md
@@ -56,7 +56,36 @@ Next, we need to link these libraries. The steps depends on your React Native ve
   react-native link react-native-gesture-handler
   ```
 
-**IMPORTANT:** There are additional steps required for `react-native-gesture-handler` on Android after linking (for all React Native versions). Check the [this guide](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to complete the installation.
+To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary 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);
++      }
++    };
++  }
+}
+```
+
+Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
 
 ## API Definition
 
diff --git a/website/versioned_docs/version-4.x/stack-navigator.md b/website/versioned_docs/version-4.x/stack-navigator.md
@@ -53,7 +53,36 @@ Next, we need to link these libraries. The steps depends on your React Native ve
   react-native link react-native-gesture-handler
   ```
 
-**IMPORTANT:** There are additional steps required for `react-native-gesture-handler` on Android after linking (for all React Native versions). Check the [this guide](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to complete the installation.
+To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary 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);
++      }
++    };
++  }
+}
+```
+
+Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
 
 ## API Definition
 
