From 64734e7bc0d7f203d8e5db6abcc9a88157a5f16c Mon Sep 17 00:00:00 2001 From: Davyd NRB <4661784+retyui@users.noreply.github.com> Date: Sat, 2 Sep 2023 22:48:40 +0200 Subject: [PATCH] fix: Allow to use `PlatformColor` in the theme (#11570) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix: https://github.com/react-navigation/react-navigation/issues/11481 Co-authored-by: Michał Osadnik --- example/package.json | 2 +- example/src/Screens/BottomTabs.tsx | 4 ++-- .../NativeStackHeaderCustomization.tsx | 22 ++++++++++++++----- example/src/Screens/Static.tsx | 10 +++++++-- example/src/Screens/TabView/TabBarIcon.tsx | 12 ++++++---- example/src/index.tsx | 3 ++- packages/bottom-tabs/package.json | 2 +- packages/bottom-tabs/src/types.tsx | 5 +++-- .../bottom-tabs/src/views/BottomTabItem.tsx | 5 +++-- packages/bottom-tabs/src/views/TabBarIcon.tsx | 7 +++--- packages/drawer/package.json | 2 +- packages/drawer/src/types.tsx | 6 ++--- packages/drawer/src/views/DrawerItem.tsx | 5 +++-- packages/elements/src/Header/HeaderTitle.tsx | 3 ++- packages/elements/src/MissingIcon.tsx | 10 +++++++-- packages/elements/src/types.tsx | 3 ++- packages/material-top-tabs/src/types.tsx | 8 +++++-- packages/native-stack/package.json | 2 +- packages/native-stack/src/types.tsx | 7 +++--- packages/native/src/types.tsx | 13 ++++++----- packages/react-native-tab-view/src/TabBar.tsx | 7 +++--- .../react-native-tab-view/src/TabBarItem.tsx | 9 ++++---- .../src/TabBarItemLabel.tsx | 4 ++-- packages/stack/package.json | 2 +- yarn.lock | 18 +++++++-------- 25 files changed, 107 insertions(+), 64 deletions(-) diff --git a/example/package.json b/example/package.json index fc41b2b64b..4ca4af2f16 100644 --- 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 index 88d17bb407..8800723851 100644 --- 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['name']) => - ({ color, size }: { color: string; size: number }) => + ({ color, size }: { color: ColorValue; size: number }) => ; type BottomTabParams = { diff --git a/example/src/Screens/NativeStackHeaderCustomization.tsx b/example/src/Screens/NativeStackHeaderCustomization.tsx index 96490a3f27..336ac49fbf 100644 --- a/example/src/Screens/NativeStackHeaderCustomization.tsx +++ b/example/src/Screens/NativeStackHeaderCustomization.tsx @@ -140,7 +140,7 @@ export function NativeStackHeaderCustomization({ headerTintColor: 'white', headerTitle: ({ tintColor }) => ( @@ -148,13 +148,17 @@ export function NativeStackHeaderCustomization({ headerLeft: ({ tintColor, canGoBack }) => canGoBack ? ( ) : null, headerRight: ({ tintColor }) => ( - + ), headerBackground: () => ( ( - + ), }} /> @@ -184,7 +192,11 @@ export function NativeStackHeaderCustomization({ headerStyle: { backgroundColor: 'papayawhip' }, headerBackVisible: true, headerLeft: ({ tintColor }) => ( - + ), }} /> diff --git a/example/src/Screens/Static.tsx b/example/src/Screens/Static.tsx index 826925fc5b..471cc91ed6 100644 --- 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['name']) => - ({ color, size }: { color: string; size: number }) => + ({ color, size }: { color: ColorValue; size: number }) => ; const ChatShownContext = React.createContext({ diff --git a/example/src/Screens/TabView/TabBarIcon.tsx b/example/src/Screens/TabView/TabBarIcon.tsx index c7000520c0..56a163bdb5 100644 --- 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 }) => ( - - ); + const renderIcon = ({ + route, + color, + }: { + route: Route; + color: ColorValue; + }) => ; const renderTabBar = ( props: SceneRendererProps & { navigationState: State } diff --git a/example/src/index.tsx b/example/src/index.tsx index c55e9439c1..12d423411e 100644 --- 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 ( - + 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 index b4dec2dc2d..480779e27c 100644 --- 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 index 1a780fe071..b1c23f5683 100644 --- 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; 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; diff --git a/packages/drawer/package.json b/packages/drawer/package.json index ce0450d3a3..96f08c4306 100644 --- 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 index a19528ab34..2fca9fdcc2 100644 --- 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 index 88ea3ef10e..face6541f1 100644 --- 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 index e3833b9c65..a345fa26cb 100644 --- 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 & { - tintColor?: string; + tintColor?: ColorValue; children?: string; style?: Animated.WithAnimatedValue>; }; diff --git a/packages/elements/src/MissingIcon.tsx b/packages/elements/src/MissingIcon.tsx index e2188a72b6..5239078280 100644 --- 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; }; diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx index c76c1cea8e..df902ba2c5 100644 --- 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 index 81d1bbe4ca..e0363d8fea 100644 --- 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 index bc94774a45..7dd7e77d5a 100644 --- 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": { diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx index 206fb0be52..92728d0986 100644 --- a/packages/native-stack/src/types.tsx +++ b/packages/native-stack/src/types.tsx @@ -11,6 +11,7 @@ import type { StackRouterOptions, } from '@react-navigation/native'; import type { + ColorValue, ImageSourcePropType, StyleProp, TextStyle, @@ -92,7 +93,7 @@ export type HeaderButtonProps = { /** * Tint color for the header. */ - tintColor?: string; + tintColor?: ColorValue; /** * Whether it's possible to navigate back in stack. */ @@ -282,10 +283,10 @@ export type NativeStackNavigationOptions = { /** * Tint color for the header. */ - tintColor?: string; + tintColor?: ColorValue; }) => React.ReactNode); /** - * How to align the the header title. + * How to align the header title. * Defaults to `left` on platforms other than iOS. * * Not supported on iOS. It's always `center` on iOS and cannot be changed. diff --git a/packages/native/src/types.tsx b/packages/native/src/types.tsx index 668adc6f25..a5c398e9e7 100644 --- a/packages/native/src/types.tsx +++ b/packages/native/src/types.tsx @@ -5,6 +5,7 @@ import type { PathConfigMap, Route, } from '@react-navigation/core'; +import type { ColorValue } from 'react-native'; type FontStyle = { fontFamily: string; @@ -25,12 +26,12 @@ type FontStyle = { export type Theme = { dark: boolean; colors: { - primary: string; - background: string; - card: string; - text: string; - border: string; - notification: string; + primary: ColorValue; + background: ColorValue; + card: ColorValue; + text: ColorValue; + border: ColorValue; + notification: ColorValue; }; fonts: { regular: FontStyle; diff --git a/packages/react-native-tab-view/src/TabBar.tsx b/packages/react-native-tab-view/src/TabBar.tsx index 17ddebd386..e289748b0f 100644 --- a/packages/react-native-tab-view/src/TabBar.tsx +++ b/packages/react-native-tab-view/src/TabBar.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Animated, + ColorValue, FlatList, I18nManager, LayoutChangeEvent, @@ -32,7 +33,7 @@ export type Props = SceneRendererProps & { navigationState: NavigationState; scrollEnabled?: boolean; bounces?: boolean; - activeColor?: string; + activeColor?: ColorValue; inactiveColor?: string; pressColor?: string; pressOpacity?: number; @@ -43,13 +44,13 @@ export type Props = SceneRendererProps & { renderLabel?: ( scene: Scene & { focused: boolean; - color: string; + color: ColorValue; } ) => React.ReactNode; renderIcon?: ( scene: Scene & { focused: boolean; - color: string; + color: ColorValue; } ) => React.ReactNode; renderBadge?: (scene: Scene) => React.ReactNode; diff --git a/packages/react-native-tab-view/src/TabBarItem.tsx b/packages/react-native-tab-view/src/TabBarItem.tsx index c1c0d77114..e6f344368a 100644 --- a/packages/react-native-tab-view/src/TabBarItem.tsx +++ b/packages/react-native-tab-view/src/TabBarItem.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Animated, + ColorValue, LayoutChangeEvent, PressableAndroidRippleConfig, StyleProp, @@ -19,7 +20,7 @@ export type Props = { position: Animated.AnimatedInterpolation; route: T; navigationState: NavigationState; - activeColor?: string; + activeColor?: ColorValue; inactiveColor?: string; pressColor?: string; pressOpacity?: number; @@ -30,12 +31,12 @@ export type Props = { renderLabel?: (scene: { route: T; focused: boolean; - color: string; + color: ColorValue; }) => React.ReactNode; renderIcon?: (scene: { route: T; focused: boolean; - color: string; + color: ColorValue; }) => React.ReactNode; renderBadge?: (scene: Scene) => React.ReactNode; onLayout?: (event: LayoutChangeEvent) => void; @@ -177,7 +178,7 @@ const TabBarItemInternal = ({ const renderLabel = renderLabelCustom ? renderLabelCustom - : (labelProps: { color: string }) => ( + : (labelProps: { color: ColorValue }) => ( ; icon: React.ReactNode; diff --git a/packages/stack/package.json b/packages/stack/package.json index 6def9eed5b..78bf4c250f 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -55,7 +55,7 @@ "react-native-builder-bob": "^0.21.0", "react-native-gesture-handler": "~2.9.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/yarn.lock b/yarn.lock index 12e20439ab..7e3c2387c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4368,7 +4368,7 @@ __metadata: 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: "@react-navigation/native": ^6.0.0 @@ -4441,7 +4441,7 @@ __metadata: 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 use-latest-callback: ^0.1.5 peerDependencies: @@ -4522,7 +4522,7 @@ __metadata: 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 react-test-renderer: 18.1.0 serve: ^14.1.2 @@ -4567,7 +4567,7 @@ __metadata: 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 warn-once: ^0.1.1 peerDependencies: @@ -4631,7 +4631,7 @@ __metadata: react-native-builder-bob: ^0.21.0 react-native-gesture-handler: ~2.9.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: "@react-navigation/native": ^6.0.0 @@ -17186,16 +17186,16 @@ __metadata: languageName: node linkType: hard -"react-native-screens@npm:~3.20.0": - version: 3.20.0 - resolution: "react-native-screens@npm:3.20.0" +"react-native-screens@npm:~3.25.0": + version: 3.25.0 + resolution: "react-native-screens@npm:3.25.0" dependencies: react-freeze: ^1.0.0 warn-once: ^0.1.0 peerDependencies: react: "*" react-native: "*" - checksum: 94ab21378ee82765d329ccb8c92f5ca7cb15df916496fac7ce9a03c45e22579715000dae9c16f0a7d734a8fc1c2d0569fd82ecb71119a0b56046b5ea7533e7c2 + checksum: 959e107091944ab1a01e8328f3094020f495f05c23509920922df1bf285942e9ed77e3769b560e1f3c47a9925a18ab4f66a56ff5817ef5f220735e30efe09401 languageName: node linkType: hard