feat(android): Add new properties to search view

Example/src/screens/SearchBar.tsx

@@ -35,6 +35,11 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
   const [search, setSearch] = useState('');
   const [placeholder, setPlaceholder] = useState('Search for something...');
   const [barTintColor, setBarTintColor] = useState<BarTintColor>('white');
+  const [textHintColor, setTextHintColor] = useState<BarTintColor>('orange');
+  const [headerIconColor, setHeaderIconColor] = useState<BarTintColor>(
+    'orange'
+  );
+  const [hintSearchIcon, setHintSearchIcon] = useState(false);
   const [hideWhenScrolling, setHideWhenScrolling] = useState(false);
   const [obscureBackground, setObscureBackground] = useState(false);
   const [hideNavigationBar, setHideNavigationBar] = useState(false);
@@ -47,6 +52,9 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     navigation.setOptions({
       searchBar: {
         barTintColor,
+        textHintColor,
+        headerIconColor,
+        hintSearchIcon,
         hideWhenScrolling,
         obscureBackground,
         hideNavigationBar,
@@ -91,6 +99,9 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
     search,
     placeholder,
     barTintColor,
+    textHintColor,
+    headerIconColor,
+    hintSearchIcon,
     hideWhenScrolling,
     obscureBackground,
     hideNavigationBar,
@@ -143,6 +154,23 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => {
         onValueChange={setInputType}
         items={['text', 'number', 'email', 'phone']}
       />
+      <SettingsPicker<BarTintColor>
+        label="Text hint color"
+        value={textHintColor}
+        onValueChange={setTextHintColor}
+        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={hintSearchIcon}
+        onValueChange={setHintSearchIcon}
+      />
       <Text style={styles.heading}>Other</Text>
       <Button
         onPress={() => navigation.navigate('Search')}

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

@@ -4,12 +4,7 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Color
 import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.Menu
-import android.view.MenuInflater
-import android.view.MenuItem
-import android.view.View
-import android.view.ViewGroup
+import android.view.*
 import android.view.animation.Animation
 import android.view.animation.AnimationSet
 import android.view.animation.Transformation
@@ -191,6 +186,7 @@ class ScreenStackFragment : ScreenFragment {
             item.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
             item.actionView = searchView
         }
+
     }
 
     fun canNavigateBack(): Boolean {

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

@@ -73,6 +73,21 @@ class SearchBarManager : ViewGroupManager<SearchBarView>() {
         view.textColor = color
     }
 
+    @ReactProp(name = "headerIconColor", customType = "Color")
+    fun setHeaderIconColor(view: SearchBarView, color: Int?) {
+        view.headerIconColor = color
+    }
+
+    @ReactProp(name = "textHintColor", customType = "Color")
+    fun setTextHintColor(view: SearchBarView, color: Int?) {
+        view.textHintColor = color
+    }
+
+    @ReactProp(name = "hintSearchIcon")
+    fun setHintSearchIcon(view: SearchBarView, hintSearchIcon: Boolean?) {
+        view.hintSearchIcon = hintSearchIcon ?: 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 textHintColor: Int? = null
+    var placeholder: String? = ""
     var shouldOverrideBackButton: Boolean = true
     var autoFocus: Boolean = false
+    var hintSearchIcon: 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?.setTextHintColor(textHintColor)
+            mSearchViewFormatter?.setHintSearchIcon(hintSearchIcon, placeholder)
             searchView.overrideBackAction = shouldOverrideBackButton
         }
     }

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

@@ -3,16 +3,24 @@ 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)
+    private val searchHintIcon
+        get() = searchView.findViewById<ImageView>(R.id.search_mag_icon)
 
     fun setTextColor(textColor: Int?) {
         val currentDefaultTextColor = mDefaultTextColor
@@ -37,4 +45,27 @@ class SearchViewFormatter(var searchView: SearchView) {
             searchTextPlate.background = currentDefaultTintColor
         }
     }
+
+    fun setHeaderIconColor(headerIconColor: Int?) {
+        headerIconColor?.let {
+            searchIcon.setColorFilter(headerIconColor)
+            searchCloseIcon.setColorFilter(headerIconColor)
+        }
+    }
+
+    fun setTextHintColor(textHintColor: Int?) {
+        textHintColor?.let {
+            searchEditText?.setHintTextColor(textHintColor)
+        }
+    }
+
+    fun setHintSearchIcon(hintSearchIcon: Boolean?, placeholder: String?) {
+        hintSearchIcon?.let {
+            if (hintSearchIcon) {
+                searchView.queryHint = placeholder
+            } else {
+                searchEditText?.hint = placeholder
+            }
+        }
+    }
 }

createNativeStackNavigator/README.md

@@ -464,6 +464,18 @@ Defaults to an empty string.
 
 The search field text color.
 
+#### `textHintColor`
+
+The search hint text color. (Android only)
+
+#### `headerIconColor`
+
+The search and close icon color shown in the header. (Android only)
+
+#### `hintSearchIcon`
+
+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.
-
+- `textHintColor` - The search hint text color. (Android only)
+- `headerIconColor` - The search and close icon color shown in the header. (Android only)
+- `hintSearchIcon` - 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.
 
+#### `textHintColor`
+
+The search hint text color. (Android only)
+
+#### `headerIconColor`
+
+The search and close icon color shown in the header. (Android only)
+
+#### `hintSearchIcon`
+
+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
+   */
+  textHintColor?: 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
+   */
+  hintSearchIcon?: boolean;
 }