feat: Adds search bar on Android

TestsExample/App.js

@@ -62,6 +62,7 @@ import Test1096 from './src/Test1096';
 import Test1153 from './src/Test1153';
 import Test1157 from './src/Test1157';
 import Test1162 from './src/Test1162';
+import Test1166 from './src/Test1166';
 
 export default function App() {
   return (

TestsExample/src/Test1166/AndroidDifferentScreenSearch.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {Image, Text, TouchableOpacity, View} from 'react-native';
+import {ParamListBase} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <Stack.Navigator screenOptions={{stackAnimation: 'none'}}>
+      <Stack.Screen name="First" component={First} />
+      <Stack.Screen name="Search" component={Second} options={{title: ''}} />
+    </Stack.Navigator>
+  );
+}
+
+function SearchIconButton(props: {onPress: () => void}) {
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <Image source={require('../../assets/search_black.png')} />
+    </TouchableOpacity>
+  );
+}
+
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  React.useEffect(() => {
+    function HeaderSearchButton() {
+      return <SearchIconButton onPress={() => navigation.navigate('Search')} />;
+    }
+    navigation.setOptions({
+      title: 'Home',
+      headerRight: HeaderSearchButton,
+      stackAnimation: 'none',
+    });
+  }, [navigation]);
+  return <View style={{flex: 1, backgroundColor: '#FFF'}}></View>;
+}
+
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  const [text, setText] = React.useState('');
+
+  React.useEffect(() => {
+    navigation.setOptions({
+      title: '',
+      searchBar: {
+        autoFocus: true,
+        onClose: () => navigation.navigate('First'),
+        onChangeText: (e) => setText(e.nativeEvent.text),
+      },
+      stackAnimation: 'none',
+    });
+  }, []);
+
+  return (
+    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+      <Text style={{fontSize: 24, fontWeight: '600', marginBottom: 12}}>
+        Search Results
+      </Text>
+      <Text>{text}</Text>
+    </View>
+  );
+}

TestsExample/src/Test1166/AndroidSearchBarCustomization.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+      <Stack.Navigator>
+        <Stack.Screen
+          name="First"
+          component={First}
+          options={{
+            searchBar: {
+              autoCapitalize: 'sentences',
+              textColor: '#FF00FF',
+              barTintColor: '#00FF00',
+              placeholder: 'Test...',
+            },
+          }}
+        />
+      </Stack.Navigator>
+  );
+}
+
+function First() {
+  return <View style={{flex: 1, backgroundColor: '#FFF'}}></View>;
+}

TestsExample/src/Test1166/AndroidSearchBarEvents.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {Text, View} from 'react-native';
+import {ParamListBase} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import {SearchBarProps} from 'react-native-screens';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="First" component={First} />
+    </Stack.Navigator>
+  );
+}
+
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  const [events, setEvents] = React.useState<string[]>([]);
+  React.useEffect(() => {
+    const searchBar: SearchBarProps = {
+      onSearchButtonPress: () => setEvents((prev) => [...prev, 'Search']),
+      onBlur: () => setEvents((prev) => [...prev, 'Blur']),
+      onClose: () => setEvents((prev) => [...prev, 'Close']),
+      onOpen: () => setEvents((prev) => [...prev, 'Open']),
+      onFocus: () => setEvents((prev) => [...prev, 'Focus']),
+    };
+    navigation.setOptions({
+      searchBar: searchBar,
+    });
+  }, []);
+
+  return (
+    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+      {events.map((event, i) => (
+        <Text key={i}>{event}</Text>
+      ))}
+    </View>
+  );
+}

TestsExample/src/Test1166/AndroidSearchTypes.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {Button, View} from 'react-native';
+import {ParamListBase} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <Stack.Navigator screenOptions={{stackAnimation: 'none'}}>
+      <Stack.Screen name="First" component={First} />
+      <Stack.Screen
+        name="number"
+        component={Second}
+        options={{searchBar: {autoFocus: true, inputType: 'number'}}}
+      />
+      <Stack.Screen
+        name="email"
+        component={Second}
+        options={{searchBar: {autoFocus: true, inputType: 'email'}}}
+      />
+      <Stack.Screen
+        name="phone"
+        component={Second}
+        options={{searchBar: {autoFocus: true, inputType: 'phone'}}}
+      />
+    </Stack.Navigator>
+  );
+}
+
+function First({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  React.useEffect(() => {
+    function HeaderSearchButtons() {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          <Button title="N" onPress={() => navigation.navigate('number')} />
+          <Button title="E" onPress={() => navigation.navigate('email')} />
+          <Button title="P" onPress={() => navigation.navigate('phone')} />
+        </View>
+      );
+    }
+    navigation.setOptions({
+      title: 'Home',
+      headerRight: HeaderSearchButtons,
+      stackAnimation: 'none',
+    });
+  }, [navigation]);
+  return (
+    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+      <Button title="Number" onPress={() => navigation.navigate('number')} />
+      <Button title="Email" onPress={() => navigation.navigate('email')} />
+      <Button title="Phone" onPress={() => navigation.navigate('phone')} />
+    </View>
+  );
+}
+
+function Second({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  return (
+    <View style={{flex: 1, backgroundColor: '#FFF', padding: 12}}>
+      <Button title="Go back" onPress={() => navigation.pop()} />
+    </View>
+  );
+}

TestsExample/src/Test1166/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {Button, View} from 'react-native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from 'react-native-screens/native-stack';
+import AndroidDifferentScreenSearch from './AndroidDifferentScreenSearch';
+import AndroidSearchBarCustomization from './AndroidSearchBarCustomization';
+import AndroidSearchTypes from './AndroidSearchTypes';
+import AndroidSearchBarEvents from './AndroidSearchBarEvents';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{headerShown: false}}>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen
+          name="Customization"
+          component={AndroidSearchBarCustomization}
+        />
+        <Stack.Screen name="InputTypes" component={AndroidSearchTypes} />
+        <Stack.Screen name="Events" component={AndroidSearchBarEvents} />
+        <Stack.Screen
+          name="DifferentSearchScreen"
+          component={AndroidDifferentScreenSearch}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Home({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<ParamListBase>;
+}) {
+  return (
+    <View style={{flex: 1, backgroundColor: '#FFF', justifyContent: 'center', padding: 12}}>
+      <View style={{marginBottom: 12}}>
+        <Button
+          title="Search bar customization"
+          onPress={() => navigation.navigate('Customization')}
+        />
+      </View>
+      <View style={{marginBottom: 12}}>
+        <Button
+          title="Search bar input types"
+          onPress={() => navigation.navigate('InputTypes')}
+        />
+      </View>
+      <View style={{marginBottom: 12}}>
+        <Button
+          title="Search bar events"
+          onPress={() => navigation.navigate('Events')}
+        />
+      </View>
+      <View style={{marginBottom: 12}}>
+        <Button
+          title="Search bar different search results screen"
+          onPress={() => navigation.navigate('DifferentSearchScreen')}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,71 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import androidx.activity.OnBackPressedCallback
+import androidx.appcompat.widget.SearchView
+import androidx.fragment.app.Fragment
+
+class CustomSearchView(context: Context?, fragment: Fragment) : SearchView(context) {
+    /*
+        CustomSearchView uses some variables from SearchView. They are listed below with links to documentation
+        isIconified - https://developer.android.com/reference/android/widget/SearchView#setIconified(boolean)
+        maxWidth - https://developer.android.com/reference/android/widget/SearchView#setMaxWidth(int)
+        setOnSearchClickListener - https://developer.android.com/reference/android/widget/SearchView#setOnSearchClickListener(android.view.View.OnClickListener)
+        setOnCloseListener - https://developer.android.com/reference/android/widget/SearchView#setOnCloseListener(android.widget.SearchView.OnCloseListener)
+    */
+    private var mCustomOnCloseListener: OnCloseListener? = null
+    private var mCustomOnSearchClickedListener: OnClickListener? = null
+
+    private var mOnBackPressedCallback: OnBackPressedCallback =
+        object : OnBackPressedCallback(true) {
+            override fun handleOnBackPressed() {
+                isIconified = true
+            }
+        }
+    private val backPressOverrider = FragmentBackPressOverrider(fragment, mOnBackPressedCallback)
+    var overrideBackAction: Boolean
+        set(value) {
+            backPressOverrider.overrideBackAction = value
+        }
+        get() = backPressOverrider.overrideBackAction
+
+    fun focus() {
+        isIconified = false
+        requestFocusFromTouch()
+    }
+
+    override fun setOnCloseListener(listener: OnCloseListener?) {
+        mCustomOnCloseListener = listener
+    }
+
+    override fun setOnSearchClickListener(listener: OnClickListener?) {
+        mCustomOnSearchClickedListener = listener
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        if (!isIconified) {
+            backPressOverrider.maybeAddBackCallback()
+        }
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        backPressOverrider.removeBackCallbackIfAdded()
+    }
+
+    init {
+        super.setOnSearchClickListener { v ->
+            mCustomOnSearchClickedListener?.onClick(v)
+            backPressOverrider.maybeAddBackCallback()
+        }
+
+        super.setOnCloseListener {
+            val result = mCustomOnCloseListener?.onClose() ?: false
+            backPressOverrider.removeBackCallbackIfAdded()
+            result
+        }
+
+        maxWidth = Integer.MAX_VALUE
+    }
+}

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

@@ -0,0 +1,7 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import androidx.appcompat.widget.Toolbar
+
+// This class is used to store config closer to search bar
+open class CustomToolbar(context: Context, val config: ScreenStackHeaderConfig) : Toolbar(context)