feat(iOS, Tabs): Migrate to new invalidate method

[t0maboro]

Description

WIP:

• fixing RN 0.81 and lower

Removing the logic related to scanning the list of mutations and relying on the invalidate method from RCTComponentViewProtocol.

Changes

• Adding common impl. between architectures
• Overriding callbacks for architectures to execute common impl.

Test code and steps to reproduce

Tested with - verifying that breakpoints are hit in the right moment:

import React, { createContext, useContext, useState } from 'react';
import { enableFreeze } from 'react-native-screens';
import { View, Button, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  NativeStackNavigationProp,
  createNativeStackNavigator
} from '@react-navigation/native-stack';
import {
  BottomTabsContainer,
  type TabConfiguration,
} from '../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
import ConfigWrapperContext, {
  type Configuration,
  DEFAULT_GLOBAL_CONFIGURATION,
} from '../../shared/gamma/containers/bottom-tabs/ConfigWrapperContext';

enableFreeze(true);

type TabToggleContextType = {
  toggleTabs: () => void;
};
const TabToggleContext = createContext<TabToggleContextType>({
  toggleTabs: () => {},
});
export const useTabToggle = () => useContext(TabToggleContext);

function Tab1() {
  const { toggleTabs } = useTabToggle();
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Tab 1</Text>
      <Button title="Toggle Tab 4" onPress={toggleTabs} />
    </View>
  );
}
function Tab2() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Tab 2</Text>
    </View>
  );
}
function Tab3() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Tab 3</Text>
    </View>
  );
}
function Tab4() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Tab 4</Text>
    </View>
  );
}

const ALL_TABS: TabConfiguration[] = [
  {
    tabScreenProps: {
      tabKey: 'Tab1',
      title: 'Tab1',
      icon: {
        ios: { type: 'sfSymbol', name: 'house.fill' },
        android: { type: 'imageSource', imageSource: require('../../../assets/variableIcons/icon_fill.png') }
      },
    },
    component: Tab1,
  },
  {
    tabScreenProps: {
      tabKey: 'Tab2',
      title: 'Tab2',
      icon: {
        ios: { type: 'sfSymbol', name: 'phone.fill' },
        android: { type: 'drawableResource', name: 'sym_call_missed' }
      },
    },
    component: Tab2,
  },
  {
    tabScreenProps: {
      tabKey: 'Tab3',
      title: 'Tab3',
      icon: {
        shared: {
          type: 'imageSource',
          imageSource: require('../../../assets/variableIcons/icon.png'),
        }
      },
    },
    component: Tab3,
  },
  {
    tabScreenProps: {
      tabKey: 'Tab4',
      title: 'Tab4',
      icon: {
        ios: { type: 'sfSymbol', name: 'rectangle.stack' },
        android: { type: 'drawableResource', name: 'custom_home_icon' }
      },
    },
    component: Tab4,
  },
];

function App() {
  const [config, setConfig] = useState<Configuration>(DEFAULT_GLOBAL_CONFIGURATION);
  const [showAllTabs, setShowAllTabs] = useState<boolean>(true);

  const toggleTabs = () => {
    setShowAllTabs((prev) => !prev);
  };

  const tabsToRender = showAllTabs ? ALL_TABS : ALL_TABS.slice(0, 3);

  return (
    <ConfigWrapperContext.Provider value={{ config, setConfig }}>
      <TabToggleContext.Provider value={{ toggleTabs }}>
        <BottomTabsContainer tabConfigs={tabsToRender} />
      </TabToggleContext.Provider>
    </ConfigWrapperContext.Provider>
  );
}

type RouteParamList = {
  Auth: undefined;
  Tabs: undefined;
};

type NavigationProp = NativeStackNavigationProp<RouteParamList>;
const Stack = createNativeStackNavigator<RouteParamList>();

function Auth({ navigation }: { navigation: NavigationProp }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Login Screen</Text>
      <Button title="Go to Tabs" onPress={() => navigation.push('Tabs')} />
    </View>
  );
}

export default function WrappedApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Auth" component={Auth} />
        <Stack.Screen name="Tabs" component={App} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[t0maboro]

superseded by: #3367 due to the backward compatibility issues