Flickering in animation after updating react native

[ArsenSheripov]

Description

Hello everyone, I had a problem after updating react native to version 0.74.1; after the update, the header animation began to flicker heavily when activated.

Steps to reproduce

const Component = ({ }) => {
 const [readerMode, setReaderMode]=useState({mode:'off'})
  const marginTop = useSharedValue(0);
  const animatedStyles = useAnimatedStyle(() => ({
    marginTop: withTiming(marginTop.value, { duration: 500 }),
  }));

  return (
      <View style={{flex: 1,}>
        <Animated.View style={[styles.safeBlock, safeBlockAnimatedStyles]} /> */}
        <Animated.View
          style={[{ height: 100, backgroundColor: 'red' }, animatedStyles]}
          onLayout={onLayout}
          {...props}
        />

        <ScrollView>
          <View style={{ height: 400, backgroundColor: 'blue' }} />
          <View style={{ height: 400, backgroundColor: 'green' }} />
          <View style={{ height: 400, backgroundColor: 'yellow' }} />
          <View style={{ height: 400, backgroundColor: 'teal' }} />
        </ScrollView>
        <Button
          text="On"
          onPress={() => setReaderMode({ mode: 'on' })}
        />
        <Button
          text="Off"
          onPress={() => setReaderMode({mode: 'off' })}
        />
      </View>
  );
};

Snack or a link to a repository

https://snack.expo.dev/@arsen.sheripov/upbeat-blue-waffle

Reanimated version

3.11.0

React Native version

0.74.1

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Release app & production bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[pavelbabenko]

Same issue with animating height in production

[exploIF]

@ArsenSheripov Can I ask you to provide working repro? Unfortunately your example is not working, also there is nothing in the code that triggers animation. Hard to help without that

[ArsenSheripov]

@exploIF https://snack.expo.dev/kLsBpRavc-_8FcsALDcbE?platform=android ofcource, here I corrected the code

[exploIF]

@ArsenSheripov I've checked your repro on both Android and iOS and everything works fine on my end

[pavelbabenko]

@exploIF The issue appears in my project in production mode only. Maybe that could help you?

[ArsenSheripov]

@exploIF Now in the repro, when you turn the reader on and off, there is no flickering, but when I reproduced the same example in my react-native-CLI project, the error was reproduced

[exodusanto]

I saw, after trying each version, that the flick in my case starts since 3.9.0-rc.0, the 3.8.1 is the latest that works seamlessly

Maybe one of these commits introduced the regression in some edge case https://github.com/software-mansion/react-native-reanimated/compare/3.8.1...3.9.0-rc.0

Edit: Found the commit https://github.com/software-mansion/react-native-reanimated/commit/74985c35b444c1ce52736b31b0d03aa1c6a24774

I'm using this patch now react-native-reanimated+3.11.0.patch and the flick is gone

The original 3.11.x patch https://github.com/software-mansion/react-native-reanimated/pull/5960#issuecomment-2098548412 + revert of https://github.com/software-mansion/react-native-reanimated/commit/74985c35b444c1ce52736b31b0d03aa1c6a24774

[ArsenSheripov]

downgrading doesn't work for me

[kmarushchakItomy]

I saw, after trying each version, that the flick in my case starts since 3.9.0-rc.0, the 3.8.1 is the latest that works seamlessly

Maybe one of these commits introduced the regression in some edge case 3.8.1...3.9.0-rc.0

Edit: Found the commit 74985c3

I'm using this patch now react-native-reanimated+3.11.0.patch and the flick is gone

The original 3.11.x patch #5960 (comment) + revert of 74985c3

Thanks. Your patch fixed flickering on my side as well. I'm using JS variable (containerWidth) inside useAnimatedStyle's callback. It's = 0 by default and then it changes once to N. Without that patch, useAnimatedStyle's callback would get called several times and would jump between using previous/stale (0) value and current one (N) whenever there is re-render caused by parent component.

 const style = useAnimatedStyle(() => {
    return {
      transform: [
        {translateX: value.value * containerWidth},
        {scale: scale.value},
      ],
    };
  });

Passing containerWidth to deps array did not help.

Had to revert from freshly released 3.12.0 back to 3.11.0 tho, because the issue's still happening with 3.12.0.

[szydlovsky]

Hey everyone, could you also try 3.12 version? It contains the aforementioned 3.11.x patch

[exodusanto]

Hi @szydlovsky, I tested it out.

[!NOTE] A clean installation of 3.12.x triggers the property exception mentioned in #6082. I removed my patch and used the one attached to the issue for testing.

The flickering issue remains in version 3.12. Digging into the commit I mention before, I found that in this function: https://github.com/software-mansion/react-native-reanimated/blob/74985c35b444c1ce52736b31b0d03aa1c6a24774/src/createAnimatedComponent/PropsFilter.tsx#L106-L116 shallowEquals always returns false when the style (using useAnimatedStyle) property updates, causing a re-render each time, which results in the flickering.

[ArsenSheripov]

Hey everyone, could you also try 3.12 version? It contains the aforementioned 3.11.x patch

hi, I tried version 3.12, the flickering is still there

[ArsenSheripov]

Finaly, we rewrote the animations where we changed the position to absolute, useEffect to useAnimatedReaction, and also removed withTiming() from useAnimatedStyle(), and the animation began to work smoothly again.

Thanks to all.