feat: disable freeze for first render (#1220)

React-navigation's `useIsFocused` works based on changes between renders. Freezing stops all renders on non-visible screens thus breaking the `useIsFocused` hook. 

This issue can be mitigated by allowing one more render before freezing the screen / disabling freeze for the first render.

This also fixes unnecessary pop animation on stack reset.

Author: kacperkapusciak

Example/e2e/examplesTests/bottomTabs.e2e.ts

@@ -0,0 +1,86 @@
+import { device, expect, element, by } from 'detox';
+
+describe('Bottom tabs and native stack', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should go to main screen and back', async () => {
+    await expect(
+      element(by.id('root-screen-example-BottomTabsAndStack'))
+    ).toBeVisible();
+    element(by.id('root-screen-example-BottomTabsAndStack')).tap();
+
+    await expect(
+      element(by.id('bottom-tabs-more-details-button'))
+    ).toBeVisible();
+  });
+
+  it('should go to details screen', async () => {
+    await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
+    await element(by.id('bottom-tabs-more-details-button')).tap();
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 1'
+    );
+  });
+
+  it('should go to details screen and back', async () => {
+    await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
+    await element(by.id('bottom-tabs-more-details-button')).tap();
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 1'
+    );
+    if (device.getPlatform() === 'ios') {
+      await element(by.type('_UIButtonBarButton')).tap();
+    } else {
+      await device.pressBack();
+    }
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 0'
+    );
+  });
+
+  it('should go between tabs', async () => {
+    await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
+
+    await element(by.id('bottom-tabs-B-tab')).tap();
+    await expect(element(by.id('bottom-tabs-header-right-id'))).toHaveText('B');
+
+    await element(by.id('bottom-tabs-A-tab')).tap();
+    await expect(element(by.id('bottom-tabs-header-right-id'))).toHaveText('A');
+  });
+
+  it('should go to first screen on double tap on a tab', async () => {
+    await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
+
+    await element(by.id('bottom-tabs-more-details-button')).tap();
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 1'
+    );
+
+    await element(by.id('bottom-tabs-A-tab')).multiTap(2);
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 0'
+    );
+  });
+
+  it('should keep stack state on tab change', async () => {
+    await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
+
+    await element(by.id('bottom-tabs-more-details-button')).tap();
+    await element(by.id('bottom-tabs-more-details-button')).tap();
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 2'
+    );
+
+    await element(by.id('bottom-tabs-B-tab')).tap();
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 0'
+    );
+    await element(by.id('bottom-tabs-A-tab')).tap();
+
+    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
+      'More details 2'
+    );
+  });
+});

Example/ios/Podfile.lock

@@ -351,7 +351,7 @@ PODS:
     - React-Core
   - RNReanimated (1.13.2):
     - React-Core
-  - RNScreens (3.8.0):
+  - RNScreens (3.9.0):
     - React-Core
     - React-RCTImage
   - RNVectorIcons (8.0.0):
@@ -571,7 +571,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: 5e58135436aacc1c5d29b75547d3d2b9430d052c
   RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
-  RNScreens: 6e1ea5787989f92b0671049b808aef64fa1ef98c
+  RNScreens: 4d79118be80f79fa1f4aa131909a1d6e86280af3
   RNVectorIcons: f67a1abce2ec73e62fe4606e8110e95a832bc859
   Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

Example/src/screens/BottomTabsAndStack.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect } from 'react';
-import { I18nManager, SafeAreaView, StyleSheet } from 'react-native';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
   createNativeStackNavigator,
@@ -45,26 +45,34 @@ const DetailsScreen = ({
     index < colors.length ? colors[index] : colors[colors.length - 1];
 
   return (
-    <SafeAreaView
-      style={{ ...styles.container, backgroundColor: currentColor }}>
+    <View style={{ ...styles.container, backgroundColor: currentColor }}>
       <Button
         title={`More details ${index}`}
+        accessibilityLabel={`More details ${index}`}
+        testID="bottom-tabs-more-details-button"
         onPress={() => navigation.push('Details', { index: index + 1 })}
       />
       {index === 0 ? (
-        <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
+        <Button
+          onPress={() => navigation.pop()}
+          title="🔙 Back to Examples"
+          testID="bottom-tabs-go-back-button"
+        />
       ) : null}
-    </SafeAreaView>
+    </View>
   );
 };
 
-const createStack = () => {
+const createStack = (letter: string) => {
   const Stack = createNativeStackNavigator();
 
   const makeStack = () => (
     <Stack.Navigator
       screenOptions={{
         direction: I18nManager.isRTL ? 'rtl' : 'ltr',
+        headerRight: () => (
+          <Text testID="bottom-tabs-header-right-id">{letter}</Text>
+        ),
       }}>
       <Stack.Screen name="Details" component={DetailsScreen} />
     </Stack.Navigator>
@@ -73,17 +81,25 @@ const createStack = () => {
   return makeStack;
 };
 
-const AStack = createStack();
-const BStack = createStack();
-const CStack = createStack();
-const DStack = createStack();
+const AStack = createStack('A');
+const BStack = createStack('B');
+const CStack = createStack('C');
+const DStack = createStack('D');
 
 const Tab = createBottomTabNavigator();
 
 const NavigationTabsAndStack = (): JSX.Element => (
   <Tab.Navigator>
-    <Tab.Screen name="A" component={AStack} />
-    <Tab.Screen name="B" component={BStack} />
+    <Tab.Screen
+      name="A"
+      component={AStack}
+      options={{ tabBarTestID: 'bottom-tabs-A-tab' }}
+    />
+    <Tab.Screen
+      name="B"
+      component={BStack}
+      options={{ tabBarTestID: 'bottom-tabs-B-tab' }}
+    />
     <Tab.Screen name="C" component={CStack} />
     <Tab.Screen name="D" component={DStack} />
   </Tab.Navigator>

Example/src/shared/Button.tsx

@@ -4,12 +4,23 @@ import { Spacer } from './Spacer';
 
 interface Props {
   title: string;
+  accessibilityLabel?: string;
   onPress: () => void;
   testID?: string;
 }
 
-export const Button = ({ title, onPress, testID }: Props): JSX.Element => (
+export const Button = ({
+  title,
+  accessibilityLabel,
+  onPress,
+  testID,
+}: Props): JSX.Element => (
   <Spacer>
-    <RNButton title={title} onPress={onPress} testID={testID} />
+    <RNButton
+      accessibilityLabel={accessibilityLabel}
+      title={title}
+      onPress={onPress}
+      testID={testID}
+    />
   </Spacer>
 );

TestsExample/App.js

@@ -67,7 +67,9 @@ import Test1166 from './src/Test1166';
 import Test1188 from './src/Test1188';
 import Test1190 from './src/Test1190';
 import TestFreeze from './src/TestFreeze';
+import Test1198 from './src/Test1198';
 import Test1204 from './src/Test1204';
+import Test1209 from './src/Test1209';
 import Test1214 from './src/Test1214';
 
 enableFreeze(true);

TestsExample/ios/Podfile.lock

@@ -376,7 +376,7 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.7.0):
+  - RNScreens (3.9.0):
     - React-Core
     - React-RCTImage
   - RNVectorIcons (7.1.0):
@@ -592,7 +592,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: b04ef2a4f0cb61b062bbcf033f84a9e470f4f60b
-  RNScreens: 2a71d74b4e530f051f5684c8111d7591176722cf
+  RNScreens: 4d79118be80f79fa1f4aa131909a1d6e86280af3
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   Yoga: c11abbf5809216c91fcd62f5571078b83d9b6720
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

TestsExample/src/Test1198.tsx

@@ -0,0 +1,56 @@
+import React, {useEffect} from 'react';
+import {NavigationContainer, useIsFocused} from '@react-navigation/native';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Text, View} from 'react-native';
+
+const BottomTabs = createBottomTabNavigator();
+
+function Home() {
+  return (
+    <View
+      style={{
+        backgroundColor: 'lightgrey',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>Home</Text>
+    </View>
+  );
+}
+
+function Settings() {
+  const isFocused = useIsFocused();
+  const fetch = () => console.log('refetching data!');
+
+  useEffect(() => {
+    if (isFocused) {
+      fetch();
+    }
+  }, [isFocused]);
+
+  console.log({isFocused});
+
+  return (
+    <View
+      style={{
+        backgroundColor: 'wheat',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Text>Settings</Text>
+    </View>
+  );
+}
+
+const App = () => (
+  <NavigationContainer>
+    <BottomTabs.Navigator>
+      <BottomTabs.Screen name="Home" component={Home} />
+      <BottomTabs.Screen name="Settings" component={Settings} />
+    </BottomTabs.Navigator>
+  </NavigationContainer>
+);
+
+export default App;