react-native-reanimated
react-native-reanimated copied to clipboard
Flickering appears in 3.6.0 that is not present in 3.5.4
Description
Flickering is introduced in 3.6.0, iOS, that wasn't present in earlier versions. I'm using interpolation to control height for a div above the one shown on the video in comments section. while expanding the view (thus the animated height), it starts flickering from version 3.6.0.
here is the code i'm using:
const stepsHeight = useAnimatedStyle(() => {
const height = interpolate(
animatedPosition.value,
[0, maxDP - midDP, maxDP],
[
maxDP -
midDP,
0,
0,
],
Extrapolation.CLAMP,
);
return { height };
});
<Animated.View style={stepsHeight} />
i've tried IDENTITY, EXTEND and none as well, nothing seems to help but downgrading to 3.5.4
my RN version is 0.72.10
### Steps to reproduce
1. animate height with interpolation
2. observe flicker when height is expanded
Flicker while expanding (version 3.6.0 and above)
https://github.com/software-mansion/react-native-reanimated/assets/34944192/9096c1da-b2f0-472f-a686-869538043a88
No flicker while expanding (version 3.5.4)
https://github.com/software-mansion/react-native-reanimated/assets/34944192/90f72f91-cc28-4a56-99bd-f72df09c1662
### Snack or a link to a repository
https://snack.expo.dev/RC7Hq5kJ_955Xxi0i-qI3
### Reanimated version
3.6.0
### React Native version
0.72.1
### Platforms
iOS
### JavaScript runtime
None
### Workflow
React Native
### Architecture
Paper (Old Architecture)
### Build type
Release app & dev bundle
### Device
iOS simulator
### Device model
iPhone 12 pro and iPhone 15 pro
### Acknowledgements
Yes
i have very limited time atm for repro but if it's really needed i will try to find some the coming days
https://snack.expo.dev/RC7Hq5kJ_955Xxi0i-qI3
you can see the flicker here. it's subtle but more apparent when you use gestures (i'm using the latest rn gesture handler btw, 2.15.0 for both cases
you can see the flicker, or the lag when it's close to the closing
also link to video of how it looks in my app while expanding a modal with this view inside:
https://streamable.com/89v1d9
Having same issue in 3.6.2 with animating height
i see this problem also when animation padding and margin
I second that, seeing the same issue with height interpolation
+1