Operations order

[piaskowyk]

Description

Fixes #2345.

In some cases is possible to call updateProps on the not yet mounted component. These updates were overridden by React Layout props. I detect this situation and save new props to buffer, and schedule updates of these props after mounting of component.

Code to reproduce

import * as React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  useAnimatedScrollHandler,
} from 'react-native-reanimated';

export default function Repro() {
  const translationY = useSharedValue(200);

  const scrollHandler = useAnimatedScrollHandler(({ contentOffset: { y } }) => {
    translationY.value = 200 + y + 20;
  });

  const animatedHeaderStyle = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      backgroundColor: 'red',
      height: 200,
      top: 0,
      left: 0,
      right: 0,
      paddingTop: 100,
      width: translationY.value,
    };
  }, [translationY]);

  console.log("Render", "----------------------------------")
  
  return (
    <View style={styles.container}>
      <Animated.ScrollView
        contentInset={{ top: 200 }}
        contentOffset={{
          y: -200,
          x: 0,
        }}
        contentContainerStyle={styles.contentContainer}
        style={styles.container}
        onScroll={scrollHandler}
        scrollEventThrottle={16}>
      </Animated.ScrollView>
      <Animated.View style={animatedHeaderStyle}>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    paddingTop: Platform.OS === 'android' ? 200 : undefined,
  },
  blueSpace: {
    height: 500,
    backgroundColor: 'blue',
  },
  middleLine: {
    height: 10,
    backgroundColor: 'green',
  },
});

[hirbod]

Is anything holding back this PR?

[piaskowyk]

@hirbod I am just waiting for the review.

[kmagiera]

If I understand this correctly we don't actually want to synchronize the access to _componentUpdateBuffer here. The only thing we want is to make some atomic flag that'd allow us to indicate there is something in that buffer such that these updates can be picked up when batch is finished processing. For that purpose it'd be safer and easier to use atomic operations and only synchronize that part. Note that the code that writes to the buffer is going to be executed more often than the code that only needs to know if there was anything added to the buffer. Moreover, if the latter reads that there is something but we already flushed it, it isn't going to have any side effects and the only issue is that we may sometimes add UI block that does nothing.

[kmagiera]

As discussed, can we rename _isComponentUpdateBufferEmtpy to carry some meaning about what does setting this flag would mean. Also make that meaning "reverse", like for example "shouldRunUpdatesAfterFLush"

[Latropos]

Fixes #2900 as well