fix: ensure last[propName] is defined in style updater #7485
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Merged
via the queue into
software-mansion:main
with commit May 9, 2025
bdadece
9 of 10 checks passed
tjzel
added a commit
that referenced
this pull request
May 9, 2025
refactor(Worklets): jsiWorkletsModuleProxy + ios feat(Worklets): runOnUIAsync (#7469) This PR adds a `runOnUIAsync` function. A function that schedules a worklet on the UI Runtime, to be executed on the UI thread. It returns a Promise of the worklet's return value. The Promise is resolved asynchronously, not immediately after the callback execution. Example usage : ```js import { runOnUIAsync } from 'react-native-worklets'; // RN Runtime, JS thread const result: Promise<number> = runOnUIAsync((): number => { return 42; }); await result; // 42 ``` `runOnUIAsync` example : <video src="https://github.com/user-attachments/assets/8c72548d-6d41-43d6-809c-3f27f13d664f" /> fix: ensure last[propName] is defined in style updater (#7485) <!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> Ensure that `last[propName]` is initialised to fix an exception on web. This bug was introduced by changes in #6749. I noticed this issue after upgrading to the latest version of react-native-reanimated. In my case, the library was trying to index `last['transform']` which didn't exist for whatever reason. <img width="573" alt="Screenshot 2025-05-08 at 16 23 04" src="https://github.com/user-attachments/assets/1262b09a-600d-4ffb-8aa2-a02d8bc9e97e" /> <img width="676" alt="Screenshot 2025-05-08 at 16 24 29" src="https://github.com/user-attachments/assets/d17ccde5-744f-4e57-b6cd-4100a88acdae" /> feat(CI): monorepo static checks (#7484) QoL CI since now we keep some scripts etc. in the root. I also fixed problems found by `yarn lint` and `yarn format` and added necessary configs. 🪨 refactor(Worklets)(makeShareableClone): add makeShareableString (#7481) The first in a series of PRs that are intended to refactor the logic of the `makeShareableClone` function. The current implementation does not have a single source of truth, as we have two type checking logics for the passed value, one on the `JS` side and one on the `Cpp` side. The idea of the refactor is to implement one source of truth on the `JS` side and call the corresponding method on the `Cpp` side e.g: ```js if (typeof value === ‘string’) { return global._makeShareableString(value); } ``` In addition, in this PR I have rewritten the `Shareables` example to make it more readable and easier to use. `Shareables` example <video src="https://github.com/user-attachments/assets/5d61009d-e31b-44fc-b4fd-c21a8c417612" /> chore: fix linting
github-merge-queue bot
pushed a commit
that referenced
this pull request
May 20, 2025
## Summary After interal conversation with @piaskowyk we decided to move this check inside the for loop. It modifies code from #7485, and ensures the initial state is guaranteed and guarded. ## Test plan <details> <summary>Both, commented and no, styles should work</summary> ```tsx import { transform } from "@babel/core"; import { MotiView } from "moti"; import { useState } from "react"; import { Button, StyleSheet, View } from "react-native"; import Animated, {withSpring,useAnimatedStyle} from "react-native-reanimated"; export default function App() { const [doAnimate, setDoAnimate] = useState(false); const handlePress = () => setDoAnimate(prev => !prev); const animatedStylez = useAnimatedStyle(() => { return ( { transform: [{translateX: doAnimate ? withSpring(100) : 0}], } ) }) // return ( // <View style={styles.container}> // <MotiView // style={styles.box} // animate={{ // backgroundColor: "red", // translateX: doAnimate ? 100 : undefined, // }} // /> // <Button title="move" onPress={handlePress} /> // </View> // ); return ( <View style={styles.container}> <Animated.View style={[styles.box, animatedStylez]}/> <Button title="move" onPress={handlePress} /> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "column", alignItems: "center", }, box: { width: 50, height: 50, margin: 10, borderRadius: 15, borderWidth: 2, backgroundColor: "#b58df1", }, }); ``` </details>
patrycjakalinska
added a commit
that referenced
this pull request
May 20, 2025
## Summary After interal conversation with @piaskowyk we decided to move this check inside the for loop. It modifies code from #7485, and ensures the initial state is guaranteed and guarded. ## Test plan <details> <summary>Both, commented and no, styles should work</summary> ```tsx import { transform } from "@babel/core"; import { MotiView } from "moti"; import { useState } from "react"; import { Button, StyleSheet, View } from "react-native"; import Animated, {withSpring,useAnimatedStyle} from "react-native-reanimated"; export default function App() { const [doAnimate, setDoAnimate] = useState(false); const handlePress = () => setDoAnimate(prev => !prev); const animatedStylez = useAnimatedStyle(() => { return ( { transform: [{translateX: doAnimate ? withSpring(100) : 0}], } ) }) // return ( // <View style={styles.container}> // <MotiView // style={styles.box} // animate={{ // backgroundColor: "red", // translateX: doAnimate ? 100 : undefined, // }} // /> // <Button title="move" onPress={handlePress} /> // </View> // ); return ( <View style={styles.container}> <Animated.View style={[styles.box, animatedStylez]}/> <Button title="move" onPress={handlePress} /> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "column", alignItems: "center", }, box: { width: 50, height: 50, margin: 10, borderRadius: 15, borderWidth: 2, backgroundColor: "#b58df1", }, }); ``` </details>
patrycjakalinska
added a commit
that referenced
this pull request
May 20, 2025
## Summary After interal conversation with @piaskowyk we decided to move this check inside the for loop. It modifies code from #7485, and ensures the initial state is guaranteed and guarded. ## Test plan <details> <summary>Both, commented and no, styles should work</summary> ```tsx import { transform } from "@babel/core"; import { MotiView } from "moti"; import { useState } from "react"; import { Button, StyleSheet, View } from "react-native"; import Animated, {withSpring,useAnimatedStyle} from "react-native-reanimated"; export default function App() { const [doAnimate, setDoAnimate] = useState(false); const handlePress = () => setDoAnimate(prev => !prev); const animatedStylez = useAnimatedStyle(() => { return ( { transform: [{translateX: doAnimate ? withSpring(100) : 0}], } ) }) // return ( // <View style={styles.container}> // <MotiView // style={styles.box} // animate={{ // backgroundColor: "red", // translateX: doAnimate ? 100 : undefined, // }} // /> // <Button title="move" onPress={handlePress} /> // </View> // ); return ( <View style={styles.container}> <Animated.View style={[styles.box, animatedStylez]}/> <Button title="move" onPress={handlePress} /> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "column", alignItems: "center", }, box: { width: 50, height: 50, margin: 10, borderRadius: 15, borderWidth: 2, backgroundColor: "#b58df1", }, }); ``` </details> ## Summary ## Test plan
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Ensure that
last[propName]is initialised to fix an exception on web. This bug was introduced by changes in #6749.I noticed this issue after upgrading to the latest version of react-native-reanimated. In my case, the library was trying to index
last['transform']which didn't exist for whatever reason.