Flush UI operation queue when animation is not running

[piaskowyk]

Summary

When animation is not running it is possible to enqueue UI update operation but never execute them.

Before	After
Screen.Recording.2023-04-05.at.09.48.36.mov	Screen.Recording.2023-04-05.at.09.49.10.mov

I tested it on the Fabric also.

code

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useAnimatedProps,
  withTiming
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

export default function AnimatedStyleUpdateExample(): React.ReactElement {
  const sv1 = useSharedValue(20);
  const sv2 = useSharedValue(20);
  const style1 = useAnimatedStyle(() => ({ width: sv1.value }));
  const style2 = useAnimatedStyle(() => ({ width: sv2.value }));

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        marginTop: 50
      }}>
      <Animated.View
        style={[
          { width: 100, height: 80, backgroundColor: 'orange'},
          style1,
        ]}
      />
      <Animated.View
        style={[
          { width: 100, height: 80, backgroundColor: 'black'},
          style2,
        ]}
      />
      <Button
        title={'set width for 1'}
        onPress={() => {
          sv1.value = withTiming(sv1.value === 20 ? 100 : 20);
        }}
      />
      <Button
        title={'set width for 2'}
        onPress={() => {
          sv2.value = sv2.value === 20 ? 100 : 20;
        }}
      />
      <Button
        title={'set width for 1 & 2'}
        onPress={() => {
          sv1.value = withTiming(sv1.value === 20 ? 100 : 20);
          sv2.value = sv2.value === 20 ? 100 : 20;
        }}
      />
    </View>
  );
}

[kmagiera]

LGTM 👍

[tomekzaw]

I can confirm this PR successfully resolves the issue with useAnimatedSensor ✅

[ranaavneet]

@piaskowyk @tomekzaw does this solve #4231 as well?

[tomekzaw]

@ranaavneet unfortunately, probably not, but we're working on it