Revert "fix: Allow to use PlatformColor in the theme" (#11576)

Reverts #11570
react-navigation · Sep 3, 2023 · ba1feba · ba1feba
1 parent 64734e7
commit ba1feba
Show file tree

Hide file tree

Showing 25 changed files with 64 additions and 107 deletions.
diff --git a/example/package.json b/example/package.json
@@ -33,7 +33,7 @@
     "react-native-paper": "^4.12.5",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.25.0",
+    "react-native-screens": "~3.20.0",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {

diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
@@ -14,7 +14,7 @@ import {
 import type { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import * as React from 'react';
-import { ColorValue, ScrollView, StatusBar, StyleSheet } from 'react-native';
+import { ScrollView, StatusBar, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
 
 import { Albums } from '../Shared/Albums';
@@ -24,7 +24,7 @@ import { SimpleStack, SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
-  ({ color, size }: { color: ColorValue; size: number }) =>
+  ({ color, size }: { color: string; size: number }) =>
     <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {

diff --git a/example/src/Screens/NativeStackHeaderCustomization.tsx b/example/src/Screens/NativeStackHeaderCustomization.tsx
@@ -140,25 +140,21 @@ export function NativeStackHeaderCustomization({
           headerTintColor: 'white',
           headerTitle: ({ tintColor }) => (
             <Appbar.Action
-              color={tintColor as string}
+              color={tintColor}
               icon="signal-5g"
               onPress={onPress}
             />
           ),
           headerLeft: ({ tintColor, canGoBack }) =>
             canGoBack ? (
               <Appbar.Action
-                color={tintColor as string}
+                color={tintColor}
                 icon="arrow-left-thick"
                 onPress={navigation.goBack}
               />
             ) : null,
           headerRight: ({ tintColor }) => (
-            <Appbar.Action
-              color={tintColor as string}
-              icon="music"
-              onPress={onPress}
-            />
+            <Appbar.Action color={tintColor} icon="music" onPress={onPress} />
           ),
           headerBackground: () => (
             <Image
@@ -175,11 +171,7 @@ export function NativeStackHeaderCustomization({
         options={{
           title: 'Feed',
           headerLeft: ({ tintColor }) => (
-            <Appbar.Action
-              color={tintColor as string}
-              icon="spa"
-              onPress={onPress}
-            />
+            <Appbar.Action color={tintColor} icon="spa" onPress={onPress} />
           ),
         }}
       />
@@ -192,11 +184,7 @@ export function NativeStackHeaderCustomization({
           headerStyle: { backgroundColor: 'papayawhip' },
           headerBackVisible: true,
           headerLeft: ({ tintColor }) => (
-            <Appbar.Action
-              color={tintColor as string}
-              icon="music"
-              onPress={onPress}
-            />
+            <Appbar.Action color={tintColor} icon="music" onPress={onPress} />
           ),
         }}
       />

diff --git a/example/src/Screens/Static.tsx b/example/src/Screens/Static.tsx
@@ -6,13 +6,7 @@ import {
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
-import {
-  ColorValue,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { Button } from 'react-native-paper';
 
 import { Albums } from '../Shared/Albums';
@@ -21,7 +15,7 @@ import { Contacts } from '../Shared/Contacts';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
-  ({ color, size }: { color: ColorValue; size: number }) =>
+  ({ color, size }: { color: string; size: number }) =>
     <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 const ChatShownContext = React.createContext({

diff --git a/example/src/Screens/TabView/TabBarIcon.tsx b/example/src/Screens/TabView/TabBarIcon.tsx
@@ -1,6 +1,6 @@
 import { Ionicons } from '@expo/vector-icons';
 import * as React from 'react';
-import { ColorValue, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import {
   NavigationState,
   SceneMap,
@@ -34,13 +34,9 @@ export const TabBarIcon = () => {
     { key: 'article', icon: 'md-list' },
   ]);
 
-  const renderIcon = ({
-    route,
-    color,
-  }: {
-    route: Route;
-    color: ColorValue;
-  }) => <Ionicons name={route.icon} size={24} color={color} />;
+  const renderIcon = ({ route, color }: { route: Route; color: string }) => (
+    <Ionicons name={route.icon} size={24} color={color} />
+  );
 
   const renderTabBar = (
     props: SceneRendererProps & { navigationState: State }

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -37,7 +37,6 @@ import {
   Divider,
   List,
   Provider as PaperProvider,
-  Theme,
 } from 'react-native-paper';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -123,7 +122,7 @@ export function App() {
   const isLargeScreen = dimensions.width >= 1024;
 
   return (
-    <PaperProvider theme={paperTheme as Theme}>
+    <PaperProvider theme={paperTheme}>
       <StatusBar
         translucent
         barStyle={theme.dark ? 'light-content' : 'dark-content'}

diff --git a/packages/bottom-tabs/package.json b/packages/bottom-tabs/package.json
@@ -50,7 +50,7 @@
     "react-native": "0.71.8",
     "react-native-builder-bob": "^0.21.0",
     "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.25.0",
+    "react-native-screens": "~3.20.0",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {

diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -11,7 +11,6 @@ import type {
 import type * as React from 'react';
 import type {
   Animated,
-  ColorValue,
   GestureResponderEvent,
   StyleProp,
   TextStyle,
@@ -100,7 +99,7 @@ export type BottomTabNavigationOptions = HeaderOptions & {
     | string
     | ((props: {
         focused: boolean;
-        color: ColorValue;
+        color: string;
         position: LabelPosition;
         children: string;
       }) => React.ReactNode);
@@ -135,7 +134,7 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    */
   tabBarIcon?: (props: {
     focused: boolean;
-    color: ColorValue;
+    color: string;
     size: number;
   }) => React.ReactNode;
 

diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -2,7 +2,6 @@ import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import React from 'react';
 import {
-  ColorValue,
   GestureResponderEvent,
   Platform,
   Pressable,
@@ -44,7 +43,7 @@ type Props = {
     | string
     | ((props: {
         focused: boolean;
-        color: ColorValue;
+        color: string;
         position: LabelPosition;
         children: string;
       }) => React.ReactNode);
@@ -54,7 +53,7 @@ type Props = {
   icon: (props: {
     focused: boolean;
     size: number;
-    color: ColorValue;
+    color: string;
   }) => React.ReactNode;
   /**
    * Text to show in a badge on the tab icon.

diff --git a/packages/bottom-tabs/src/views/TabBarIcon.tsx b/packages/bottom-tabs/src/views/TabBarIcon.tsx
@@ -1,7 +1,6 @@
 import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
-  ColorValue,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -18,11 +17,11 @@ type Props = {
   badgeStyle?: StyleProp<TextStyle>;
   activeOpacity: number;
   inactiveOpacity: number;
-  activeTintColor: ColorValue;
-  inactiveTintColor: ColorValue;
+  activeTintColor: string;
+  inactiveTintColor: string;
   renderIcon: (props: {
     focused: boolean;
-    color: ColorValue;
+    color: string;
     size: number;
   }) => React.ReactNode;
   style: StyleProp<ViewStyle>;

diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -58,7 +58,7 @@
     "react-native-gesture-handler": "~2.9.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.25.0",
+    "react-native-screens": "~3.20.0",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {

diff --git a/packages/drawer/src/types.tsx b/packages/drawer/src/types.tsx
@@ -9,7 +9,7 @@ import type {
   Route,
   RouteProp,
 } from '@react-navigation/native';
-import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type {
   PanGestureHandler,
   PanGestureHandlerProperties,
@@ -77,13 +77,13 @@ export type DrawerNavigationOptions = HeaderOptions & {
    */
   drawerLabel?:
     | string
-    | ((props: { color: ColorValue; focused: boolean }) => React.ReactNode);
+    | ((props: { color: string; focused: boolean }) => React.ReactNode);
 
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
    */
   drawerIcon?: (props: {
-    color: ColorValue;
+    color: string;
     size: number;
     focused: boolean;
   }) => React.ReactNode;

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -3,7 +3,6 @@ import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import {
-  ColorValue,
   Platform,
   StyleProp,
   StyleSheet,
@@ -27,14 +26,14 @@ type Props = {
    */
   label:
     | string
-    | ((props: { focused: boolean; color: ColorValue }) => React.ReactNode);
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
   /**
    * Icon to display for the `DrawerItem`.
    */
   icon?: (props: {
     focused: boolean;
     size: number;
-    color: ColorValue;
+    color: string;
   }) => React.ReactNode;
   /**
    * Whether to highlight the drawer item as active.

diff --git a/packages/elements/src/Header/HeaderTitle.tsx b/packages/elements/src/Header/HeaderTitle.tsx
@@ -2,7 +2,6 @@ import { useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
-  ColorValue,
   Platform,
   StyleProp,
   StyleSheet,
@@ -11,7 +10,7 @@ import {
 } from 'react-native';
 
 type Props = Omit<TextProps, 'style'> & {
-  tintColor?: ColorValue;
+  tintColor?: string;
   children?: string;
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };

diff --git a/packages/elements/src/MissingIcon.tsx b/packages/elements/src/MissingIcon.tsx
@@ -1,14 +1,8 @@
 import * as React from 'react';
-import {
-  ColorValue,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-} from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
 
 type Props = {
-  color?: ColorValue;
+  color?: string;
   size?: number;
   style?: StyleProp<TextStyle>;
 };

diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -1,6 +1,5 @@
 import type {
   Animated,
-  ColorValue,
   LayoutChangeEvent,
   StyleProp,
   TextStyle,
@@ -179,7 +178,7 @@ export type HeaderBackButtonProps = HeaderButtonProps & {
   /**
    * Function which returns a React Element to display custom image in header's back button.
    */
-  backImage?: (props: { tintColor: ColorValue }) => React.ReactNode;
+  backImage?: (props: { tintColor: string }) => React.ReactNode;
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.

diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -10,7 +10,6 @@ import type {
 } from '@react-navigation/native';
 import type React from 'react';
 import type {
-  ColorValue,
   PressableAndroidRippleConfig,
   StyleProp,
   TextStyle,
@@ -86,7 +85,7 @@ export type MaterialTopTabNavigationOptions = {
     | string
     | ((props: {
         focused: boolean;
-        color: ColorValue;
+        color: string;
         children: string;
       }) => React.ReactNode);
 
@@ -109,10 +108,7 @@ export type MaterialTopTabNavigationOptions = {
   /**
    * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
-  tabBarIcon?: (props: {
-    focused: boolean;
-    color: ColorValue;
-  }) => React.ReactNode;
+  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
 
   /**
    * Whether the tab icon should be visible. Defaults to `false`.

diff --git a/packages/native-stack/package.json b/packages/native-stack/package.json
@@ -53,7 +53,7 @@
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-builder-bob": "^0.21.0",
-    "react-native-screens": "~3.25.0",
+    "react-native-screens": "~3.20.0",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {