fix: iOS Fabric snapshotting mechanism

[kacperkapusciak]

Description

This PR moves the snapshotting logic from Screen to ScreenStack. From now on a snapshot is made from only the top-most screen on the stack.

Snapshots are used in order to have a transition animation during the go-back invoked from the JS side.

Problems:

• - fix snapshots in nested stacks that break the flow
• - only make a snapshot of the top-most screen
• - swipe to go back gesture shouldn't be invoked on the first screen in a stack
• - layout shift on initial render
• - lack of animation in the nested stack on initial app load

---

Layout shift on initial render

Layout shift on app reload is partly fixed by simplifying logic in resetViewToScreen method in RNSScreenController by running [_initialView updateBounds]; on every re-render. This will finally properly set the layout.

It leaves a slight issue with a layout jump on the initial render which offsets the Screen by the height of the header. The problem is probably caused by the asynchronous layout calculation in the commit phase of the Fabric render pipeline that incorrectly calculates the layout values in its nodes. These values, in the end, after the mount are getting corrected by the iOS system. Well, probably.

The height of the Screen is determined by the fact that it has a Header as its child or not. This is probably way too late for Fabric to figure out that it changes the layout. After the screen is mounted iOS system correctly shrinks the screen to the expected size.

---

Lack of animation in the nested stack on initial app load

The current problem we are unable to tackle is the lack of screen animation in a nested stack on initial app load:

Simulator.Screen.Recording.-.iPhone.13.-.2022-03-09.at.16.33.03.mp4

The issue doesn't occur after the application is refreshed (eg. by tapping R on the keyboard):

Simulator.Screen.Recording.-.iPhone.13.-.2022-03-09.at.16.34.20.mp4

Removing call to [_controller removeFromParentViewController]; from prepareForRecycle method in RNScreenStackComponentView reproduces the problem (lack of animation) also after refresh.

Repro used to test the changes

import {NavigationContainer} from '@react-navigation/native';
import React from 'react';
import {View, StyleSheet, Button} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const MainScreen = ({navigation}) => {
  return (
    <View style={{...styles.container, backgroundColor: 'aliceblue'}}>
      <Button
        title="Go to chats"
        onPress={() => navigation.navigate('Chats')}
      />
    </View>
  );
};

const ChatsScreen = ({navigation}) => {
  return (
    <NestedStack.Navigator>
      <NestedStack.Screen name="Privacy" component={PrivacyScreen} />
      <NestedStack.Screen name="Options" component={OptionsScreen} />
    </NestedStack.Navigator>
  );
};

const PrivacyScreen = ({navigation}) => {
  return (
    <View style={{...styles.container, backgroundColor: 'honeydew'}}>
      <Button
        title="Go to options"
        onPress={() => navigation.navigate('Options')}
      />
    </View>
  );
};

const OptionsScreen = ({navigation}) => {
  return (
    <View style={{...styles.container, backgroundColor: 'moccasin'}}>
      <Button onPress={() => navigation.goBack()} title="Go back" />
      <Button title="Go back to parent" onPress={() => navigation.getParent().goBack()} />
    </View>
  );
};

const Stack = createNativeStackNavigator();
const NestedStack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          options={{title: 'Events'}}
          component={MainScreen}
        />
        <Stack.Screen name="Chats" component={ChatsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
  },
});

export default App;

We suspect that the nested stacks are improperly hooked to the highest UIViewController in the hierarchy even tho we explicitly connect the nested screen to the screen to its parent stack navigator. It might be the reason why the system doesn't know how to handle the animation.

---

Thank you so much @WoLewicki for help with this. You are a legend 🙌

[WoLewicki]

Lack of animation in the nested stack on initial app load should be fixed with 61d6d9b. It was caused by a missing break clause 😅 .