chore(test): new test-tabs-tab-bar-experimental-userInterfaceStyle with scenario

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/container/TabsContainer.kt

@@ -361,12 +361,6 @@ internal class TabsContainer(
 
         val isRepeated = nextSelectedFragment === currSelectedFragment
 
-        // If this is user action we test whether it should be prevented before we progress the state.
-        if (!isRepeated && !isInExternalOperationContext && nextSelectedFragment.isPreventNativeSelectionEnabled) {
-            delegate.onNavStateUpdatePrevented(navState, nextSelectedFragment.requireScreenKey)
-            return false
-        }
-
         val stateChanged = updateSelectedFragment(nextSelectedFragment)
 
         val hasTriggeredSpecialEffect =

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/container/TabsContainerDelegate.kt

@@ -32,17 +32,4 @@ internal interface TabsContainerDelegate {
         rejectedNavState: TabsNavState,
         reason: TabsNavStateUpdateRejectionReason,
     )
-
-    /**
-     * Called when a native user action (tap) attempts to select a tab that has
-     * [com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen.preventNativeSelection] enabled.
-     * The navigation state remains unchanged.
-     *
-     * @param currentNavState The currently active navigation state that was kept.
-     * @param preventedScreenKey The screen key of the tab whose selection was prevented.
-     */
-    fun onNavStateUpdatePrevented(
-        currentNavState: TabsNavState,
-        preventedScreenKey: String,
-    )
 }

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/TabsHost.kt

@@ -182,13 +182,6 @@ class TabsHost(
         )
     }
 
-    override fun onNavStateUpdatePrevented(
-        currentNavState: TabsNavState,
-        preventedScreenKey: String,
-    ) {
-        eventEmitter.emitOnTabSelectionPreventedEvent(currentNavState, preventedScreenKey)
-    }
-
     override fun didMountItems(uiManager: UIManager) {
         container.performContainerUpdateIfNeeded()
     }

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/TabsHostEventEmitter.kt

@@ -5,7 +5,6 @@ import com.swmansion.rnscreens.gamma.common.event.BaseEventEmitter
 import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
 import com.swmansion.rnscreens.gamma.tabs.container.TabsNavStateUpdateRejectionReason
 import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectedEvent
-import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionPreventedEvent
 import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionRejectedEvent
 
 internal class TabsHostEventEmitter(
@@ -54,22 +53,4 @@ internal class TabsHostEventEmitter(
             ),
         )
     }
-
-    /**
-     * Emits `onTabSelectionPrevented` event to JS when a tab selection is prevented
-     * because the target screen has `preventNativeSelection` enabled.
-     */
-    fun emitOnTabSelectionPreventedEvent(
-        currentNavState: TabsNavState,
-        preventedScreenKey: String,
-    ) {
-        reactEventDispatcher.dispatchEvent(
-            TabsHostTabSelectionPreventedEvent(
-                surfaceId,
-                viewTag,
-                currentNavState,
-                preventedScreenKey,
-            ),
-        )
-    }
 }

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/TabsHostViewManager.kt

@@ -13,7 +13,6 @@ import com.swmansion.rnscreens.gamma.common.colorscheme.ColorScheme
 import com.swmansion.rnscreens.gamma.helpers.makeEventRegistrationInfo
 import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
 import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectedEvent
-import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionPreventedEvent
 import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionRejectedEvent
 import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
 
@@ -60,7 +59,6 @@ class TabsHostViewManager :
     override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> =
         mutableMapOf(
             makeEventRegistrationInfo(TabsHostTabSelectedEvent),
-            makeEventRegistrationInfo(TabsHostTabSelectionPreventedEvent),
             makeEventRegistrationInfo(TabsHostTabSelectionRejectedEvent),
         )
 

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/screen/TabsScreen.kt

@@ -94,8 +94,6 @@ class TabsScreen(
     var shouldUseRepeatedTabSelectionScrollToTopSpecialEffect: Boolean = true
     var shouldUseRepeatedTabSelectionPopToRootSpecialEffect: Boolean = true
 
-    var preventNativeSelection: Boolean = false
-
     private fun <T> updateMenuItemAttributesIfNeeded(
         oldValue: T,
         newValue: T,

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/screen/TabsScreenFragment.kt

@@ -11,7 +11,6 @@ class TabsScreenFragment(
     internal val tabsScreen: TabsScreen,
 ) : Fragment() {
     internal val requireScreenKey: String by tabsScreen::requireScreenKey
-    internal val isPreventNativeSelectionEnabled: Boolean by tabsScreen::preventNativeSelection
 
     override fun onCreateView(
         inflater: LayoutInflater,

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/screen/TabsScreenViewManager.kt

@@ -97,13 +97,6 @@ class TabsScreenViewManager :
         view.shouldUseRepeatedTabSelectionScrollToTopSpecialEffect = scrollToTop
     }
 
-    override fun setPreventNativeSelection(
-        view: TabsScreen,
-        value: Boolean,
-    ) {
-        view.preventNativeSelection = value
-    }
-
     override fun setTabBarItemTestID(
         view: TabsScreen,
         value: String?,

apps/Example.tsx

@@ -33,7 +33,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
   ScreensDarkTheme,
   ScreensLightTheme,
-} from './src/shared/styling/adapter/react-navigation';
+} from './src/shared/styling/Colors';
 
 import IssueTestsScreen from './src/tests/IssueTestsScreen';
 import SingleFeatureTests from './src/tests/single-feature-tests';

apps/src/shared/Alert.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, StyleSheet, Dimensions, View, Pressable } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import useThemeColorPallette from './styling/adapter/react-navigation/useColorPallette';
+import useThemeColorPallette from './styling/theme-provider/useColorPallette';
 
 export const Alert = (): React.JSX.Element => {
   const navigation = useNavigation();

apps/src/shared/ThemedText.tsx

@@ -1,9 +1,9 @@
-import { useTheme } from '@react-navigation/native';
 import React from 'react';
 import { Text, TextProps } from 'react-native';
+import useThemeColorPallette from './styling/theme-provider/useColorPallette';
 
 export const ThemedText = ({ children, style, ...props }: TextProps) => {
-  const { colors } = useTheme();
+  const { colors } = useThemeColorPallette();
 
   return (
     <Text style={[{ color: colors.text }, style]} {...props}>

apps/src/shared/ThemedTextInput.tsx

@@ -1,13 +1,13 @@
-import { useTheme } from '@react-navigation/native';
 import React from 'react';
 import { TextInput, TextInputProps } from 'react-native';
+import useThemeColorPallette from './styling/theme-provider/useColorPallette';
 
 export const ThemedTextInput = ({ style, ...props }: TextInputProps) => {
-  const { colors } = useTheme();
+  const { colors } = useThemeColorPallette();
 
   return (
     <TextInput
-      style={[{ borderColor: colors.border, color: colors.text }, style]}
+      style={[{ borderColor: colors.cardBorder, color: colors.text }, style]}
       {...props}
     />
   );

apps/src/shared/ThemedView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
-import useThemeColorPallette from './styling/adapter/react-navigation/useColorPallette';
+import useThemeColorPallette from './styling/theme-provider/useColorPallette';
 
 export const ThemedView = ({ children, style, ...props }: ViewProps) => {
   const { colors } = useThemeColorPallette();

apps/src/shared/styling/Colors.ts

@@ -1,4 +1,5 @@
 import { ColorValue } from 'react-native';
+import { DarkTheme, DefaultTheme } from '@react-navigation/native';
 
 export const Palette = {
   NavyLight100: '#001a72',
@@ -97,18 +98,20 @@ export const Palette = {
 } as const;
 
 export type ColorPallette = typeof Palette & {
-  background: ColorValue,
-  offBackground: ColorValue,
-  primary: ColorValue,
-  cardBackground: ColorValue,
-  cardBorder: ColorValue,
+  background: ColorValue;
+  offBackground: ColorValue;
+  primary: ColorValue;
+  text: ColorValue;
+  cardBackground: ColorValue;
+  cardBorder: ColorValue;
 };
 
 export const Colors: ColorPallette = {
   ...Palette,
   background: Palette.White,
   offBackground: Palette.OffWhite,
   primary: Palette.NavyLight100,
+  text: Palette.NavyLight100,
   cardBackground: Palette.White,
   cardBorder: Palette.NavyLight20,
 };
@@ -120,10 +123,31 @@ export const DarkColors: ColorPallette = {
   background: Palette.Navy,
   offBackground: Palette.OffNavy,
   primary: Palette.NavyLight10,
+  text: Palette.NavyLight10,
   cardBackground: Palette.Navy,
   cardBorder: Palette.NavyDark60,
 };
 
-export default Colors;
+export const ScreensLightTheme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: LightColors.primary as string,
+    background: LightColors.background as string,
+    card: LightColors.cardBackground as string,
+    border: LightColors.cardBorder as string,
+  },
+};
 
+export const ScreensDarkTheme = {
+  ...DarkTheme,
+  colors: {
+    ...DarkTheme.colors,
+    primary: DarkColors.primary as string,
+    background: DarkColors.background as string,
+    card: DarkColors.cardBackground as string,
+    border: DarkColors.cardBorder as string,
+  },
+};
 
+export default Colors;

apps/src/shared/styling/theme-provider/ThemeContext.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export type ThemeName = 'light' | 'dark';
+
+export const ThemeContext = React.createContext<ThemeName | undefined>(
+  undefined,
+);
+
+ThemeContext.displayName = 'ThemeContext';

apps/src/shared/styling/theme-provider/ThemeProvider.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { ThemeContext } from './ThemeContext';
+import type { ThemeName } from './ThemeContext';
+
+type Props = {
+  theme: ThemeName;
+  children: React.ReactNode;
+};
+
+export function ThemeProvider({ theme, children }: Props) {
+  return (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+  );
+}

apps/src/shared/styling/theme-provider/useColorPallette.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ThemeContext } from './ThemeContext';
+import type { ThemeName } from './ThemeContext';
+import { ColorPallette, DarkColors, LightColors } from '../Colors';
+import { useTheme } from '@react-navigation/native';
+
+/**
+ * Requires `ThemeContext` (from react-navigation) presence.
+ * However, it is possible to override theme by wrapping part of the app in `ThemeProvider` and passing desired theme as a prop.
+ * Use this to get whole collor pallete current theme is based on.
+ */
+export default function useThemeColorPallette(): {
+  theme: ThemeName;
+  colors: ColorPallette;
+} {
+  const navigationTheme = useTheme();
+  let theme: ThemeName = navigationTheme.dark ? 'dark' : 'light';
+
+  const providedTheme = React.useContext(ThemeContext);
+  if (providedTheme !== undefined) {
+    theme = providedTheme;
+  }
+  return {
+    theme: theme,
+    colors: theme === 'dark' ? DarkColors : LightColors,
+  };
+}

apps/src/tests/IssueTestsScreen.tsx

@@ -10,7 +10,7 @@ import { ListItem } from '@apps/shared';
 import {
   ScreensDarkTheme,
   ScreensLightTheme,
-} from '@apps/shared/styling/adapter/react-navigation';
+} from '@apps/shared/styling/Colors';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const SCREENS: Record<