possible fix

Author: Mark de Vocht

ios/RNNStackController.mm

@@ -42,7 +42,26 @@ - (void)mergeChildOptions:(RNNNavigationOptions *)options child:(UIViewControlle
 
 - (UIViewController *)popViewControllerAnimated:(BOOL)animated {
     [self prepareForPop];
-    return [super popViewControllerAnimated:animated];
+
+    UIViewController *topVC = self.topViewController;
+
+    if (animated && topVC.isViewLoaded && topVC.view.window) {
+        UIView *snapshot = [topVC.view snapshotViewAfterScreenUpdates:NO];
+        if (snapshot) {
+            snapshot.frame = topVC.view.bounds;
+            snapshot.autoresizingMask =
+                UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+            [topVC.view addSubview:snapshot];
+        }
+    }
+
+    if ([topVC isKindOfClass:[RNNComponentViewController class]]) {
+        [[(RNNComponentViewController *)topVC reactView] componentDidDisappear];
+    }
+
+    UIViewController *poppedVC = [super popViewControllerAnimated:animated];
+    [poppedVC destroyReactView];
+    return poppedVC;
 }
 
 - (BOOL)navigationBar:(UINavigationBar *)navigationBar shouldPopItem:(UINavigationItem *)item {

playground/e2e/Stack.test.js

@@ -183,6 +183,15 @@ describe('Stack', () => {
     await expect(elementByLabel('pop promise resolved with: ChildId')).toBeVisible();
   });
 
+  it.e2e('pop and re-push same component should not have stale unmount', async () => {
+    await elementById(TestIDs.PUSH_UNMOUNT_RACE_BTN).tap();
+    await sleep(800);
+    await expect(elementByLabel('loaded')).toBeVisible();
+    await elementById(TestIDs.POP_AND_REPUSH_BTN).tap();
+    await sleep(1000);
+    await expect(elementByLabel('loaded')).toBeVisible();
+  });
+
   it('pop from root screen should do nothing', async () => {
     await elementById(TestIDs.POP_BTN).tap();
     await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();

playground/src/screens/Screens.ts

@@ -122,6 +122,7 @@ const Screens = {
   },
   SystemUiOptions: SystemUiOptions,
   StatusBarFirstTab,
+  UnmountRace: 'UnmountRace',
   KeyboardScreen: 'KeyboardScreen',
   TopBarBackground: 'TopBarBackground',
   Toast: 'Toast',

playground/src/screens/StackScreen.tsx

@@ -21,6 +21,7 @@ const {
   SET_STACK_ROOT_WITH_ID_BTN,
   STACK_COMMANDS_BTN,
   SET_ROOT_NAVIGATION_TAB,
+  PUSH_UNMOUNT_RACE_BTN,
   POP_BTN,
 } = testIDs;
 
@@ -83,6 +84,11 @@ export default class StackScreen extends React.Component<NavigationProps> {
           testID={STACK_COMMANDS_BTN}
           onPress={this.pushStackCommands}
         />
+        <Button
+          label="Push Unmount Race"
+          testID={PUSH_UNMOUNT_RACE_BTN}
+          onPress={this.pushUnmountRace}
+        />
         <Button label="Pop" testID={POP_BTN} onPress={this.pop} />
       </Root>
     );
@@ -166,5 +172,13 @@ export default class StackScreen extends React.Component<NavigationProps> {
 
   pushStackCommands = () => Navigation.push(this, component(Screens.StackCommands));
 
+  pushUnmountRace = () =>
+    Navigation.push(this, {
+      component: {
+        name: Screens.UnmountRace,
+        passProps: { stackComponentId: this.props.componentId },
+      },
+    });
+
   pop = () => Navigation.pop(this);
 }

playground/src/screens/UnmountRaceScreen.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { NavigationProps } from 'react-native-navigation';
+import Root from '../components/Root';
+import Button from '../components/Button';
+import Navigation from '../services/Navigation';
+import Screens from './Screens';
+import testIDs from '../testIDs';
+
+let sharedData: string | null = null;
+
+interface Props extends NavigationProps {
+  stackComponentId?: string;
+}
+
+export default class UnmountRaceScreen extends React.Component<Props, { data: string }> {
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Unmount Race',
+        },
+      },
+    };
+  }
+
+  state = { data: 'loading' };
+  private checkTimer: ReturnType<typeof setTimeout> | null = null;
+
+  componentDidMount() {
+    sharedData = 'loaded';
+    this.checkTimer = setTimeout(() => {
+      this.setState({ data: sharedData ?? 'stale_unmount' });
+    }, 600);
+  }
+
+  componentWillUnmount() {
+    if (this.checkTimer) {
+      clearTimeout(this.checkTimer);
+    }
+    sharedData = null;
+  }
+
+  render() {
+    return (
+      <Root componentId={this.props.componentId}>
+        <View style={styles.container}>
+          <Text testID={testIDs.UNMOUNT_RACE_DATA} style={styles.text}>
+            {this.state.data}
+          </Text>
+        </View>
+        <Button
+          label="Pop and Re-push"
+          testID={testIDs.POP_AND_REPUSH_BTN}
+          onPress={this.popAndRepush}
+        />
+        <Button label="Pop" testID={testIDs.POP_BTN} onPress={this.pop} />
+      </Root>
+    );
+  }
+
+  popAndRepush = () => {
+    const stackId = this.props.stackComponentId;
+    if (!stackId) return;
+    Navigation.pop(this.props.componentId);
+    Navigation.push(stackId, {
+      component: {
+        name: Screens.UnmountRace,
+        passProps: { stackComponentId: stackId },
+      },
+    });
+  };
+
+  pop = () => Navigation.pop(this);
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 20, alignItems: 'center' },
+  text: { fontSize: 24 },
+});

playground/src/screens/index.tsx

@@ -117,6 +117,7 @@ function registerScreens() {
     () => require('./SideMenuRightScreen').default
   );
   Navigation.registerComponent(Screens.Stack, () => require('./StackScreen').default);
+  Navigation.registerComponent(Screens.UnmountRace, () => require('./UnmountRaceScreen').default);
   Navigation.registerComponent(Screens.SystemUiOptions, () => require('./SystemUiOptions').default);
   Navigation.registerComponent(
     Screens.StatusBarFirstTab,

playground/src/testIDs.ts

@@ -222,6 +222,10 @@ const testIDs = {
   TOGGLE_PLACEMENT_BTN: 'TOGGLE_PLACEMENT_BTN',
   MOUNTED_SCREENS_TEXT: 'MOUNTED_SCREENS_TEXT',
 
+  PUSH_UNMOUNT_RACE_BTN: 'PUSH_UNMOUNT_RACE_BTN',
+  UNMOUNT_RACE_DATA: 'UNMOUNT_RACE_DATA',
+  POP_AND_REPUSH_BTN: 'POP_AND_REPUSH_BTN',
+
   GOTO_TOPBAR_TITLE_TEST: 'GOTO_TOPBAR_TITLE_TEST',
   TOPBAR_TITLE_TEXT: 'TOPBAR_TITLE_TEXT',
   TOPBAR_TITLE_AVATAR: 'TOPBAR_TITLE_AVATAR',