Flickering appears in 3.6.0 that is not present in 3.5.4

[lichstam]

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]

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

[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]

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

https://streamable.com/89v1d9

[pavelbabenko]

Having same issue in 3.6.2 with animating height

[domenicoprestia]

i see this problem also when animation padding and margin

[jeremybarbet]

I second that, seeing the same issue with height interpolation

[hanwenbo]

+1

[tokkozhin]

It's still in v3.11.0

[lichstam]

It's still in v3.11.0

gaah

i was hoping to see it resolved!

could someone from the team shed some light on this? have you found the issue? is it a hard problem to solve?

[lichstam]

just tried with 3.12.1 and can confirm that the flickering is still there.

@piaskowyk @tomekzaw

could you shed some light on this? is it a hard problem to fix?

[lichstam]

is it tied to this?

https://github.com/facebook/react-native/issues/41213

it seems like the issue has been introduced here:

https://github.com/software-mansion/react-native-reanimated/pull/4913/files

[piaskowyk]

For me is seems as a smoth animation 🤔

https://github.com/software-mansion/react-native-reanimated/assets/36106620/4de76b99-9284-4c5a-affc-c30a611b96e7

Here is my example code:

code

```js import { View, Text, SafeAreaView, StyleSheet } from 'react-native'; import {useEffect} from 'react' import Animated, { useAnimatedStyle, interpolate, useSharedValue, Extrapolation, withRepeat, withTiming, } from 'react-native-reanimated'; export default function App() { const animatedPosition = useSharedValue(0) useEffect(() => { animatedPosition.value = withRepeat(withTiming(1, { duration: 1500 }), -1, true); }, []); const stepsHeight = useAnimatedStyle(() => { const height = interpolate( animatedPosition.value, [1, -1], [400, -400 ], Extrapolation.CLAMP, ); return { height }; }); return ( ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', padding: 8, }, paragraph: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', }, }); ```

[pavelbabenko]

@piaskowyk For me the issue exists only in production mode

[lichstam]

For me is seems as a smoth animation 🤔

Screen.Recording.2024-06-24.at.11.13.26.mov Here is my example code:

code

it is actually choppy. if you look really closely you can see it sort of "skips" some frames.

i'll try to post a video this evening on how it looks at my end

[lichstam]

v. 3.5.4 https://github.com/software-mansion/react-native-reanimated/assets/34944192/c5d6142e-5d5e-4689-b0fd-f0982b710905

v 3.12.1 https://github.com/software-mansion/react-native-reanimated/assets/34944192/5ed1f469-aa6d-4910-918a-6b83e6e387cb

[lichstam]

tried with the latest react native version: 0.74.2, problem still persists

[lichstam]

i cherry picked these commits

https://github.com/software-mansion/react-native-reanimated/pull/4913/files

onto 3.5.4

and that's the point where the stuttering starts. i'm not an ios pro but it doesn't seem much is done apart from switching to fabric? or is there room for improvements on this library's end?

[piaskowyk]

But are you using the new architecture in your application? 🤔

[lichstam]

But are you using the new architecture in your application? 🤔

#if REACT_NATIVE_MINOR_VERSION >= 73 && defined(RCT_NEW_ARCH_ENABLED)

i guess that's per default if you're running a version higher or equal to 0.73?

nevertheless, i tried to do pod install with different flags but nothing seems to yield any desirable results.

since these problems are present i'm running at 0.72 with v 3.5.4. i want to upgrade though, but i can't because of the stuttering

[lichstam]

i have tried the following flags:

USE_FABRIC=1 RCT_NEW_ARCH_ENABLED=1 PRODUCTION=1 pod update

USE_FABRIC=0 RCT_NEW_ARCH_ENABLED=1 PRODUCTION=1 pod update

RCT_NEW_ARCH_ENABLED=0 pod install

and just pod install

is there anything else you would like me to try?

[lichstam]

please, this is urgent.

could you at least confirm the root cause of the problem? if it's not part of this library i will try to push it here:

https://github.com/facebook/react-native/issues/41213

[bartlomiejbloniarz]

Hi @lichstam 👋 I don't think the RN issue is relevant here, as it only pertains to the New Architecture and if I understand correctly you are using Old Architecture. Unfortunately the videos you uploaded last week seem to be unavailable. Could you reupload them?

[lichstam]

Hi @lichstam 👋 I don't think the RN issue is relevant here, as it only pertains to the New Architecture and if I understand correctly you are using Old Architecture. Unfortunately the videos you uploaded last week seem to be unavailable. Could you reupload them?

try here:

v. 3.5.4 https://github.com/software-mansion/react-native-reanimated/assets/34944192/c5d6142e-5d5e-4689-b0fd-f0982b710905

v 3.12.1 https://github.com/software-mansion/react-native-reanimated/assets/34944192/5ed1f469-aa6d-4910-918a-6b83e6e387cb

---

and regarding the old/new architecture, i tried using the latest rn with these flags:

USE_FABRIC=1 RCT_NEW_ARCH_ENABLED=1 PRODUCTION=1 pod update

so i guess that should've made it run with the new architecture?

but regardless, it doesnt work after this one:

https://github.com/software-mansion/react-native-reanimated/pull/4913/files

[bartlomiejbloniarz]

https://github.com/software-mansion/react-native-reanimated/assets/56109050/ca4a7d86-a081-4812-9e5d-5836ae43b86d

This is what it looks like for me. I can see some choppiness on the simulator, but I don't really see the difference between 3.12 and 3.5.4. Also, this choppiness is way less severe than what I can see in your recordings. Are you sure this is a good reproduction of the issue?

[lichstam]

hey, i'm trying to recreate an example but with no luck. i will try more tomorrow.

the gist is that there is one component that expands from not visible (0 in height) to the amount of the fully expanded modal. this way, the first component that you see in the video stays fixed in place. but for some reason there is this stuttering in the newer versions of reanimated

[lichstam]

ok, i got it

try this code, and try it on a real device

import { View, Text, useWindowDimensions } from 'react-native';
import Animated, {
  useAnimatedStyle,
  interpolate,
  useSharedValue,
  Extrapolation,
} from 'react-native-reanimated';
import BottomSheet from '@gorhom/bottom-sheet';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  const animatedPosition = useSharedValue(0);
  const maxDP = useWindowDimensions().height;

  const midDP = maxDP / 2;
  const stepsHeight = useAnimatedStyle(() => {
    const height = interpolate(
      animatedPosition.value,
      [0, maxDP - midDP, maxDP],
      [maxDP - midDP, 0, 0],
      Extrapolation.CLAMP,
    );
    return { height, backgroundColor: 'blue' };
  });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheet
        animatedPosition={animatedPosition}
        index={0}
        enablePanDownToClose
        snapPoints={['50%', '100%']}>
        <Animated.View style={stepsHeight} />
        <View style={{ height: 300 }}>
          <Text>Should be sticky</Text>
        </View>
      </BottomSheet>
    </GestureHandlerRootView>
  );
}

@gorhom/bottom-sheet this lib also uses reanimated, v2 but according to your docs there are no breaking changes, so i guess that should be alright

just expand it fully and go back to the middle and you'll notice the stutter. i can confirm that this stuttering is not present in

v3.5.4

https://github.com/software-mansion/react-native-reanimated/assets/34944192/70de5d6c-fb10-4360-b1b2-fda365270ecb

~3.10.1 (with expo)

https://github.com/software-mansion/react-native-reanimated/assets/34944192/0eeaa841-2b56-435c-885c-7fe4ca6f85ce