From 9a4123c4ce958e75218a605961c66ba299a6fd69 Mon Sep 17 00:00:00 2001
From: hublot <hublot@aliyun.com>
Date: Thu, 16 Nov 2023 10:01:22 +0800
Subject: [PATCH] style: ios search bar icon and placeholder color (#3802)

---
 packages/components/src/SearchBar/index.tsx | 10 ++++++---
 patches/react-native-screens+3.26.0.patch   | 25 ++++++++++++++++++---
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/SearchBar/index.tsx b/packages/components/src/SearchBar/index.tsx
index 5a71100..9f03793 100644
--- a/packages/components/src/SearchBar/index.tsx
+++ b/packages/components/src/SearchBar/index.tsx
@@ -6,8 +6,12 @@ import type { IInputProps } from '../Input';
 
 type ISearchBarProps = IInputProps;
 
-export function SearchBar({ onChangeText, ...rest }: ISearchBarProps) {
-  const [value, setValue] = useState('');
+export function SearchBar({
+  value: defaultValue,
+  onChangeText,
+  ...rest
+}: ISearchBarProps) {
+  const [value, setValue] = useState(defaultValue ?? '');
 
   const handleChange = useCallback(
     (text: string) => {
@@ -26,7 +30,7 @@ export function SearchBar({ onChangeText, ...rest }: ISearchBarProps) {
       value={value}
       onChangeText={handleChange}
       leftIconName="SearchOutline"
-      {...(value.length > 0 && {
+      {...(value?.length && {
         addOns: [
           {
             iconName: 'XCircleOutline',
diff --git a/patches/react-native-screens+3.26.0.patch b/patches/react-native-screens+3.26.0.patch
index 8df679c..32e9447 100644
--- a/patches/react-native-screens+3.26.0.patch
+++ b/patches/react-native-screens+3.26.0.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt
-index 401d57e..3b1ca6a 100644
+index 401d57e..fc18e6a 100644
 --- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt
 +++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.kt
 @@ -14,6 +14,7 @@ import com.facebook.react.ReactRootView
@@ -240,7 +240,7 @@ index f10671e..20e0d45 100644
      }
    }
 diff --git a/node_modules/react-native-screens/ios/RNSSearchBar.mm b/node_modules/react-native-screens/ios/RNSSearchBar.mm
-index 94475b7..4829c45 100644
+index 94475b7..862f904 100644
 --- a/node_modules/react-native-screens/ios/RNSSearchBar.mm
 +++ b/node_modules/react-native-screens/ios/RNSSearchBar.mm
 @@ -195,6 +195,9 @@ - (void)hideCancelButton
@@ -252,4 +252,23 @@ index 94475b7..4829c45 100644
 +    _controller.active = NO;
    } else {
      [_controller.searchBar setShowsCancelButton:NO animated:YES];
-   }
\ No newline at end of file
+   }
+@@ -304,6 +307,18 @@ - (void)setText:(NSString *)text
+   [_controller.searchBar setText:text];
+ }
+ 
++// Set the color of the `searchIcon` and `searchPlaceholder` by `textColor`
++- (void)didSetProps:(NSArray<NSString *> *)changedProps {
++  if (@available(iOS 13.0, *)) {
++    UIColor *placeholderColor = [_controller.searchBar.searchTextField.textColor colorWithAlphaComponent:0.5];
++    _controller.searchBar.searchTextField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:_controller.searchBar.placeholder attributes:@{
++      NSForegroundColorAttributeName: placeholderColor,
++    }];
++    [_controller.searchBar.searchTextField.leftView setTintColor:placeholderColor];
++    [_controller.searchBar.searchTextField.rightView setTintColor:placeholderColor];
++  }
++}
++
+ #pragma mark-- Fabric specific
+ 
+ #ifdef RCT_NEW_ARCH_ENABLED