From 8163afa9c091f039ea1da41c7f12302575a83320 Mon Sep 17 00:00:00 2001
From: Tymoteusz Boba <Tymoteusz.Boba@gmail.com>
Date: Tue, 30 Jul 2024 21:05:52 +0200
Subject: [PATCH] fix(iOS): non-interactive screen while switching between
 bottom-tab and native-stack navigators (#2260)

## Description
Currently, while switching between BottomTabNavigator and
NativeStackNavigator, user cannot interact with screens from
BottomTabNavigator. That's because while we're coming back to the
previous screen, original screen frame has frame (0, 0, 0, 0). I've
investigated that even if we're calling updateLayoutMetrics on a view,
it's not being updated, since the RNSScreen implementation of that
method firstly checks if `parentVC` is not RNSNavigationContainer and if
it's not nil -> Because it's always nil during the insertion (as we're
calling for screen updates too late), we're never updating layout
metrics.

Fixes #2252.

## Changes

- Moved calling for parent updates before updating layout metrics.

## Screenshots / GIFs

### Before


https://github.com/user-attachments/assets/8da01059-e488-43e4-ab44-2286b7cd3078

### After


https://github.com/user-attachments/assets/b7336425-bb01-4c66-80e7-4e8d83ca995d


## Test code and steps to reproduce

You can test `Test2252.tsx` to check these changes.


## Checklist

- [X] Included code example that can be used to test this change
- [x] Ensured that CI passes
---
 apps/src/tests/Test2252.tsx | 86 +++++++++++++++++++++++++++++++++++++
 apps/src/tests/index.ts     |  1 +
 ios/RNSScreen.mm            |  2 +-
 3 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 apps/src/tests/Test2252.tsx

diff --git a/apps/src/tests/Test2252.tsx b/apps/src/tests/Test2252.tsx
new file mode 100644
index 0000000000..338fbd6193
--- /dev/null
+++ b/apps/src/tests/Test2252.tsx
@@ -0,0 +1,86 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useState } from 'react';
+import { Alert, Button, Text, View, Switch } from 'react-native';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+const RootStack = createNativeStackNavigator();
+const BottomTab = createBottomTabNavigator();
+
+function TabScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        title="Test"
+        onPress={() => {
+          Alert.alert('Test');
+        }}
+      />
+      <Switch
+        trackColor={{ false: '#767577', true: '#81b0ff' }}
+        thumbColor={'#f5dd4b'}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={() => {
+          Alert.alert('Test');
+        }}
+      />
+    </View>
+  );
+}
+
+function TabsScreen() {
+  return (
+    <BottomTab.Navigator initialRouteName="tab">
+      <BottomTab.Screen name="tab" component={TabScreen} />
+    </BottomTab.Navigator>
+  );
+}
+
+export function RootStackNavigator() {
+  return (
+    <RootStack.Navigator
+      initialRouteName="tabNavigation"
+      screenOptions={{ headerShown: false }}>
+      <RootStack.Screen name="tabNavigation" component={TabsScreen} />
+    </RootStack.Navigator>
+  );
+}
+
+function LoginScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>No tabs</Text>
+    </View>
+  );
+}
+
+export function LoginStackNavigator() {
+  return (
+    <RootStack.Navigator
+      initialRouteName="login"
+      screenOptions={{ headerShown: false }}>
+      <RootStack.Screen name="login" component={LoginScreen} />
+    </RootStack.Navigator>
+  );
+}
+
+export default function App() {
+  const [showTabs, setShowTabs] = useState(true);
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer key={showTabs ? 'a' : 'b'}>
+        {showTabs ? <RootStackNavigator /> : <LoginStackNavigator />}
+      </NavigationContainer>
+      <View style={{ marginBottom: 32 }}>
+        <Button
+          title="Toggle"
+          onPress={() => {
+            setShowTabs(!showTabs);
+          }}
+        />
+      </View>
+    </SafeAreaProvider>
+  );
+}
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index 07b0690531..5c87cf8bab 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -107,5 +107,6 @@ export { default as Test2229 } from './Test2229';
 export { default as Test2231 } from './Test2231';
 export { default as Test2232 } from './Test2232';
 export { default as Test2235 } from './Test2235';
+export { default as Test2252 } from './Test2252';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 932ec9d8db..b86e84f42d 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -788,7 +788,7 @@ - (void)updateLayoutMetrics:(const react::LayoutMetrics &)layoutMetrics
   _newLayoutMetrics = layoutMetrics;
   _oldLayoutMetrics = oldLayoutMetrics;
   UIViewController *parentVC = self.reactViewController.parentViewController;
-  if (parentVC != nil && ![parentVC isKindOfClass:[RNSNavigationController class]]) {
+  if (parentVC == nil || ![parentVC isKindOfClass:[RNSNavigationController class]]) {
     [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
   }
   // when screen is mounted under RNSNavigationController it's size is controller