[RNMobile] Update gesture handler and reanimated libraries (#39098)

* Bump react-native-gesture-handler to 2.2.0 * Bump react-native-reanimated to 2.4.1 * Update babel config to support reanimated lib * Update Android demo app to support new lib versions * Add patch for react-native-gesture-handler * Add patch for react-native-reanimated Hermes engine has to be manually set because the library is not able to detect it automatically. * Update iOS demo app to support new lib versions - It includes changing the Gutenberg class from NSObject to UIResponder * Add Reanimated library to WPAndroid glue code * Downgrade react-native-reanimated to 2.2.4 The downgrade is necessary in order to prevent a known issue in Reanimated (software-mansion/react-native-reanimated#2719). * Use absolute path for reanimated babel plugin Using the absolute path is required for Reanimated plugin when generating the JS bundle outside Gutenberg, like we do in Gutenberg Mobile. * Update Jest setup to support Reanimated2 * Add google repository to react-native-bridge build This is required to support the react-native-gesture-handler package. * Point dependencies to their forked repository * Update package-lock.json * Remove react-native-reanimated patch * Update react-native-editor Podfile.lock * Update package-lock.json * Silence react-native-gesture-handler warning * Update package-lock.json * Update gesture handler and reanimated package versions * Bump react-native-gesture-handler to 2.2.0-wp-2 * Revert adding google repository to react-native-bridge build * Update react-native-editor changelog * Update Podfile.lock * Bump react-native-gesture-handler to 2.2.0-wp-3 Co-authored-by: Gerardo <gerardo.pacheco@automattic.com>
WordPress · Mar 3, 2022 · a1b11c5 · a1b11c5
1 parent 90a5f28
commit a1b11c5
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...act-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/...act-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -27,6 +27,7 @@
 import com.facebook.react.ReactPackage;
 import com.facebook.react.ReactRootView;
 import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.JSIModulePackage;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
@@ -45,6 +46,7 @@
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 import com.swmansion.reanimated.ReanimatedPackage;
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
@@ -577,6 +579,12 @@ public void sendEventToHost(String eventName, ReadableMap properties) {
                 mRnReactNativeGutenbergBridgePackage);
     }
 
+    protected JSIModulePackage getJSIModulePackage() {
+        // In the future, once we support more JSI modules, we would need to provide our own JSIModulePackage and
+        // include Reanimated.
+        return new ReanimatedJSIModulePackage();
+    }
+
     private MainPackageConfig getMainPackageConfig(ImagePipelineConfig imagePipelineConfig) {
         return new MainPackageConfig.Builder().setFrescoConfig(imagePipelineConfig).build();
     }
@@ -606,6 +614,7 @@ public void onCreateView(Context initContext,
                                     .addPackages(getPackages())
                                     .setUseDeveloperSupport(isDebug)
                                     .setJavaScriptExecutorFactory(new HermesExecutorFactory())
+                                    .setJSIModulesPackage(getJSIModulePackage())
                                     .setInitialLifecycleState(LifecycleState.BEFORE_CREATE);
         if (BuildConfig.SHOULD_ATTACH_JS_BUNDLE) {
             builder.setBundleAssetName("index.android.bundle");

diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -9,7 +9,7 @@ import Aztec
 import RNTAztecView
 
 @objc
-public class Gutenberg: NSObject {
+public class Gutenberg: UIResponder {
     public static func supportedBlocks(isDev: Bool = false) -> [String] {
         guard let json = try? SourceFile.supportedBlocks.getContent() else { return [] }
         let data = Data(json.utf8)

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,10 +10,13 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+
 -   [*] Fix autocorrected Headings applying bold formatting on iOS [#38633]
 
 -   [***] Support for multiple color palettes [#38417]
 
+-   [*] Update gesture handler and reanimated libraries [#39098]
+
 ## 1.71.1
 
 -   [*] Highlight text: Check if style attribute value is defined during filtering [#38670]

diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
@@ -6,6 +6,8 @@
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 import org.wordpress.mobile.WPAndroidGlue.GutenbergProps;
 
@@ -25,6 +27,11 @@ protected String getMainComponentName() {
     @Override
     protected ReactActivityDelegate createReactActivityDelegate() {
         return new ReactActivityDelegate(this, getMainComponentName()) {
+            @Override
+            protected ReactRootView createRootView() {
+                return new RNGestureHandlerEnabledRootView(MainActivity.this);
+            }
+
             @Nullable
             @Override
             protected Bundle getLaunchOptions() {

diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -12,6 +12,7 @@
 import com.facebook.react.ReactApplication;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.JSIModulePackage;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.reactnativecommunity.clipboard.ClipboardPackage;
@@ -37,6 +38,7 @@
 import com.facebook.soloader.SoLoader;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 import com.swmansion.reanimated.ReanimatedPackage;
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
@@ -308,6 +310,11 @@ protected List<ReactPackage> getPackages() {
             protected String getJSMainModuleName() {
                 return "index";
             }
+
+            @Override
+            protected JSIModulePackage getJSIModulePackage() {
+                return new ReanimatedJSIModulePackage();
+            }
         };
     }
 

diff --git a/packages/react-native-editor/babel.config.js b/packages/react-native-editor/babel.config.js
@@ -19,6 +19,10 @@ module.exports = function ( api ) {
 					extensions: [ 'css', 'scss', 'sass' ],
 				},
 			],
+			path.resolve(
+				__dirname,
+				'../../node_modules/react-native-reanimated/plugin'
+			),
 		],
 		overrides: [
 			{
@@ -32,7 +36,7 @@ module.exports = function ( api ) {
 						},
 					],
 				],
-				exclude: /node_modules\/(react-native|@react-native-community|@react-navigation)/,
+				exclude: /node_modules\/(react-native|@react-native-community|@react-navigation|react-native-reanimated)/,
 			},
 			{
 				// Auto-add `import { createElement } from '@wordpress/element';` when JSX is found.
@@ -47,7 +51,7 @@ module.exports = function ( api ) {
 						},
 					],
 				],
-				exclude: /node_modules\/(react-native|@react-native-community|@react-navigation)/,
+				exclude: /node_modules\/(react-native|@react-native-community|@react-navigation|react-native-reanimated)/,
 			},
 		],
 		env: {