Skip to content

Commit 398e620

Browse files
tomekzawtomekzaw
authored
Migrate away from setNativeProps on web (software-mansion#4352)
## Summary This draft PR moves off of `setNativeProps` in favor of editing DOM nodes directly. Closes software-mansion#4335, related to software-mansion#2756. ## Test plan <details> <summary>App.tsx</summary> ```tsx import Animated, { useSharedValue, withTiming, useAnimatedStyle, cancelAnimation, withRepeat, interpolateColor, } from 'react-native-reanimated'; import { View, StyleSheet } from 'react-native'; import React, { useEffect } from 'react'; export default function AnimatedStyleUpdateExample(): React.ReactElement { const randomWidth = useSharedValue(0); useEffect(() => { cancelAnimation(randomWidth); randomWidth.value = withRepeat(withTiming(1), -1, true); }, [randomWidth]); const style = useAnimatedStyle(() => { return { width: randomWidth.value * 100, height: randomWidth.value * 100, backgroundColor: interpolateColor( randomWidth.value, [0, 1], ['red', 'lime'] ), transform: [{ rotate: `${randomWidth.value * 180}deg` }], }; }); return ( <View style={styles.container}> <Animated.View style={style} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ``` </details> https://github.com/software-mansion/react-native-reanimated/assets/20516055/93b8096f-2a4d-4c61-848d-f483d612ac13
1 parent 1143605 commit 398e620

20 files changed

+1294
-771
lines changed

‎Example/ios/Podfile.lock

+2-2
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ PODS:
456456
- React-Core
457457
- RNCPicker (2.4.10):
458458
- React-Core
459-
- RNGestureHandler (2.9.0):
459+
- RNGestureHandler (2.10.0):
460460
- React-Core
461461
- RNReanimated (3.1.0):
462462
- DoubleConversion
@@ -735,7 +735,7 @@ SPEC CHECKSUMS:
735735
RNCAsyncStorage: b90b71f45b8b97be43bc4284e71a6af48ac9f547
736736
RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
737737
RNCPicker: 0bc2f0a29abcca7b7ed44a2d036aac9ab6d25700
738-
RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
738+
RNGestureHandler: e145476da655f3dbc48ef2f0a08cf7a34338c02b
739739
RNReanimated: 6491787e257ea4b74e7f6d7ba98733623a7ddfe3
740740
RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
741741
RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315

‎Example/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"react-dom": "^16.13.1",
2323
"react-native": "0.72.0-rc.1",
2424
"react-native-box2d": "^0.2.5",
25-
"react-native-gesture-handler": "^2.9.0",
25+
"react-native-gesture-handler": "^2.10.0",
2626
"react-native-pager-view": "5.4.24",
2727
"react-native-reanimated": "link:../",
2828
"react-native-safe-area-context": "^4.5.0",

‎Example/yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -5971,10 +5971,10 @@ react-native-box2d@^0.2.5:
59715971
resolved "https://registry.yarnpkg.com/react-native-box2d/-/react-native-box2d-0.2.5.tgz#4baa407d28c3feb956d9a9bc31e8f24eefe5fb79"
59725972
integrity sha512-+Qaf/LMDsodJn3BAIk5hohOb76gXV2krMrWtfENGD+YjRMhO2Du0ylwj1Qu2a8YUTyfd6YB5jmgeU4N27eX3MQ==
59735973

5974-
react-native-gesture-handler@^2.9.0:
5975-
version "2.9.0"
5976-
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241"
5977-
integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==
5974+
react-native-gesture-handler@^2.10.0:
5975+
version "2.10.0"
5976+
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.10.0.tgz#54a1840cccac1dc4d5a48b8dc703eac30f077b3d"
5977+
integrity sha512-vuNupfa8+6MAUMgbZMk5jSxrmqWyNnR/gR77/iuhdx6cPg1z2MJeeJNmqEtKQcF0InvHp45dOoyRK62peqTJ3Q==
59785978
dependencies:
59795979
"@egjs/hammerjs" "^2.0.17"
59805980
hoist-non-react-statics "^3.3.0"

‎FabricExample/ios/Podfile.lock

+3-3
Original file line numberDiff line numberDiff line change
@@ -810,7 +810,7 @@ PODS:
810810
- React-Core
811811
- RNCPicker (2.4.10):
812812
- React-Core
813-
- RNGestureHandler (2.9.0):
813+
- RNGestureHandler (2.10.0):
814814
- RCT-Folly
815815
- RCTRequired
816816
- RCTTypeSafety
@@ -1124,7 +1124,7 @@ SPEC CHECKSUMS:
11241124
React-perflogger: 0c4141a3eba3fe922d53b98900cfeeefe9d78de0
11251125
React-RCTActionSheet: bde19fb7124b692941e772a7c83925bbeddfa0cb
11261126
React-RCTAnimation: 660297e4bfe277d26018518b86eed48adcde649e
1127-
React-RCTAppDelegate: e90d5a71a664ca5edb625a8decf3d0fe59ec7955
1127+
React-RCTAppDelegate: 56e183db3eb1daef07ae80ff61ce3dbe29c6a39d
11281128
React-RCTBlob: f81feafaf9dd1ba5f684d3df9346ac0ddd27417c
11291129
React-RCTFabric: 059f86ed6e263538062b4f9777df755e66ac0cbe
11301130
React-RCTImage: 83edc4014ee8c3087349116da9698dc44fb8564b
@@ -1139,7 +1139,7 @@ SPEC CHECKSUMS:
11391139
RNCAsyncStorage: b90b71f45b8b97be43bc4284e71a6af48ac9f547
11401140
RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
11411141
RNCPicker: 0bc2f0a29abcca7b7ed44a2d036aac9ab6d25700
1142-
RNGestureHandler: 9d2ebd17a9fef618d9720e3d95ff5e6607acf8d4
1142+
RNGestureHandler: 8c8ccd3eb5a8d7b79b79c35635095687845c5534
11431143
RNReanimated: b41e747bc0305d1900d0726b8ec205840a38303a
11441144
RNScreens: 4666ca0a74ee229b2332c5d22d2a8b81ba9202be
11451145
RNSVG: a9204714b832d82b483b0cbaee9e675646426b8d

‎FabricExample/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"react": "18.2.0",
2222
"react-native": "0.72.0-rc.1",
2323
"react-native-box2d": "^0.2.5",
24-
"react-native-gesture-handler": "^2.9.0",
24+
"react-native-gesture-handler": "^2.10.0",
2525
"react-native-pager-view": "5.4.24",
2626
"react-native-reanimated": "link:../",
2727
"react-native-safe-area-context": "^4.5.0",

‎FabricExample/patches/react-native-gesture-handler+2.9.0.patch ‎FabricExample/patches/react-native-gesture-handler+2.10.0.patch

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
diff --git a/node_modules/react-native-gesture-handler/.DS_Store b/node_modules/react-native-gesture-handler/.DS_Store
2-
new file mode 100644
3-
index 0000000..04036a3
4-
Binary files /dev/null and b/node_modules/react-native-gesture-handler/.DS_Store differ
51
diff --git a/node_modules/react-native-gesture-handler/android/build.gradle b/node_modules/react-native-gesture-handler/android/build.gradle
6-
index 20f41ea..d5fe8ec 100644
2+
index e9cebf4..5691c5b 100644
73
--- a/node_modules/react-native-gesture-handler/android/build.gradle
84
+++ b/node_modules/react-native-gesture-handler/android/build.gradle
9-
@@ -160,7 +160,7 @@ android {
5+
@@ -200,7 +200,7 @@ android {
106
var appProject = rootProject.allprojects.find {it.plugins.hasPlugin('com.android.application')}
117
externalNativeBuild {
128
cmake {

‎FabricExample/yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -5647,10 +5647,10 @@ react-native-box2d@^0.2.5:
56475647
resolved "https://registry.yarnpkg.com/react-native-box2d/-/react-native-box2d-0.2.5.tgz#4baa407d28c3feb956d9a9bc31e8f24eefe5fb79"
56485648
integrity sha512-+Qaf/LMDsodJn3BAIk5hohOb76gXV2krMrWtfENGD+YjRMhO2Du0ylwj1Qu2a8YUTyfd6YB5jmgeU4N27eX3MQ==
56495649

5650-
react-native-gesture-handler@^2.9.0:
5651-
version "2.9.0"
5652-
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241"
5653-
integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==
5650+
react-native-gesture-handler@^2.10.0:
5651+
version "2.10.0"
5652+
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.10.0.tgz#54a1840cccac1dc4d5a48b8dc703eac30f077b3d"
5653+
integrity sha512-vuNupfa8+6MAUMgbZMk5jSxrmqWyNnR/gR77/iuhdx6cPg1z2MJeeJNmqEtKQcF0InvHp45dOoyRK62peqTJ3Q==
56545654
dependencies:
56555655
"@egjs/hammerjs" "^2.0.17"
56565656
hoist-non-react-statics "^3.3.0"

‎WebExample/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import App from '../app';
1+
import App from '../app/src/App';
22

33
export default App;

‎WebExample/AppEntry.js

-14
This file was deleted.

‎WebExample/package.json

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "webexample",
33
"version": "1.0.0",
4-
"main": "AppEntry.js",
4+
"main": "node_modules/expo/AppEntry.js",
55
"scripts": {
66
"start": "expo start --web",
77
"start:noplugin": "DISABLE_BABEL_PLUGIN=1 yarn start",
@@ -11,14 +11,15 @@
1111
"dependencies": {
1212
"@expo/webpack-config": "^18.0.0",
1313
"@react-native-community/slider": "^4.4.2",
14-
"expo": "~46.0.13",
14+
"expo": "~48.0.10",
1515
"expo-status-bar": "~1.4.0",
16-
"react": "18.0.0",
17-
"react-dom": "18.0.0",
18-
"react-native": "0.69.6",
19-
"react-native-gesture-handler": "^2.9.0",
16+
"react": "18.2.0",
17+
"react-dom": "18.2.0",
18+
"react-native": "0.71.6",
19+
"react-native-gesture-handler": "^2.10.0",
20+
"react-native-pager-view": "5.4.24",
2021
"react-native-reanimated": "link:../",
21-
"react-native-web": "~0.18.7"
22+
"react-native-web": "~0.18.12"
2223
},
2324
"devDependencies": {
2425
"@babel/core": "^7.12.9",

0 commit comments

Comments
 (0)