fix: Allow to use PlatformColor in the theme (#11570)

Fix: #11481 Co-authored-by: Michał Osadnik <micosa97@gmail.com>
react-navigation · Sep 2, 2023 · 64734e7 · 64734e7
1 parent 9ee55bc
commit 64734e7
Show file tree

Hide file tree

Showing 25 changed files with 107 additions and 64 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.20.0",
+    "react-native-screens": "~3.25.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 { ScrollView, StatusBar, StyleSheet } from 'react-native';
+import { ColorValue, 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: string; size: number }) =>
+  ({ color, size }: { color: ColorValue; 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,21 +140,25 @@ export function NativeStackHeaderCustomization({
           headerTintColor: 'white',
           headerTitle: ({ tintColor }) => (
             <Appbar.Action
-              color={tintColor}
+              color={tintColor as string}
               icon="signal-5g"
               onPress={onPress}
             />
           ),
           headerLeft: ({ tintColor, canGoBack }) =>
             canGoBack ? (
               <Appbar.Action
-                color={tintColor}
+                color={tintColor as string}
                 icon="arrow-left-thick"
                 onPress={navigation.goBack}
               />
             ) : null,
           headerRight: ({ tintColor }) => (
-            <Appbar.Action color={tintColor} icon="music" onPress={onPress} />
+            <Appbar.Action
+              color={tintColor as string}
+              icon="music"
+              onPress={onPress}
+            />
           ),
           headerBackground: () => (
             <Image
@@ -171,7 +175,11 @@ export function NativeStackHeaderCustomization({
         options={{
           title: 'Feed',
           headerLeft: ({ tintColor }) => (
-            <Appbar.Action color={tintColor} icon="spa" onPress={onPress} />
+            <Appbar.Action
+              color={tintColor as string}
+              icon="spa"
+              onPress={onPress}
+            />
           ),
         }}
       />
@@ -184,7 +192,11 @@ export function NativeStackHeaderCustomization({
           headerStyle: { backgroundColor: 'papayawhip' },
           headerBackVisible: true,
           headerLeft: ({ tintColor }) => (
-            <Appbar.Action color={tintColor} icon="music" onPress={onPress} />
+            <Appbar.Action
+              color={tintColor as string}
+              icon="music"
+              onPress={onPress}
+            />
           ),
         }}
       />

diff --git a/example/src/Screens/Static.tsx b/example/src/Screens/Static.tsx
@@ -6,7 +6,13 @@ import {
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
-import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import {
+  ColorValue,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { Button } from 'react-native-paper';
 
 import { Albums } from '../Shared/Albums';
@@ -15,7 +21,7 @@ import { Contacts } from '../Shared/Contacts';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
-  ({ color, size }: { color: string; size: number }) =>
+  ({ color, size }: { color: ColorValue; 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 { StyleSheet } from 'react-native';
+import { ColorValue, StyleSheet } from 'react-native';
 import {
   NavigationState,
   SceneMap,
@@ -34,9 +34,13 @@ export const TabBarIcon = () => {
     { key: 'article', icon: 'md-list' },
   ]);
 
-  const renderIcon = ({ route, color }: { route: Route; color: string }) => (
-    <Ionicons name={route.icon} size={24} color={color} />
-  );
+  const renderIcon = ({
+    route,
+    color,
+  }: {
+    route: Route;
+    color: ColorValue;
+  }) => <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,6 +37,7 @@ import {
   Divider,
   List,
   Provider as PaperProvider,
+  Theme,
 } from 'react-native-paper';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -122,7 +123,7 @@ export function App() {
   const isLargeScreen = dimensions.width >= 1024;
 
   return (
-    <PaperProvider theme={paperTheme}>
+    <PaperProvider theme={paperTheme as Theme}>
       <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.20.0",
+    "react-native-screens": "~3.25.0",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {

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

diff --git a/packages/bottom-tabs/src/views/BottomTabItem.tsx b/packages/bottom-tabs/src/views/BottomTabItem.tsx
@@ -2,6 +2,7 @@ import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import React from 'react';
 import {
+  ColorValue,
   GestureResponderEvent,
   Platform,
   Pressable,
@@ -43,7 +44,7 @@ type Props = {
     | string
     | ((props: {
         focused: boolean;
-        color: string;
+        color: ColorValue;
         position: LabelPosition;
         children: string;
       }) => React.ReactNode);
@@ -53,7 +54,7 @@ type Props = {
   icon: (props: {
     focused: boolean;
     size: number;
-    color: string;
+    color: ColorValue;
   }) => 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,6 +1,7 @@
 import type { Route } from '@react-navigation/native';
 import React from 'react';
 import {
+  ColorValue,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -17,11 +18,11 @@ type Props = {
   badgeStyle?: StyleProp<TextStyle>;
   activeOpacity: number;
   inactiveOpacity: number;
-  activeTintColor: string;
-  inactiveTintColor: string;
+  activeTintColor: ColorValue;
+  inactiveTintColor: ColorValue;
   renderIcon: (props: {
     focused: boolean;
-    color: string;
+    color: ColorValue;
     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.20.0",
+    "react-native-screens": "~3.25.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 { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type {
   PanGestureHandler,
   PanGestureHandlerProperties,
@@ -77,13 +77,13 @@ export type DrawerNavigationOptions = HeaderOptions & {
    */
   drawerLabel?:
     | string
-    | ((props: { color: string; focused: boolean }) => React.ReactNode);
+    | ((props: { color: ColorValue; 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: string;
+    color: ColorValue;
     size: number;
     focused: boolean;
   }) => React.ReactNode;

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -3,6 +3,7 @@ import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
 import Color from 'color';
 import * as React from 'react';
 import {
+  ColorValue,
   Platform,
   StyleProp,
   StyleSheet,
@@ -26,14 +27,14 @@ type Props = {
    */
   label:
     | string
-    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+    | ((props: { focused: boolean; color: ColorValue }) => React.ReactNode);
   /**
    * Icon to display for the `DrawerItem`.
    */
   icon?: (props: {
     focused: boolean;
     size: number;
-    color: string;
+    color: ColorValue;
   }) => 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,6 +2,7 @@ import { useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   Platform,
   StyleProp,
   StyleSheet,
@@ -10,7 +11,7 @@ import {
 } from 'react-native';
 
 type Props = Omit<TextProps, 'style'> & {
-  tintColor?: string;
+  tintColor?: ColorValue;
   children?: string;
   style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };

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

diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -1,5 +1,6 @@
 import type {
   Animated,
+  ColorValue,
   LayoutChangeEvent,
   StyleProp,
   TextStyle,
@@ -178,7 +179,7 @@ export type HeaderBackButtonProps = HeaderButtonProps & {
   /**
    * Function which returns a React Element to display custom image in header's back button.
    */
-  backImage?: (props: { tintColor: string }) => React.ReactNode;
+  backImage?: (props: { tintColor: ColorValue }) => 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,6 +10,7 @@ import type {
 } from '@react-navigation/native';
 import type React from 'react';
 import type {
+  ColorValue,
   PressableAndroidRippleConfig,
   StyleProp,
   TextStyle,
@@ -85,7 +86,7 @@ export type MaterialTopTabNavigationOptions = {
     | string
     | ((props: {
         focused: boolean;
-        color: string;
+        color: ColorValue;
         children: string;
       }) => React.ReactNode);
 
@@ -108,7 +109,10 @@ 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: string }) => React.ReactNode;
+  tabBarIcon?: (props: {
+    focused: boolean;
+    color: ColorValue;
+  }) => 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.20.0",
+    "react-native-screens": "~3.25.0",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {