Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: withSpring color properties flickering (#6821)
## Summary This PR addresses an issue where color-based properties (`backgroundColor`, `boxShadow`) were causing flickering when used with withSpring animations. The root cause of the flickering was RGBA values going below `0`, resulting in `NaN` values. I introduced `clampRGBA` function that guards values within given limits. Before: https://github.com/user-attachments/assets/ace128a8-3f4b-41be-98c6-d34339808283 After: https://github.com/user-attachments/assets/b29f1248-2385-48c2-8fad-e261ee21b46a ## Test plan Paste this code to EmptyExample - it should work on both Paper and Fabric: <details> <summary>EmptyExample code</summary> ```js import { Text, StyleSheet, View, Pressable } from 'react-native'; import React from 'react'; import Animated, { useSharedValue, withSpring, useAnimatedStyle, } from 'react-native-reanimated'; export default function EmptyExample() { const pressed = useSharedValue(false); const animatedStyle = useAnimatedStyle(() => { return { backgroundColor: withSpring(pressed.value ? 'blue' : 'red'), }; }); return ( <View> <Animated.View style={[styles.box, animatedStyle]} /> <Pressable onPress={() => { pressed.value = !pressed.value; }}> <Text>Press me</Text> </Pressable> </View> ); } const styles = StyleSheet.create({ box: { width: 50, height: 50, }, }); ``` </details>
- Loading branch information