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

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

react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx

Lines 106 to 116 in 74985c3

	private _maybePrepareForNewInitials(
	inputProps: AnimatedComponentProps<InitialComponentProps>
	) {
	if (this._previousProps && inputProps.style) {
	this._requiresNewInitials = !shallowEqual(
	this._previousProps,
	inputProps
	);
	}
	this._previousProps = inputProps;
	}

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.

[szydlovsky]

Hey @ArsenSheripov @pavelbabenko @exodusanto @kmarushchakItomy could you guys try this patch?:
reanimated_3.13.0_styles.patch
(together with, preferably, 3.13.0 version)

[exodusanto]

Great @szydlovsky! It's working on my end 🔝

[szydlovsky]

The fix should be there by the next stable version (3.14.0 or next iteration of 3.13.x)