Migrate React Native Example app to react-native 0.69 (#4265)

Summary:
// allow-large-files

Pull Request resolved: #4265

Related to #4240

Resolving #3859 led to breaking changes in react-native-flipper which made it incompatible with react-natvie < 0.69.
In this diff we migrate our example app to react-native 0.69 and add a notice to our readme about the react-native 0.69+ requirement

Reviewed By: lblasa

Differential Revision: D40673740

fbshipit-source-id: 18f4742449d115be7a5100f2bc4d834dcebea80f

README.md

@@ -139,6 +139,8 @@ Start up an android emulator and run the following in the project root:
 
 ## React Native SDK + Sample app
 
+> Requires RN 0.69+!
+
 ```bash
 cd react-native/ReactNativeFlipperExample
 yarn

docs/getting-started/react-native.mdx

@@ -30,6 +30,8 @@ To create your own plugins and integrate with Flipper using JavaScript, see the
 
 By default, React Native might ship with an outdated Flipper SDK. To make sure you are using the latest version, determine the latest released version of Flipper by running `npm info flipper`.
 
+Latest version of Flipper requires react-native 0.69+! If you use react-native < 0.69.0, please, downgrade `react-native-flipper` to 0.162.0 (see [this GitHub issue](https://github.com/facebook/flipper/issues/4240) for details).
+
 Android:
 
 1. Bump the `FLIPPER_VERSION` variable in `android/gradle.properties`, for example: `FLIPPER_VERSION=0.171.1`.

react-native/ReactNativeFlipperExample/android/app/build.gradle

@@ -214,9 +214,10 @@ dependencies {
     }
 
     if (enableHermes) {
-        def hermesPath = "../../node_modules/hermes-engine/android/";
-        debugImplementation files(hermesPath + "hermes-debug.aar")
-        releaseImplementation files(hermesPath + "hermes-release.aar")
+        //noinspection GradleDynamicVersion
+        implementation("com.facebook.react:hermes-engine:+") { // From node_modules
+            exclude group:'com.facebook.fbjni'
+        }
     } else {
         implementation jscFlavor
     }

react-native/ReactNativeFlipperExample/android/gradle.properties

@@ -30,4 +30,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.125.0
+FLIPPER_VERSION=0.171.1

react-native/ReactNativeFlipperExample/ios/Podfile

@@ -2,7 +2,7 @@ require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 source 'https://github.com/CocoaPods/Specs'
 
-platform :ios, '11'
+platform :ios, '12.4'
 
 # used for automatic bumping
 flipperkit_version = '0.171.1'
@@ -11,6 +11,8 @@ target 'ReactNativeFlipperExample' do
   config = use_native_modules!
   use_react_native!(
     :path => config["reactNativePath"],
+    # Versions are explicitly pinned to be able to forcefully test against the latest versions
+    :flipper_configuration => FlipperConfiguration.enabled(["Debug"], { 'Flipper' => flipperkit_version, 'Flipper-Folly' => '2.6.10', 'Flipper-DoubleConversion' => '3.2.0', 'Flipper-Glog' => '0.5.0.3', 'Flipper-PeerTalk' => '0.0.4', 'OpenSSL-Universal' => '1.1.1100' }),
     # to enable hermes on iOS, change `false` to `true` and then install pods
     :hermes_enabled => true
   )
@@ -20,15 +22,6 @@ target 'ReactNativeFlipperExample' do
     # Pods for testing
   end
 
-  # Enables Flipper.
-  #
-  # Note that if you have use_frameworks! enabled, Flipper will not work and
-  # you should disable these next few lines.
-
-  # Versions are explicitly pinned to be able to forcefully test against the latest versions.
-  # use_flipper!() should work as well and pick the React Native defaults
-  use_flipper!({ 'Flipper' => flipperkit_version, 'Flipper-Folly' => '2.6.10', 'Flipper-DoubleConversion' => '3.2.0', 'Flipper-Glog' => '0.5.0.3', 'Flipper-PeerTalk' => '0.0.4', 'OpenSSL-Universal' => '1.1.1100' })
-
   post_install do |installer|
     react_native_post_install(installer)
     __apply_Xcode_12_5_M1_post_install_workaround(installer)