Refresh Getting Started with the latest React Native integration (#676)

Summary:
Sync the Getting Started section about React Native integration with the latest changes in https://github.com/facebook/react-native/pull/27426.

## Changelog

Refresh Getting Started with the latest React Native integration
Pull Request resolved: https://github.com/facebook/flipper/pull/676

Test Plan: Tested in RN's template.

Reviewed By: mweststrate

Differential Revision: D18853584

Pulled By: passy

fbshipit-source-id: d001046106743b68d2f08b084c7618d8f768dea1

docs/getting-started.md

@@ -323,7 +323,13 @@ Finally, you need to add plugins to your Flipper client. Above we have only adde
 
 _Inspired by [a blog post by Ram N](http://blog.nparashuram.com/2019/09/using-flipper-with-react-native.html)._
 
-_This version of the tutorial is written against React Native 0.61.4. You can find versions of this guide for older versions of React Native [here](https://github.com/facebook/flipper/blob/da25241f7fbb06dffd913958559044d758c54fb8/docs/getting-started.md#setup-your-react-native-app)_
+<div class="warning">
+
+This version of the tutorial is written against **React Native 0.61.5**.
+
+You can find versions of this guide for older versions of React Native [here](https://github.com/facebook/flipper/blob/da25241f7fbb06dffd913958559044d758c54fb8/docs/getting-started.md#setup-your-react-native-app).
+</div>
+
 
 Integrating Flipper with React Native is a bit different than with a native app.
 
@@ -336,15 +342,7 @@ First, add this line to your `android/gradle.properties`:
 FLIPPER_VERSION=0.23.4
 ```
 
-Add the following permissions to your `AndroidManifest.xml`. The SDK needs these to communicate with the desktop app on localhost via adb. It won't make any external internet requests.
+It's recommended that you add the following activity to your `AndroidManifest.xml`, which can help diagnose integration issues and other problems:
-
-`android/app/src/main/AndroidManifest.xml`
-
-```xml
-<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
-```
-
-It's recommended that you add the following activity to the manifest too, which can help diagnose integration issues and other problems:
 
 ```xml
 <activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
@@ -356,8 +354,12 @@ You should also explicitly depend on [`soloader`](https://github.com/facebook/so
 instead of relying on transitive dependency resolution which is getting deprecated
 with Gradle 5.
 
+<div class="warning">
+
 We provide a "no-op" implementation of some oft-used Flipper interfaces you can
-use to make it easier to strip Flipper from your release builds.
+use to make it easier to strip Flipper from your release builds. See instructions in [Setup your Android app](setup-your-android-app).
+
+</div>
 
 `android/app/build.gradle`
 
@@ -365,8 +367,11 @@ use to make it easier to strip Flipper from your release builds.
 android {
   packagingOptions {
     ...
-    // This line is required to prevent React Native from crash
+    // This line is required to prevent a build failure due to duplicate libs
-    pickFirst '**/libc++_shared.so'
+    pickFirst "lib/armeabi-v7a/libc++_shared.so"
+    pickFirst "lib/arm64-v8a/libc++_shared.so"
+    pickFirst "lib/x86/libc++_shared.so"
+    pickFirst "lib/x86_64/libc++_shared.so"
   }
 }
 
@@ -383,7 +388,7 @@ dependencies {
 }
 ```
 
-Now, we create a new file: `android/app/src/debug/java/com/yourappname/ReactNativeFlipper.java`. (Replace the `yourappname` namespace with something appropriate for your project)
+Now, we create a new file: `android/app/src/debug/java/com/yourappname/ReactNativeFlipper.java`. (Replace the `yourappname` namespace with your app name)
 
 These are the suggested plugins integrations:
 
@@ -396,7 +401,7 @@ These are the suggested plugins integrations:
 - React devtools
 
 ```java
-package com.yourappname; // <--- use your own namespace chosen above!
+package com.yourappname; // <--- use your own namespace, same as before!
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;
@@ -476,7 +481,7 @@ initializing SoLoader (for loading the C++ part of Flipper) and starting a `Flip
 For this, we edit the `android/app/src/main/java/com/yourappname/MainApplication.java` file.
 
 ```java
-package com.yourappname;// <--- use your own namespace chosen above!
+package com.yourappname;// <--- use your own namespace, same as before!
 
 import ...
 import com.facebook.react.ReactInstanceManager; // <---- add this import
@@ -503,11 +508,16 @@ In the same file, modify the generated `initializeFlipper` method to
          We use reflection here to pick up the class that initializes Flipper,
         since Flipper library is not available in release mode
         */
-        Class<?> aClass = Class.forName("com.yourappname.ReactNativeFlipper"); // <--- use your own namespace chosen above!
+        Class<?> aClass = Class.forName("com.yourappname.ReactNativeFlipper"); // <--- use your own namespace, same as before!
         aClass.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class).invoke(null, context, reactInstanceManager);
       } catch (ClassNotFoundException e) {
-        /* All catch clauses as generated by RN */
+        e.printStackTrace();
-        ...
+      } catch (NoSuchMethodException e) {
+        e.printStackTrace();
+      } catch (IllegalAccessException e) {
+        e.printStackTrace();
+      } catch (InvocationTargetException e) {
+        e.printStackTrace();
       }
     }
   }
@@ -517,9 +527,13 @@ Finally, open the Flipper desktop app, and run `yarn android` in your terminal.
 
 ### iOS
 
-_Make sure you are using [XCode 10](https://download.developer.apple.com/Developer_Tools/Xcode_10.3/Xcode_10.3.xip). The following guide doesn't work (yet) for XCode 11. Run `sudo xcode-select -s /Applications/Xcode_10.XXX/Contents/Developer/` to select the right xcode version._
+We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism. For CocoaPods 1.7+, follow this configuration.
 
-We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism. For CocoaPods 1.7+ following is the configuration.
+<div class="warning">
+
+If you can't build your app after adding Flipper, you may need to configure the Swift compiler. To do so, adding an empty Swift file in your project is the easiest way.
+
+</div>
 
 #### CocoaPods
 
@@ -532,11 +546,12 @@ We support both Swift and Objective-C for Flipper with CocoaPods as build and di
 platform :ios, '9.0'
 
 def flipper_pods()
-  flipperkit_version = '0.27'
+  flipperkit_version = '0.30.0'
   pod 'FlipperKit', '~>' + flipperkit_version, :configuration => 'Debug'
   pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
   pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
   pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
+  pod 'FlipperKit/FlipperKitReactPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
 end
 
 # Post Install processing for Flipper
@@ -602,14 +617,16 @@ The code below enables the following integrations:
 
 ```objective-c
 ...
-#ifdef DEBUG
+#if DEBUG
-  #import <FlipperKit/FlipperClient.h>
+#ifdef FB_SONARKIT_ENABLED
-  #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+#import <FlipperKit/FlipperClient.h>
-  #import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
+#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
-  #import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
-  #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
-  #import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
-  #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#endif
 #endif
 
 @implementation AppDelegate
@@ -621,19 +638,62 @@ The code below enables the following integrations:
 }
 
 - (void) initializeFlipper:(UIApplication *)application {
-  #ifdef DEBUG
+  #if DEBUG
+  #ifdef FB_SONARKIT_ENABLED
     FlipperClient *client = [FlipperClient sharedClient];
     SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
     [client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application withDescriptorMapper: layoutDescriptorMapper]];
-    [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; [client start];
+    [client addPlugin: [[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
+    [client addPlugin: [FlipperKitReactPlugin new]];
     [client addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
     [client start];
   #endif
+  #endif
 }
 
 @end
 ```
 
+<!--Swift-->
+
+```swift
+...
+#if DEBUG
+#if FB_SONARKIT_ENABLED
+import FlipperKit
+#endif
+#endif
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+  func application(
+      _ application: UIApplication,
+      didFinishLaunchingWithOptions
+      launchOptions: [UIApplication.LaunchOptionsKey: Any]?
+    ) -> Bool {
+    initializeFlipper(with: application)
+    ...
+  }
+
+  private func initializeFlipper(with application: UIApplication) {
+    #if DEBUG
+    #if FB_SONARKIT_ENABLED
+      let client = FlipperClient.shared()
+      let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
+      FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
+      client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
+      client?.add(FKUserDefaultsPlugin(suiteName: nil))
+      client?.add(FlipperKitReactPlugin())
+      client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
+      client?.add(FlipperReactPerformancePlugin.sharedInstance())
+      client?.start()
+    #endif
+    #endif
+  }
+}
+```
+
 <!--END_DOCUSAURUS_CODE_TABS-->
 
 Lastly, open the Flipper desktop app, and run `yarn ios` in your terminal.

website/static/css/custom.css

@@ -458,6 +458,11 @@ footer iframe {
   background-color: rgb(253, 245, 212);
   border-left: 4px solid rgb(241, 196, 15);
   padding: 12px;
+  margin-bottom: 16px;
+}
+
+.warning *:last-child {
+  margin-bottom: 0px;
 }
 
 .navListItem a[href='/docs/features/index.html'] {