[v7][iOS] waitForRender is broken

[sintylapse]

🐛 Bug Report

On version starting from 7.24.3, when you push in a heavy screen or from a heavy screen and waitForRender is enabled (or disabled, doesn't matter), for a split second the whole screen is render inside 0 pixels in the left top corner of a screen, and you can see only views that have hardcoded width and height. So the only way to workaround this bug is to add is to add this style to the root view of the screen

<View style={{
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
    }}>

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

1. Setup Playground project
2. Inside src/screens/PushedScreen.tsx add this component to make the screen heavy

<FlatList
          data={Array(500)
            .fill(null)
            .map((_, index) => ({
              id: index,
              title: `Item title ${index}`,
              description: `Item description ${index}`,
            }))}
          renderItem={({ item: { id, title, description } }) => (
            <View key={id}>
              <Text>{title}</Text>
              <Text>{description}</Text>
            </View>
          )}
        />

3. Change src/components/Root.tsx Root component to

const Root = ({ children, componentId, footer, style, testID, onLayout }: RootProps) => (
  <View style={{ flex: 1, backgroundColor: 'green' }}>
    {children}
  </View>
);

4. Add waitForRender option to src/commons/options/Options.ts

animations: {
      push: {
        waitForRender: true,
      },
    },

5. Start Playground project and go to Stack -> Push -> Push
6. Observe weird flickering and for a split second only items with hardcoded height are rendered

Expected behavior

All screen should be rendered without jumping and flickering

Actual Behavior

Weird flickering and for a split second only items with hardcoded height are rendered

Your Environment

• React Native Navigation version: 7.25.3
• React Native version: 0.66.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 13, iOS 15

Reproducible Demo

https://github.com/sintylapse/react-native-navigation/tree/broken-waitforrender-demo

https://user-images.githubusercontent.com/12295016/153717041-1f82dc38-ef1e-4764-8ad7-221aab22645a.mov

Are you willing to resolve this issue by submitting a Pull Request?

• ✖️   Yes, I have the time, and I know how to start.
• ✅   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

[sintylapse]

on version 7.24.2 everything is fine

[ItsNoHax]

Seems to be related to: https://github.com/wix/react-native-navigation/commit/345344a2c27611c6b3dc24f7a54742b2df25a7cc

Any idea why that code would cause this @yogevbd ?

As a temporary solution I used patch-package to revert that commit for our app.

[yogevbd]

Will investigate this soon. I'm currently working on stabilizing Android.