Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ios): add support for react-native-reanimated #1197

Merged
merged 2 commits into from
Nov 29, 2022

Conversation

tido64
Copy link
Member

@tido64 tido64 commented Nov 10, 2022

Description

Added support for injecting code into the React bridge delegate, allowing somewhat safer installation of the Reanimated JSI executor.

Resolves #1195.

Platforms affected

  • Android
  • iOS
  • macOS
  • Windows

Test plan

diff --git a/example/App.js b/example/App.js
index c9cd14d..b3bce70 100644
--- a/example/App.js
+++ b/example/App.js
@@ -10,6 +10,7 @@ import {
   useColorScheme,
   View,
 } from "react-native";
+import Animated from "react-native-reanimated";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 // @ts-expect-error
 import { version as coreVersion } from "react-native/Libraries/Core/ReactNativeVersion";
@@ -179,6 +180,16 @@ const App = ({ concurrentRoot }) => {
         >
           <Header />
           <DevMenu />
+          <Animated.View
+            style={[
+              {
+                width: 100,
+                height: 80,
+                backgroundColor: "orange",
+                margin: 30,
+              },
+            ]}
+          />
           <View style={styles.group}>
             <Feature value={getReactNativeVersion()}>React Native</Feature>
             <Separator />
diff --git a/example/app.json b/example/app.json
index ef69fa7..c492b30 100644
--- a/example/app.json
+++ b/example/app.json
@@ -13,6 +13,9 @@
       "presentationStyle": "modal"
     }
   ],
+  "plugins": [
+    "react-native-test-app/plugins/reanimated.js"
+  ],
   "resources": {
     "android": [
       "dist/res",
diff --git a/example/babel.config.js b/example/babel.config.js
index 5ae49c3..8a4543d 100644
--- a/example/babel.config.js
+++ b/example/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   presets: ["module:metro-react-native-babel-preset"],
+  plugins: ["react-native-reanimated/plugin"],
 };
diff --git a/example/package.json b/example/package.json
index a51d4cf..e2230e2 100644
--- a/example/package.json
+++ b/example/package.json
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
+    "@expo/config-plugins": "^5.0.0",
     "@types/jest": "^27.0.0",
     "@types/react-native": "^0.68.0",
     "jest": "^27.0.0",
@@ -32,6 +33,7 @@
     "react": "17.0.2",
     "react-native": "^0.68.2",
     "react-native-macos": "^0.68.3",
+    "react-native-reanimated": "^2.0",
     "react-native-safe-area-context": "^4.3.4",
     "react-native-test-app": "workspace:.",
     "react-native-windows": "^0.68.8"

@github-actions github-actions bot added platform: iOS This affects iOS platform: macOS This affects macOS labels Nov 10, 2022
plugins/index.js Outdated Show resolved Hide resolved
plugins/index.js Outdated Show resolved Hide resolved
Copy link

@rrebase rrebase left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested it out with a different setup and works well 🙌

plugins/reanimated.js Show resolved Hide resolved
@tido64 tido64 marked this pull request as ready for review November 14, 2022 18:05
Copy link
Member

@kelset kelset left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On one hand, I'm as always impressed by the tricks you can pull out of the hat. Very interesting approach to addressing this - I've tested also locally and it works as expected:
Screenshot 2022-11-29 at 14 54 33

My current concern is that this type of workaround is very much custom per each plugin - do we have any docs on this process? Can we make sure that if this approach is the one we want folks to use (and I mean even other devs implementing support for other plugins) is documented at least partially?

@tido64
Copy link
Member Author

tido64 commented Nov 29, 2022

I will follow up with some docs. I was supposed to document the config-plugins feature, but never got around to it.

@tido64 tido64 merged commit b5c0844 into trunk Nov 29, 2022
@tido64 tido64 deleted the tido/support-reanimated branch November 29, 2022 17:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
platform: iOS This affects iOS platform: macOS This affects macOS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

iOS: Unable to install reanimated
3 participants