chore(example): overhaul example to allow more comfortable feature testing (#28)

## Description

There are many many features to test & keeping them in single file was
just too much. Now everything is nicely structured.

Additionally I needed "real infrastructure" to see how the API could be
used - now `BottomTabsContainer` component serves this purpose.

Also see description of
software-mansion/react-native-screens-labs@066bafc

## Checklist

- [ ] Ensured that CI passes

Author: kkafar

apps/src/tests/TestBottomTabs/BottomTabsContainer.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import ConfigWrapperContext from './ConfigWrapperContext';
+import { BottomTabs, BottomTabsScreen } from 'react-native-screens';
+import { Colors } from '../../shared/styling/Colors';
+import type { BottomTabsScreenProps } from 'react-native-screens/components/BottomTabsScreen';
+import type { NativeSyntheticEvent } from 'react-native';
+import type { NativeFocusChangeEvent } from 'react-native-screens/fabric/BottomTabsNativeComponent';
+
+export interface TabConfiguration {
+  tabScreenProps: BottomTabsScreenProps;
+  contentViewRenderFn?: (selectNextTab?: () => void) => React.ReactNode;
+}
+
+export interface BottomTabsContainerProps {
+  tabConfigs: TabConfiguration[];
+}
+
+export function BottomTabsContainer(props: BottomTabsContainerProps) {
+  // Currently assumes controlled bottom tabs
+  console.info('BottomTabsContainer render');
+
+  const totalTabCount = props.tabConfigs.length;
+
+  const [focusedTabKey, setFocusedTabKey] = React.useState<string>(() => {
+    console.log('BottomTabsContainer focusedStateKey initial state computed');
+
+    if (props.tabConfigs.length === 0) {
+      throw new Error('There must be at least one tab defined');
+    }
+
+    const maybeUserRequestedFocusedTab = props.tabConfigs.find(
+      tabConfig => tabConfig.tabScreenProps.isFocused === true,
+    )?.tabScreenProps.tabKey;
+
+    if (maybeUserRequestedFocusedTab != null) {
+      return maybeUserRequestedFocusedTab;
+    }
+
+    // Default to first tab
+    return props.tabConfigs[0].tabScreenProps.tabKey;
+  });
+
+  const selectNextTab = React.useCallback(() => {
+    setFocusedTabKey(currentTabKey => {
+      const tabNumberAsString = currentTabKey.slice(3);
+      const tabNumber = Number.parseInt(tabNumberAsString, 10);
+      const tabIndex = tabNumber - 1; // tabs are numbered starting from 1
+      const nextTabIndex = (tabIndex + 1) % totalTabCount;
+      const nextTabKey = `Tab${nextTabIndex + 1}`;
+      return nextTabKey;
+    });
+  }, [totalTabCount]);
+
+  const configWrapper = React.useContext(ConfigWrapperContext);
+
+  const onNativeFocusChangeCallback = React.useCallback(
+    (event: NativeSyntheticEvent<NativeFocusChangeEvent>) => {
+      const tabKey = event.nativeEvent.tabKey;
+
+      // Use `startTransition` only if the state is controlled in JS
+      // const transitionFn = !configWrapper.config.controlledBottomTabs
+      //   ? startTransition
+      //   : (callback: () => void) => {
+      //       callback();
+      //     };
+
+      // Please note that the `useTransition` hook can not be used here,
+      // because it intruduces additional renders, which lead
+      // to blank screens / placeholders being visible (on slower render)
+      // for a few frames!
+      const transitionFn = React.startTransition;
+      // const transitionFn = (callback: () => void) => {
+      //   callback();
+      // };
+
+      transitionFn(() => {
+        console.info(`Starting transition to ${tabKey}`);
+        setFocusedTabKey(tabKey);
+      });
+    },
+    [],
+  );
+
+  return (
+    <BottomTabs
+      onNativeFocusChange={onNativeFocusChangeCallback}
+      tabBarBackgroundColor={Colors.NavyLight100}
+      experimentalControlNavigationStateInJS={
+        configWrapper.config.controlledBottomTabs
+      }>
+      {props.tabConfigs.map(tabConfig => {
+        const tabKey = tabConfig.tabScreenProps.tabKey;
+        const isFocused = tabConfig.tabScreenProps.tabKey === focusedTabKey;
+        console.info(
+          `BottomTabsContainer map to component -> ${tabKey} ${
+            isFocused ? '(focused)' : ''
+          }`,
+        );
+        return (
+          <BottomTabsScreen
+            key={tabKey}
+            {...tabConfig.tabScreenProps}
+            isFocused={isFocused} // notice that the value passed by user is overriden here!
+          >
+            {tabConfig.contentViewRenderFn?.(selectNextTab)}
+          </BottomTabsScreen>
+        );
+      })}
+    </BottomTabs>
+  );
+}

apps/src/tests/TestBottomTabs/ConfigWrapperContext.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { featureFlags } from 'react-native-screens';
+
+export const DEFAULT_GLOBAL_CONFIGURATION = {
+  heavyTabRender: false,
+  controlledBottomTabs: featureFlags.experiment.controlledBottomTabs,
+} as const;
+
+export interface Configuration {
+  heavyTabRender: boolean;
+  controlledBottomTabs: boolean;
+}
+
+export interface ConfigWrapper {
+  config: Configuration;
+  setConfig?: Dispatch<SetStateAction<Configuration>>;
+}
+
+const ConfigWrapperContext = React.createContext<ConfigWrapper>({
+  config: DEFAULT_GLOBAL_CONFIGURATION,
+});
+
+export default ConfigWrapperContext;

apps/src/tests/TestBottomTabs/components/LayoutView.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type ViewProps, View } from 'react-native';
+
+export interface LayoutViewProps extends ViewProps {}
+
+export function LayoutView(props: LayoutViewProps) {
+  const { children, style, ...rest } = props;
+  return (
+    <View
+      style={[
+        {
+          flex: 1,
+          width: '100%',
+          height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        style,
+      ]}
+      {...rest}>
+      {children}
+    </View>
+  );
+}

apps/src/tests/TestBottomTabs/components/TabConfigurationSummary.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from 'react-native';
+import ConfigWrapperContext from '../ConfigWrapperContext';
+
+export interface TabConfigurationSummaryProps {
+  tabKey: string;
+}
+
+export function TabConfigurationSummary(props: TabConfigurationSummaryProps) {
+  const configWrapper = React.useContext(ConfigWrapperContext);
+
+  return (
+    <>
+      <Text>tabKey: {props.tabKey}</Text>
+      <Text>
+        heavyTabRender: {configWrapper.config.heavyTabRender ? 'true' : 'false'}
+      </Text>
+      <Text>
+        controlledBottomTabs:{' '}
+        {configWrapper.config.controlledBottomTabs ? 'true' : 'false'}
+      </Text>
+    </>
+  );
+}

apps/src/tests/TestBottomTabs/components/TabContentView.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type ViewProps, View, Text, Button } from 'react-native';
+import ConfigWrapperContext from '../ConfigWrapperContext';
+import { someExtensiveComputation } from '../utils';
+
+export interface TabContentViewProps extends ViewProps {
+  selectNextTab?: (() => void) | undefined;
+  tabKey: string;
+  message?: string;
+}
+
+export function TabContentView(props: TabContentViewProps) {
+  const { selectNextTab, tabKey, message, ...viewProps } = props;
+
+  const configWrapper = React.useContext(ConfigWrapperContext);
+
+  console.log(
+    `TabContentView render with config: ${JSON.stringify(
+      configWrapper.config,
+    )}`,
+  );
+
+  if (configWrapper.config.heavyTabRender) {
+    someExtensiveComputation();
+  }
+
+  return (
+    <View {...viewProps}>
+      {message !== undefined && <Text>{message}</Text>}
+      <Text>tabKey: {tabKey}</Text>
+      <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"
+        onPress={() => {
+          configWrapper.setConfig?.(prev => {
+            return {
+              ...prev,
+              heavyTabRender: !prev.heavyTabRender,
+            };
+          });
+        }}
+      />
+    </View>
+  );
+}

apps/src/tests/TestBottomTabs/components/TabPlaceholder.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Colors } from '../../../shared/styling/Colors';
+
+export function TabPlaceholder() {
+  console.info('TabPlaceholder render');
+  return (
+    <View
+      style={[
+        {
+          flex: 1,
+          width: '100%',
+          height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: Colors.Navy,
+        },
+      ]}
+    />
+  );
+}