Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: iOS Fabric snapshotting mechanism #1357

Merged
merged 14 commits into from
Mar 31, 2022

Conversation

kacperkapusciak
Copy link
Member

@kacperkapusciak kacperkapusciak commented Mar 8, 2022

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
Copy link
Member

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

@WoLewicki WoLewicki marked this pull request as ready for review March 30, 2022 10:32
@WoLewicki WoLewicki merged commit 0bfc63f into main Mar 31, 2022
@WoLewicki WoLewicki deleted the @kacperkapusciak/many-ios-farbic-fixes branch March 31, 2022 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants