feat(android): Add new properties to search view

Example/src/screens/SearchBar.tsx

@@ -35,6 +35,13 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
   const [search, setSearch] = useState('');
   const [placeholder, setPlaceholder] = useState('Search for something...');
   const [barTintColor, setBarTintColor] = useState<BarTintColor>('white');
+  const [hintTextColor, setHintTextColor] = useState<BarTintColor>('orange');
+  const [headerIconColor, setHeaderIconColor] = useState<BarTintColor>(
+    'orange'
+  );
+  const [shouldShowHintSearchIcon, setShouldShowHintSearchIcon] = useState(
+    true
+  );
   const [hideWhenScrolling, setHideWhenScrolling] = useState(false);
   const [obscureBackground, setObscureBackground] = useState(false);
   const [hideNavigationBar, setHideNavigationBar] = useState(false);
@@ -47,6 +54,9 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     navigation.setOptions({
       searchBar: {
         barTintColor,
+        hintTextColor,
+        headerIconColor,
+        shouldShowHintSearchIcon,
         hideWhenScrolling,
         obscureBackground,
         hideNavigationBar,
@@ -91,6 +101,9 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     search,
     placeholder,
     barTintColor,
+    hintTextColor,
+    headerIconColor,
+    shouldShowHintSearchIcon,
     hideWhenScrolling,
     obscureBackground,
     hideNavigationBar,
@@ -143,6 +156,23 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
         onValueChange={setInputType}
         items={['text', 'number', 'email', 'phone']}
       />
+      <SettingsPicker<BarTintColor>
+        label="Text hint color"
+        value={hintTextColor}
+        onValueChange={setHintTextColor}
+        items={['lightcoral', 'orange', 'darkslategray', 'white']}
+      />
+      <SettingsPicker<BarTintColor>
+        label="Header icon color"
+        value={headerIconColor}
+        onValueChange={setHeaderIconColor}
+        items={['lightcoral', 'orange', 'darkslategray', 'white']}
+      />
+      <SettingsSwitch
+        label="Show search hint icon"
+        value={shouldShowHintSearchIcon}
+        onValueChange={setShouldShowHintSearchIcon}
+      />
       <Text style={styles.heading}>Other</Text>
       <Button
         onPress={() => navigation.navigate('Search')}

android/src/main/java/com/swmansion/rnscreens/SearchBarManager.kt

@@ -65,14 +65,31 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
 
     @ReactProp(name = "placeholder")
     fun setPlaceholder(view: SearchBarView, placeholder: String?) {
-        view.placeholder = placeholder
+        if (placeholder != null) {
+            view.placeholder = placeholder
+        }
     }
 
     @ReactProp(name = "textColor", customType = "Color")
     fun setTextColor(view: SearchBarView, color: Int?) {
         view.textColor = color
     }
 
+    @ReactProp(name = "headerIconColor", customType = "Color")
+    fun setHeaderIconColor(view: SearchBarView, color: Int?) {
+        view.headerIconColor = color
+    }
+
+    @ReactProp(name = "hintTextColor", customType = "Color")
+    fun setHintTextColor(view: SearchBarView, color: Int?) {
+        view.hintTextColor = color
+    }
+
+    @ReactProp(name = "shouldShowHintSearchIcon")
+    fun setShouldShowHintSearchIcon(view: SearchBarView, shouldShowHintSearchIcon: Boolean?) {
+        view.shouldShowHintSearchIcon = shouldShowHintSearchIcon ?: true
+    }
+
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
         return MapBuilder.builder<String, Any>()
             .put("onChangeText", MapBuilder.of("registrationName", "onChangeText"))

android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt

@@ -15,9 +15,12 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
     var autoCapitalize: SearchBarAutoCapitalize = SearchBarAutoCapitalize.NONE
     var textColor: Int? = null
     var tintColor: Int? = null
-    var placeholder: String? = null
+    var headerIconColor: Int? = null
+    var hintTextColor: Int? = null
+    var placeholder: String = ""
     var shouldOverrideBackButton: Boolean = true
     var autoFocus: Boolean = false
+    var shouldShowHintSearchIcon: Boolean = true
 
     private var mSearchViewFormatter: SearchViewFormatter? = null
 
@@ -45,9 +48,11 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
             }
 
             searchView.inputType = inputType.toAndroidInputType(autoCapitalize)
-            searchView.queryHint = placeholder
             mSearchViewFormatter?.setTextColor(textColor)
             mSearchViewFormatter?.setTintColor(tintColor)
+            mSearchViewFormatter?.setHeaderIconColor(headerIconColor)
+            mSearchViewFormatter?.setHintTextColor(hintTextColor)
+            mSearchViewFormatter?.setPlaceholder(placeholder, shouldShowHintSearchIcon)
             searchView.overrideBackAction = shouldOverrideBackButton
         }
     }

android/src/main/java/com/swmansion/rnscreens/SearchViewFormatter.kt

@@ -3,16 +3,22 @@ package com.swmansion.rnscreens
 import android.graphics.drawable.Drawable
 import android.view.View
 import android.widget.EditText
+import android.widget.ImageView
+import androidx.appcompat.R
 import androidx.appcompat.widget.SearchView
 
 class SearchViewFormatter(var searchView: SearchView) {
     private var mDefaultTextColor: Int? = null
     private var mDefaultTintBackground: Drawable? = null
 
     private val searchEditText
-        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_src_text) as? EditText
+        get() = searchView.findViewById<View>(R.id.search_src_text) as? EditText
     private val searchTextPlate
-        get() = searchView.findViewById<View>(androidx.appcompat.R.id.search_plate)
+        get() = searchView.findViewById<View>(R.id.search_plate)
+    private val searchIcon
+        get() = searchView.findViewById<ImageView>(R.id.search_button)
+    private val searchCloseIcon
+        get() = searchView.findViewById<ImageView>(R.id.search_close_btn)
 
     fun setTextColor(textColor: Int?) {
         val currentDefaultTextColor = mDefaultTextColor
@@ -37,4 +43,25 @@ class SearchViewFormatter(var searchView: SearchView) {
             searchTextPlate.background = currentDefaultTintColor
         }
     }
+
+    fun setHeaderIconColor(headerIconColor: Int?) {
+        headerIconColor?.let {
+            searchIcon.setColorFilter(it)
+            searchCloseIcon.setColorFilter(it)
+        }
+    }
+
+    fun setHintTextColor(hintTextColor: Int?) {
+        hintTextColor?.let {
+            searchEditText?.setHintTextColor(it)
+        }
+    }
+
+    fun setPlaceholder(placeholder: String, shouldShowHintSearchIcon: Boolean) {
+        if (shouldShowHintSearchIcon) {
+            searchView.queryHint = placeholder
+        } else {
+            searchEditText?.hint = placeholder
+        }
+    }
 }

createNativeStackNavigator/README.md

@@ -464,6 +464,18 @@ Defaults to an empty string.
 
 The search field text color.
 
+#### `hintTextColor`
+
+The search hint text color. (Android only)
+
+#### `headerIconColor`
+
+The search and close icon color shown in the header. (Android only)
+
+#### `shouldShowHintSearchIcon`
+
+Show the search hint icon when search bar is focused. (Android only)
+
 ### Helpers
 
 The stack navigator adds the following methods to the navigation prop:

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -269,7 +269,9 @@ To render a search bar use `ScreenStackHeaderSearchBarView` with `<SearchBar>` c
 - `onSearchButtonPress` - A callback that gets called when the search button is pressed. It receives the current text value of the search bar.
 - `placeholder` - Text displayed when search field is empty. Defaults to an empty string.
 - `textColor` - The search field text color.
-
+- `hintTextColor` - The search hint text color. (Android only)
+- `headerIconColor` - The search and close icon color shown in the header. (Android only)
+- `shouldShowHintSearchIcon` - Show the search hint icon when search bar is focused. (Android only)
 
 Below is a list of properties that can be set with `ScreenStackHeaderConfig` component:
 

native-stack/README.md

@@ -485,6 +485,18 @@ Defaults to an empty string.
 
 The search field text color.
 
+#### `hintTextColor`
+
+The search hint text color. (Android only)
+
+#### `headerIconColor`
+
+The search and close icon color shown in the header. (Android only)
+
+#### `shouldShowHintSearchIcon`
+
+Show the search hint icon when search bar is focused. (Android only)
+
 ### Events
 
 The navigator can [emit events](https://reactnavigation.org/docs/navigation-events) on certain actions. Supported events are:

src/types.tsx

@@ -470,4 +470,23 @@ export interface SearchBarProps {
    * The search field text color
    */
   textColor?: string;
+  /**
+   * The search hint text color
+   *
+   * @plaform android
+   */
+  hintTextColor?: string;
+  /**
+   * The search and close icon color shown in the header
+   *
+   * @plaform android
+   */
+  headerIconColor?: string;
+  /**
+   * Show the search hint icon when search bar is focused
+   *
+   * @plaform android
+   * @default true
+   */
+  shouldShowHintSearchIcon?: boolean;
 }