diff --git a/docs/getting-started.md b/docs/getting-started.md
index 492ec7925..83028a8fc 100644
--- a/docs/getting-started.md
+++ b/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)_
+
+
+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).
+
+
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.
-
-`android/app/src/main/AndroidManifest.xml`
-
-```xml
-
-```
-
-It's recommended that you add the following activity to the manifest too, which can help diagnose integration issues and other problems:
+It's recommended that you add the following activity to your `AndroidManifest.xml`, which can help diagnose integration issues and other problems:
```xml
+
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).
+
+
`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
- pickFirst '**/libc++_shared.so'
+ // This line is required to prevent a build failure due to duplicate libs
+ 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.
+
+
+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.
+
+
#### 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
- #import
- #import
- #import
- #import
- #import
- #import
- #import
+#if DEBUG
+#ifdef FB_SONARKIT_ENABLED
+#import
+#import
+#import
+#import
+#import
+#import
+#import
+#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
+...
+#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
+ }
+}
+```
+
Lastly, open the Flipper desktop app, and run `yarn ios` in your terminal.
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index ed53fd7c5..2ca32e0fb 100644
--- a/website/static/css/custom.css
+++ b/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'] {