search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.59k stars 1.26k forks source link

Fix useFrameCallback cleanup #6143

Closed szydlovsky closed 1 week ago

szydlovsky commented 1 week ago

Summary

useFrameCallback had a bit faulty cleanup: it used ref.current during useEffect cleanup, when the ref value could as well be unreachable (already deallocated). I added the callbackId memoization + removed unnecessary setting it to -1.

Test plan

useFrameCallback example from Example App, as well as this code:

Code ``` TYPESCRIPT import React from 'react'; import { StyleSheet, View } from 'react-native'; import Animated, { useFrameCallback, useSharedValue, useAnimatedStyle, } from 'react-native-reanimated'; export default function App() { const t = useSharedValue(0); const height = 1300; useFrameCallback((frameInfo) => { t.value = frameInfo.timeSinceFirstFrame / 350; }); const infinityStyle = useAnimatedStyle(() => { const scale = 2 / (3 - Math.cos(2 * t.value)); return { transform: [ { translateX: scale * (Math.sin(2 * t.value) / 2) * 200 }, { translateY: scale * Math.cos(t.value) * Math.min(height / 2 - 120, 200), }, ], }; }); return ( ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', height: 150, }, dot: { width: 60, height: 60, borderRadius: 30, backgroundColor: '#b58df1', position: 'absolute', }, }); ```