react-native-reanimated icon indicating copy to clipboard operation
react-native-reanimated copied to clipboard

Flickering appears in 3.6.0 that is not present in 3.5.4

Open lichstam opened this issue 6 months ago • 26 comments

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

lichstam avatar Feb 15 '24 12:02 lichstam

i have very limited time atm for repro but if it's really needed i will try to find some the coming days

lichstam avatar Feb 15 '24 12:02 lichstam

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

lichstam avatar Feb 15 '24 13:02 lichstam

also link to video of how it looks in my app while expanding a modal with this view inside:

https://streamable.com/89v1d9

lichstam avatar Feb 15 '24 13:02 lichstam

Having same issue in 3.6.2 with animating height

pavelbabenko avatar Feb 16 '24 21:02 pavelbabenko

i see this problem also when animation padding and margin

domenicoprestia avatar Feb 18 '24 13:02 domenicoprestia

I second that, seeing the same issue with height interpolation

jeremybarbet avatar Feb 22 '24 13:02 jeremybarbet

+1

hanwenbo avatar Apr 30 '24 10:04 hanwenbo