From 589391187ea5f7a6751216bd0a95ab014f5fa406 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Mon, 25 Nov 2024 17:54:38 +0100
Subject: [PATCH] refactor: move tintColor to props to avoid react-native-web
 warnings

---
 packages/drawer/src/views/DrawerToggleButton.tsx    | 3 ++-
 packages/elements/src/Header/HeaderBackButton.tsx   | 4 ++--
 packages/elements/src/Header/HeaderIcon.tsx         | 8 ++------
 packages/elements/src/Header/HeaderSearchBar.tsx    | 3 ++-
 packages/native-stack/src/views/NativeStackView.tsx | 6 ++----
 5 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/drawer/src/views/DrawerToggleButton.tsx b/packages/drawer/src/views/DrawerToggleButton.tsx
index d27133bf84..36acbef196 100644
--- a/packages/drawer/src/views/DrawerToggleButton.tsx
+++ b/packages/drawer/src/views/DrawerToggleButton.tsx
@@ -36,10 +36,11 @@ export function DrawerToggleButton({
       })}
     >
       <Image
-        style={[styles.icon, tintColor ? { tintColor } : null]}
         resizeMode="contain"
         source={toggleDrawerIcon}
         fadeDuration={0}
+        tintColor={tintColor}
+        style={styles.icon}
       />
     </PlatformPressable>
   );
diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
index 4e7e2d974f..467a4356b1 100644
--- a/packages/elements/src/Header/HeaderBackButton.tsx
+++ b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -51,12 +51,12 @@ export function HeaderBackButton({
     } else {
       return (
         <HeaderIcon
+          source={backIcon}
+          tintColor={tintColor}
           style={[
             styles.icon,
             displayMode !== 'minimal' && styles.iconWithLabel,
-            Boolean(tintColor) && { tintColor },
           ]}
-          source={backIcon}
         />
       );
     }
diff --git a/packages/elements/src/Header/HeaderIcon.tsx b/packages/elements/src/Header/HeaderIcon.tsx
index 6aaec197ef..bd308269e3 100644
--- a/packages/elements/src/Header/HeaderIcon.tsx
+++ b/packages/elements/src/Header/HeaderIcon.tsx
@@ -10,12 +10,8 @@ export function HeaderIcon({ source, style, ...rest }: ImageProps) {
       source={source}
       resizeMode="contain"
       fadeDuration={0}
-      style={[
-        styles.icon,
-        direction === 'rtl' && styles.flip,
-        { tintColor: colors.text },
-        style,
-      ]}
+      tintColor={colors.text}
+      style={[styles.icon, direction === 'rtl' && styles.flip, style]}
       {...rest}
     />
   );
diff --git a/packages/elements/src/Header/HeaderSearchBar.tsx b/packages/elements/src/Header/HeaderSearchBar.tsx
index 8cabf587f1..b1e0e7b346 100644
--- a/packages/elements/src/Header/HeaderSearchBar.tsx
+++ b/packages/elements/src/Header/HeaderSearchBar.tsx
@@ -196,7 +196,8 @@ function HeaderSearchBarInternal(
             <Image
               source={clearIcon}
               resizeMode="contain"
-              style={[styles.clearIcon, { tintColor: colors.text }]}
+              tintColor={colors.text}
+              style={styles.clearIcon}
             />
           </PlatformPressable>
         ) : null}
diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
index 3597b61573..cdfbb4bcff 100644
--- a/packages/native-stack/src/views/NativeStackView.tsx
+++ b/packages/native-stack/src/views/NativeStackView.tsx
@@ -135,10 +135,8 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
                                       <Image
                                         source={headerBackImageSource}
                                         resizeMode="contain"
-                                        style={[
-                                          styles.backImage,
-                                          { tintColor },
-                                        ]}
+                                        tintColor={tintColor}
+                                        style={styles.backImage}
                                       />
                                     )
                                   : undefined