Fix race-condition during render

[piaskowyk]

Summary

This PR fixes a problem with race conditions during updating parent view and mounting children. The problem occurs in some specific circumstances:

• Parent has an animated style
• Parent update style without animation, just assigns new value to shared value (single frame update, without animation)
• Child doesn't have animated style
• Child's styles depend on parent size
• Child is mounting during update of parent style

In this situation (repro in attached example code) may happen race conditions. See at the graph:

Style updating by Reanimated

Mounting new view by React

So when we merge both graph in single one, It should behave in this way:

But because Reanimated is trying to perform update synchronously it looks like that:

In this specific situation, the React Shadow Tree and UI Native Tree are not synchronized. To resolve this issue, I disabled the synchronous style update through Reanimated until those trees can be synchronized once more.

before	after
Screen.Recording.2023-10-05.at.14.43.58.mov	Screen.Recording.2023-10-05.at.14.40.24.mov

Fixes #4932

Test plan

Example code

import React, { useState } from 'react';
import Reanimated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import {Pressable, View, StyleSheet, Text} from 'react-native';

function App() {
  const [toggle, setToggle] = useState(false);
  const height = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    return { height: height.value };
  });

  return (
    <View style={styles.container}>
      <Reanimated.View style={[styles.parent, animatedStyle]}>
      {toggle && <Reanimated.View style={[styles.child]} />}
      </Reanimated.View>

      <Pressable onPress={() => {
        setToggle(!toggle);
        height.value = height.value === 100 ? 200 : 100;
      }} style={styles.button}>
        <Text>Press Me</Text>
      </Pressable>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
  },
  parent: {
    backgroundColor: 'red',
    width: '100%',
  },
  child: {
    backgroundColor: 'green',
    height: '100%',
    width: '50%'
  },
  button: {
    position: 'absolute',
    bottom: 100,
  },
});

export default App;

[piaskowyk]

It needs to be NSNumber, because I can't inject BOOL field with objc_setAssociatedObject method

[tomekzaw]

Suggested change

	}
	}

[tomekzaw]

Suggested change

	- (id)isViewTreesSynchronized
	- (NSNumber *)isViewTreesSynchronized

[tomekzaw]

Suggested change

	auto isViewTreesSynchronized = [[strongSelf.uiManager isViewTreesSynchronized] intValue] == 1;
	auto isViewTreesSynchronized = [[strongSelf.uiManager isViewTreesSynchronized] boolValue];

[tomekzaw]

Suggested change

	- (id)isViewTreesSynchronized;
	- (NSNumber *)isViewTreesSynchronized;

[piaskowyk]

Closed due to: #5224