fix: use PlatformColor instead of plain string for color related …

…props (#1846)

## Description

Fix: react-navigation/react-navigation#11481

## Changes

`react-natigation` use a `ScreenStackHeaderConfig` component in from
`react-native-screens`

see: `packages/native-stack/src/views/HeaderConfig.tsx`

During fixing
react-navigation/react-navigation#11481 it's
required to change types of `react-native-screens`

## Test code and steps to reproduce


1. Edit source code to force use PlatformColor
`./node_modules/@react-navigation/native-stack/src/views/HeaderConfig.tsx`

```tsx 
import {
ScreenStackHeaderConfig
} from "react-native-screens";
// ...
      <ScreenStackHeaderConfig
        titleColor={
          Platform.select({
            default: PlatformColor("systemGray4"),
            android: PlatformColor("@android:color/holo_orange_dark")
          })
        }
        backgroundColor={
          Platform.select({
            default: PlatformColor("systemTealColor"),
            android: PlatformColor("@android:color/holo_blue_bright")
          })
        }
```

**Result:**

Works well on Android and iOS

<img width="757" alt="Screenshot 2023-07-26 at 13 16 30"
src="https://github.com/software-mansion/react-native-screens/assets/4661784/588fc077-b8ac-4eeb-a0f3-be4dde58276c">


## Checklist

- [ ] Included code example that can be used to test this change
- [x] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes

src/native-stack/types.tsx

@@ -10,7 +10,7 @@ import {
   RouteProp,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import { ImageSourcePropType, StyleProp, ViewStyle, ColorValue } from 'react-native';
 import {
   ScreenProps,
   ScreenStackHeaderConfigProps,
@@ -157,7 +157,7 @@ export type NativeStackNavigationOptions = {
   /**
    * Function which returns a React Element to display in the center of the header.
    */
-  headerCenter?: (props: { tintColor?: string }) => React.ReactNode;
+  headerCenter?: (props: { tintColor?: ColorValue }) => React.ReactNode;
   /**
    * Boolean indicating whether to hide the back button in header.
    */
@@ -173,7 +173,7 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   headerLargeStyle?: {
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
   };
   /**
    * Boolean to set native property to prefer large title header (like in iOS setting).
@@ -202,16 +202,16 @@ export type NativeStackNavigationOptions = {
     fontFamily?: string;
     fontSize?: number;
     fontWeight?: string;
-    color?: string;
+    color?: ColorValue;
   };
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: (props: { tintColor?: string }) => React.ReactNode;
+  headerLeft?: (props: { tintColor?: ColorValue }) => React.ReactNode;
   /**
    * Function which returns a React Element to display on the right side of the header.
    */
-  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
+  headerRight?: (props: { tintColor?: ColorValue }) => React.ReactNode;
   /**
    * Whether to show the header.
    */
@@ -222,13 +222,13 @@ export type NativeStackNavigationOptions = {
    * - blurEffect
    */
   headerStyle?: {
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
     blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
   };
   /**
    * Tint color for the header. Changes the color of back button and title.
    */
-  headerTintColor?: string;
+  headerTintColor?: ColorValue;
   /**
    * String to display in the header as title. Defaults to scene `title`.
    */
@@ -244,7 +244,7 @@ export type NativeStackNavigationOptions = {
     fontFamily?: string;
     fontSize?: number;
     fontWeight?: string;
-    color?: string;
+    color?: ColorValue;
   };
   /**
    * A flag to that lets you opt out of insetting the header. You may want to
@@ -284,7 +284,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform android
    */
-  navigationBarColor?: string;
+  navigationBarColor?: ColorValue;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -406,7 +406,7 @@ export type NativeStackNavigationOptions = {
    *
    * @platform android
    */
-  statusBarColor?: string;
+  statusBarColor?: ColorValue;
   /**
    * Whether the status bar should be hidden on this screen. Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file on iOS. Defaults to `false`.
    */

src/types.tsx

@@ -5,6 +5,7 @@ import {
   View,
   TargetedEvent,
   TextInputFocusEventData,
+  ColorValue,
 } from 'react-native';
 
 export type SearchBarCommands = {
@@ -156,7 +157,7 @@ export interface ScreenProps extends ViewProps {
    *
    * @platform android
    */
-  navigationBarColor?: string;
+  navigationBarColor?: ColorValue;
   /**
    * Sets the visibility of the navigation bar. Defaults to `false`.
    *
@@ -328,7 +329,7 @@ export interface ScreenProps extends ViewProps {
    *
    * @platform android
    */
-  statusBarColor?: string;
+  statusBarColor?: ColorValue;
   /**
    * Whether the status bar should be hidden on this screen. Requires enabling (or deleting) `View controller-based status bar appearance` in your Info.plist file on iOS. Defaults to `false`.
    */
@@ -390,7 +391,7 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
   /**
    * Controls the color of the navigation header.
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
   /**
    * Title to display in the back button.
    * @platform ios.
@@ -423,7 +424,7 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
   /**
    * Controls the color of items rendered on the header. This includes back icon, back text (iOS only) and title text. If you want the title to have different color use titleColor property.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Whether the stack should be in rtl or ltr form.
    */
@@ -457,12 +458,12 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
   /**
    * Controls the color of the navigation header when the edge of any scrollable content reaches the matching edge of the navigation bar.
    */
-  largeTitleBackgroundColor?: string;
+  largeTitleBackgroundColor?: ColorValue;
   /**
    * Customize the color to be used for the large title. By default uses the titleColor property.
    * @platform ios
    */
-  largeTitleColor?: string;
+  largeTitleColor?: ColorValue;
   /**
    * Customize font family to be used for the large title.
    * @platform ios
@@ -497,7 +498,7 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
   /**
    * Allows for setting text color of the title.
    */
-  titleColor?: string;
+  titleColor?: ColorValue;
   /**
    * Customize font family to be used for the title.
    */
@@ -552,13 +553,13 @@ export interface SearchBarProps {
   /**
    * The search field background color
    */
-  barTintColor?: string;
+  barTintColor?: ColorValue;
   /**
    * The color for the cursor caret and cancel button text.
    *
    * @platform ios
    */
-  tintColor?: string;
+  tintColor?: ColorValue;
   /**
    * The text to be used instead of default `Cancel` button text
    *
@@ -591,7 +592,7 @@ export interface SearchBarProps {
    */
   inputType?: 'text' | 'phone' | 'number' | 'email';
   /**
-   * Indicates whether to to obscure the underlying content
+   * Indicates whether to obscure the underlying content
    */
   obscureBackground?: boolean;
   /**
@@ -653,19 +654,19 @@ export interface SearchBarProps {
   /**
    * The search field text color
    */
-  textColor?: string;
+  textColor?: ColorValue;
   /**
    * The search hint text color
    *
    * @plaform android
    */
-  hintTextColor?: string;
+  hintTextColor?: ColorValue;
   /**
    * The search and close icon color shown in the header
    *
    * @plaform android
    */
-  headerIconColor?: string;
+  headerIconColor?: ColorValue;
   /**
    * Show the search hint icon when search bar is focused
    *