feat(bottom-tabs,iOS): change default value for controlledBottomTabs featrue flag to true (#27)

## Description

Default value change for `controlledBottomTabs` flag to `true` + some
cleanup & logs.


- [ ] Ensured that CI passes

Author: kkafar

apps/src/tests/TestBottomTabs.tsx renamed to apps/src/tests/TestBottomTabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useContext } from 'react';
+import React, { type Dispatch, type SetStateAction, useContext } from 'react';
 import {
   Button,
   type NativeSyntheticEvent,
@@ -13,7 +13,7 @@ import {
   enableFreeze,
   featureFlags,
 } from 'react-native-screens';
-import Colors from '../shared/styling/Colors';
+import Colors from '../../shared/styling/Colors';
 import { NativeFocusChangeEvent } from 'react-native-screens/fabric/BottomTabsNativeComponent';
 
 enableFreeze(true);
@@ -37,8 +37,6 @@ const ConfigWrapperContext = React.createContext<ConfigWrapper>({
   config: defaultGlobalConfiguration,
 });
 
-featureFlags.experiment.controlledBottomTabs = false;
-
 interface LayoutViewProps extends ViewProps {
   tabID?: number;
 }
@@ -103,9 +101,13 @@ function TabContentView(props: TabContentViewProps) {
       <Text>
         heavyTabRender: {configWrapper.config.heavyTabRender ? 'true' : 'false'}
       </Text>
+      <Text>
+        controlledBottomTabs:{' '}
+        {configWrapper.config.controlledBottomTabs ? 'true' : 'false'}
+      </Text>
       <Button title="Next tab" onPress={selectNextTab} />
       <Button
-        title="Toggle heavy render, current value {}"
+        title="Toggle heavy render"
         onPress={() => {
           configWrapper.setConfig?.(prev => {
             return {
@@ -141,11 +143,11 @@ function BottomTabsExample() {
   const [focusedTab, setFocusedTab] = React.useState(0);
   const selectNextTab = React.useCallback(() => {
     setFocusedTab(old => old + 1);
-  }, [setFocusedTab]);
+  }, []);
 
   const configWrapper = React.useContext(ConfigWrapperContext);
 
-  console.log(`Render: focusedTab: ${focusedTab}`);
+  console.log(`BottomTabsExample (topLevel) render: focusedTab: ${focusedTab}`);
 
   // Pending state can be used to render placeholder for the time of transition.
   const [_, startTransition] = React.useTransition();
@@ -155,12 +157,16 @@ function BottomTabsExample() {
       const tabKey = event.nativeEvent.tabKey;
 
       // Use `startTransition` only if the state is controlled in JS
-      const transitionFn = configWrapper.config.controlledBottomTabs
-        ? startTransition
-        : (callback: () => void) => {
-            callback();
-          };
+      // const transitionFn = !configWrapper.config.controlledBottomTabs
+      //   ? startTransition
+      //   : (callback: () => void) => {
+      //       callback();
+      //     };
+
+      const transitionFn = startTransition;
+
       transitionFn(() => {
+        console.info(`Starting transition to ${tabKey}`);
         if (tabKey === 'Tab1') {
           setFocusedTab(0);
         } else if (tabKey === 'Tab2') {

src/components/BottomTabsScreen.tsx

@@ -5,14 +5,15 @@ import BottomTabsScreenNativeComponent, {
   type NativeProps,
 } from '../fabric/BottomTabsScreenNativeComponent';
 import {
-  ColorValue,
-  NativeSyntheticEvent,
+  type ColorValue,
+  type NativeSyntheticEvent,
   StyleSheet,
-  ViewProps,
+  type ViewProps,
   findNodeHandle,
 } from 'react-native';
 import { Freeze } from 'react-freeze';
 import { freezeEnabled } from '../core';
+import { featureFlags } from '../flags';
 
 export type EmptyObject = Record<string, never>;
 export type BottomTabsScreenEventHandler<T> = (
@@ -24,6 +25,8 @@ export interface BottomTabsScreenProps {
   placeholder?: React.ReactNode | undefined;
 
   // Control
+
+  // Works only in 'controlled' mode. Otherwise this prop indicates only initally selected tab.
   isFocused?: boolean;
   tabKey: string;
 
@@ -41,21 +44,6 @@ export interface BottomTabsScreenProps {
 }
 
 function BottomTabsScreen(props: BottomTabsScreenProps) {
-  const [nativeViewHasDisappeared, setNativeViewHasDisappeared] =
-    React.useState(true);
-
-  const {
-    onWillAppear,
-    onDidAppear,
-    onWillDisappear,
-    onDidDisappear,
-    isFocused = false,
-    ...propsWoEventHandlers
-  } = props;
-
-  const shouldFreeze =
-    freezeEnabled() && !isFocused && nativeViewHasDisappeared;
-
   const componentNodeRef = React.useRef<React.Component<NativeProps>>(null);
   const componentNodeHandle = React.useRef<number>(-1);
 
@@ -68,12 +56,37 @@ function BottomTabsScreen(props: BottomTabsScreenProps) {
     }
   }, []);
 
+  const [nativeViewIsVisible, setNativeViewIsVisible] = React.useState(false);
+
+  const {
+    onWillAppear,
+    onDidAppear,
+    onWillDisappear,
+    onDidDisappear,
+    isFocused = false,
+    ...propsWoEventHandlers
+  } = props;
+
+  let shouldFreeze = freezeEnabled();
+
+  if (featureFlags.experiment.controlledBottomTabs) {
+    // If the tabs are JS controlled, we want to freeze only when given view is not focused && it is not currently visible
+    shouldFreeze = shouldFreeze && !nativeViewIsVisible && !isFocused;
+    console.info(
+      `TabsScreen [${componentNodeHandle.current ?? -1}] render; tabKey: ${
+        propsWoEventHandlers.tabKey
+      } UPDATE DUE TO CONTROLLED TABS TO shouldFreeze: ${shouldFreeze}`,
+    );
+  } else {
+    shouldFreeze = shouldFreeze && !nativeViewIsVisible;
+  }
+
   const onWillAppearCallback = React.useCallback(
     (event: NativeSyntheticEvent<EmptyObject>) => {
       console.log(
         `TabsScreen [${componentNodeHandle.current}] onWillAppear received`,
       );
-      setNativeViewHasDisappeared(false);
+      setNativeViewIsVisible(true);
       onWillAppear?.(event);
     },
     [onWillAppear],
@@ -104,16 +117,16 @@ function BottomTabsScreen(props: BottomTabsScreenProps) {
       console.log(
         `TabsScreen [${componentNodeHandle.current}] onDidDisappear received`,
       );
-      setNativeViewHasDisappeared(true);
+      setNativeViewIsVisible(false);
       onDidDisappear?.(event);
     },
     [onDidDisappear],
   );
 
   console.info(
-    `TabsScreen [${
-      componentNodeHandle.current ?? -1
-    }] render; shouldFreeze: ${shouldFreeze}, isFocused: ${isFocused} nativeViewHasDisappeared: ${nativeViewHasDisappeared}`,
+    `TabsScreen [${componentNodeHandle.current ?? -1}] render; tabKey: ${
+      propsWoEventHandlers.tabKey
+    } shouldFreeze: ${shouldFreeze}, isFocused: ${isFocused} nativeViewIsVisible: ${nativeViewIsVisible}`,
   );
 
   return (

src/flags.ts

@@ -1,4 +1,4 @@
-const RNS_CONTROLLED_BOTTOM_TABS_DEFAULT = false;
+const RNS_CONTROLLED_BOTTOM_TABS_DEFAULT = true;
 
 // TODO: Migrate freeze here