react-native-screens 3.7.2 → 3.10.1

package/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt

@@ -3,8 +3,6 @@ package com.swmansion.rnscreens
 import android.content.Context
 import android.graphics.Canvas
 import android.view.View
-import androidx.fragment.app.Fragment
-import androidx.fragment.app.FragmentManager
 import androidx.fragment.app.FragmentTransaction
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerModule
@@ -20,21 +18,6 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
     private val drawingOpPool: MutableList<DrawingOp> = ArrayList()
     private val drawingOps: MutableList<DrawingOp> = ArrayList()
     private var mTopScreen: ScreenStackFragment? = null
-    private val mBackStackListener = FragmentManager.OnBackStackChangedListener {
-        if (mFragmentManager?.backStackEntryCount == 0) {
-            // when back stack entry count hits 0 it means the user's navigated back using hw back
-            // button. As the "fake" transaction we installed on the back stack does nothing we need
-            // to handle back navigation on our own.
-            mTopScreen?.let { dismiss(it) }
-        }
-    }
-    private val mLifecycleCallbacks: FragmentManager.FragmentLifecycleCallbacks = object : FragmentManager.FragmentLifecycleCallbacks() {
-        override fun onFragmentResumed(fm: FragmentManager, f: Fragment) {
-            if (mTopScreen === f) {
-                setupBackHandlerIfNeeded(f)
-            }
-        }
-    }
     private var mRemovalTransitionStarted = false
     private var isDetachingCurrentScreen = false
     private var reverseLastTwoChildren = false
@@ -65,28 +48,6 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
         return ScreenStackFragment(screen)
     }
 
-    override fun onDetachedFromWindow() {
-        mFragmentManager?.let {
-            it.removeOnBackStackChangedListener(mBackStackListener)
-            it.unregisterFragmentLifecycleCallbacks(mLifecycleCallbacks)
-            if (!it.isStateSaved && !it.isDestroyed) {
-                // State save means that the container where fragment manager was installed has been
-                // unmounted.
-                // This could happen as a result of dismissing nested stack. In such a case we don't need to
-                // reset back stack as it'd result in a crash caused by the fact the fragment manager is no
-                // longer attached.
-                it.popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE)
-            }
-        }
-        super.onDetachedFromWindow()
-    }
-
-    override fun onAttachedToWindow() {
-        super.onAttachedToWindow()
-        val fragmentManager = requireNotNull(mFragmentManager, { "mFragmentManager is null when ScreenStack attached to window" })
-        fragmentManager.registerFragmentLifecycleCallbacks(mLifecycleCallbacks, false)
-    }
-
     override fun startViewTransition(view: View) {
         super.startViewTransition(view)
         mRemovalTransitionStarted = true
@@ -159,11 +120,11 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
                 // if the previous top screen does not exist anymore and the new top was not on the stack
                 // before, probably replace or reset was called, so we play the "close animation".
                 // Otherwise it's open animation
-                shouldUseOpenAnimation = (
-                    mScreenFragments.contains(mTopScreen) ||
-                        newTop.screen.replaceAnimation !== Screen.ReplaceAnimation.POP
-                    )
-                stackAnimation = newTop.screen.stackAnimation
+                val containsTopScreen = mTopScreen?.let { mScreenFragments.contains(it) } == true
+                val isPushReplace = newTop.screen.replaceAnimation === Screen.ReplaceAnimation.PUSH
+                shouldUseOpenAnimation = containsTopScreen || isPushReplace
+                // if the replace animation is `push`, the new top screen provides the animation, otherwise the previous one
+                stackAnimation = if (shouldUseOpenAnimation) newTop.screen.stackAnimation else mTopScreen?.screen?.stackAnimation
             } else if (mTopScreen == null && newTop != null) {
                 // mTopScreen was not present before so newTop is the first screen added to a stack
                 // and we don't want the animation when it is entering, but we want to send the
@@ -277,69 +238,38 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
             mTopScreen = newTop
             mStack.clear()
             mStack.addAll(mScreenFragments)
+
+            turnOffA11yUnderTransparentScreen(visibleBottom)
+
             it.commitNowAllowingStateLoss()
-            mTopScreen?.let { screen -> setupBackHandlerIfNeeded(screen) }
         }
     }
 
-    override fun notifyContainerUpdate() {
-        for (screen in mStack) {
-            screen.onContainerUpdate()
+    // only top visible screen should be accessible
+    private fun turnOffA11yUnderTransparentScreen(visibleBottom: ScreenStackFragment?) {
+        if (mScreenFragments.size > 1 && visibleBottom != null) {
+            mTopScreen?.let {
+                if (isTransparent(it)) {
+                    val screenFragmentsBeneathTop = mScreenFragments.slice(0 until mScreenFragments.size - 1).asReversed()
+                    // go from the top of the stack excluding the top screen
+                    for (screenFragment in screenFragmentsBeneathTop) {
+                        screenFragment.screen.changeAccessibilityMode(IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS)
+
+                        // don't change a11y below non-transparent screens
+                        if (screenFragment == visibleBottom) {
+                            break
+                        }
+                    }
+                }
+            }
         }
+
+        topScreen?.changeAccessibilityMode(IMPORTANT_FOR_ACCESSIBILITY_AUTO)
     }
 
-    /**
-     * The below method sets up fragment manager's back stack in a way that it'd trigger our back
-     * stack change listener when hw back button is clicked.
-     *
-     *
-     * Because back stack by default rolls back the transaction the stack entry is associated with
-     * we generate a "fake" transaction that hides and shows the top fragment. As a result when back
-     * stack entry is rolled back nothing happens and we are free to handle back navigation on our own
-     * in `mBackStackListener`.
-     *
-     *
-     * We pop that "fake" transaction each time we update stack and we add a new one in case the
-     * top screen is allowed to be dismissed using hw back button. This way in the listener we can
-     * tell if back button was pressed based on the count of the items on back stack. We expect 0
-     * items in case hw back is pressed because we try to keep the number of items at 1 by always
-     * resetting and adding new items. In case we don't add a new item to back stack we remove
-     * listener so that it does not get triggered.
-     *
-     *
-     * It is important that we don't install back handler when stack contains a single screen as in
-     * that case we want the parent navigator or activity handler to take over.
-     */
-    private fun setupBackHandlerIfNeeded(topScreen: ScreenStackFragment) {
-        if (mTopScreen?.isResumed != true) {
-            // if the top fragment is not in a resumed state, adding back stack transaction would throw.
-            // In such a case we skip installing back handler and use FragmentLifecycleCallbacks to get
-            // notified when it gets resumed so that we can install the handler.
-            return
-        }
-        mFragmentManager?.let {
-            it.removeOnBackStackChangedListener(mBackStackListener)
-            it.popBackStack(BACK_STACK_TAG, FragmentManager.POP_BACK_STACK_INCLUSIVE)
-            var firstScreen: ScreenStackFragment? = null
-            var i = 0
-            val size = mStack.size
-            while (i < size) {
-                val screen = mStack[i]
-                if (!mDismissed.contains(screen)) {
-                    firstScreen = screen
-                    break
-                }
-                i++
-            }
-            if (topScreen !== firstScreen && topScreen.isDismissible) {
-                it
-                    .beginTransaction()
-                    .show(topScreen)
-                    .addToBackStack(BACK_STACK_TAG)
-                    .setPrimaryNavigationFragment(topScreen)
-                    .commitNowAllowingStateLoss()
-                it.addOnBackStackChangedListener(mBackStackListener)
-            }
+    override fun notifyContainerUpdate() {
+        for (screen in mStack) {
+            screen.onContainerUpdate()
         }
     }
 
@@ -418,7 +348,6 @@ class ScreenStack(context: Context?) : ScreenContainer<ScreenStackFragment>(cont
     }
 
     companion object {
-        private const val BACK_STACK_TAG = "RN_SCREEN_LAST"
         private fun isSystemAnimation(stackAnimation: StackAnimation): Boolean {
             return stackAnimation === StackAnimation.DEFAULT || stackAnimation === StackAnimation.FADE || stackAnimation === StackAnimation.NONE
         }

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

@@ -5,6 +5,9 @@ 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.animation.Animation
@@ -24,6 +27,9 @@ class ScreenStackFragment : ScreenFragment {
     private var mShadowHidden = false
     private var mIsTranslucent = false
 
+    var searchView: CustomSearchView? = null
+    var onSearchViewCreate: ((searchView: CustomSearchView) -> Unit)? = null
+
     @SuppressLint("ValidFragment")
     constructor(screenView: Screen) : super(screenView)
 
@@ -64,7 +70,8 @@ class ScreenStackFragment : ScreenFragment {
     fun setToolbarTranslucent(translucent: Boolean) {
         if (mIsTranslucent != translucent) {
             val params = screen.layoutParams
-            (params as CoordinatorLayout.LayoutParams).behavior = if (translucent) null else ScrollingViewBehavior()
+            (params as CoordinatorLayout.LayoutParams).behavior =
+                if (translucent) null else ScrollingViewBehavior()
             mIsTranslucent = translucent
         }
     }
@@ -120,7 +127,8 @@ class ScreenStackFragment : ScreenFragment {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        val view: NotifyingCoordinatorLayout? = context?.let { NotifyingCoordinatorLayout(it, this) }
+        val view: ScreensCoordinatorLayout? =
+            context?.let { ScreensCoordinatorLayout(it, this) }
         val params = CoordinatorLayout.LayoutParams(
             LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT
         )
@@ -142,11 +150,48 @@ class ScreenStackFragment : ScreenFragment {
             mAppBarLayout?.targetElevation = 0f
         }
         mToolbar?.let { mAppBarLayout?.addView(recycleView(it)) }
+        setHasOptionsMenu(true)
         return view
     }
 
-    val isDismissible: Boolean
-        get() = screen.isGestureEnabled
+    override fun onPrepareOptionsMenu(menu: Menu) {
+        updateToolbarMenu(menu)
+        return super.onPrepareOptionsMenu(menu)
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
+        updateToolbarMenu(menu)
+        return super.onCreateOptionsMenu(menu, inflater)
+    }
+
+    private fun shouldShowSearchBar(): Boolean {
+        val config = screen.headerConfig
+        val numberOfSubViews = config?.configSubviewsCount ?: 0
+        if (config != null && numberOfSubViews > 0) {
+            for (i in 0 until numberOfSubViews) {
+                val subView = config.getConfigSubview(i)
+                if (subView.type == ScreenStackHeaderSubview.Type.SEARCH_BAR) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+
+    private fun updateToolbarMenu(menu: Menu) {
+        menu.clear()
+        if (shouldShowSearchBar()) {
+            val currentContext = context
+            if (searchView == null && currentContext != null) {
+                val newSearchView = CustomSearchView(currentContext, this)
+                searchView = newSearchView
+                onSearchViewCreate?.invoke(newSearchView)
+            }
+            val item = menu.add("")
+            item.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
+            item.actionView = searchView
+        }
+    }
 
     fun canNavigateBack(): Boolean {
         val container: ScreenContainer<*>? = screen.container
@@ -171,18 +216,22 @@ class ScreenStackFragment : ScreenFragment {
         container.dismiss(this)
     }
 
-    private class NotifyingCoordinatorLayout(context: Context, private val mFragment: ScreenFragment) : CoordinatorLayout(context) {
-        private val mAnimationListener: Animation.AnimationListener = object : Animation.AnimationListener {
-            override fun onAnimationStart(animation: Animation) {
-                mFragment.onViewAnimationStart()
-            }
+    private class ScreensCoordinatorLayout(
+        context: Context,
+        private val mFragment: ScreenFragment
+    ) : CoordinatorLayout(context) {
+        private val mAnimationListener: Animation.AnimationListener =
+            object : Animation.AnimationListener {
+                override fun onAnimationStart(animation: Animation) {
+                    mFragment.onViewAnimationStart()
+                }
 
-            override fun onAnimationEnd(animation: Animation) {
-                mFragment.onViewAnimationEnd()
-            }
+                override fun onAnimationEnd(animation: Animation) {
+                    mFragment.onViewAnimationEnd()
+                }
 
-            override fun onAnimationRepeat(animation: Animation) {}
-        }
+                override fun onAnimationRepeat(animation: Animation) {}
+            }
 
         override fun startAnimation(animation: Animation) {
             // For some reason View##onAnimationEnd doesn't get called for
@@ -208,6 +257,19 @@ class ScreenStackFragment : ScreenFragment {
                 super.startAnimation(set)
             }
         }
+
+        /**
+         * This method implements a workaround for RN's autoFocus functionality. Because of the way
+         * autoFocus is implemented it dismisses soft keyboard in fragment transition
+         * due to change of visibility of the view at the start of the transition. Here we override the
+         * call to `clearFocus` when the visibility of view is `INVISIBLE` since `clearFocus` triggers the
+         * hiding of the keyboard in `ReactEditText.java`.
+         */
+        override fun clearFocus() {
+            if (visibility != INVISIBLE) {
+                super.clearFocus()
+            }
+        }
     }
 
     private class ScreensAnimation(private val mFragment: ScreenFragment) : Animation() {

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt

@@ -17,11 +17,13 @@ import androidx.fragment.app.Fragment
 import com.facebook.react.ReactApplication
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException
 import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.views.text.ReactTypefaceUtils
 
 class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
     private val mConfigSubviews = ArrayList<ScreenStackHeaderSubview>(3)
-    val toolbar: Toolbar
+    val toolbar: CustomToolbar
     private var mTitle: String? = null
     private var mTitleColor = 0
     private var mTitleFontFamily: String? = null
@@ -62,6 +64,11 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         }
     }
 
+    private fun sendEvent(eventName: String, eventContent: WritableMap?) {
+        (context as ReactContext).getJSModule(RCTEventEmitter::class.java)
+            ?.receiveEvent(id, eventName, eventContent)
+    }
+
     override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
         // no-op
     }
@@ -73,12 +80,14 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
         mIsAttachedToWindow = true
+        sendEvent("onAttached", null)
         onUpdate()
     }
 
     override fun onDetachedFromWindow() {
         super.onDetachedFromWindow()
         mIsAttachedToWindow = false
+        sendEvent("onDetached", null)
     }
 
     private val screen: Screen?
@@ -99,7 +108,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
             }
             return null
         }
-    private val screenFragment: ScreenStackFragment?
+    val screenFragment: ScreenStackFragment?
         get() {
             val screen = parent
             if (screen is Screen) {
@@ -369,7 +378,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
         mDirection = direction
     }
 
-    private class DebugMenuToolbar(context: Context) : Toolbar(context) {
+    private class DebugMenuToolbar(context: Context, config: ScreenStackHeaderConfig) : CustomToolbar(context, config) {
         override fun showOverflowMenu(): Boolean {
             (context.applicationContext as ReactApplication)
                 .reactNativeHost
@@ -381,7 +390,7 @@ class ScreenStackHeaderConfig(context: Context) : ViewGroup(context) {
 
     init {
         visibility = GONE
-        toolbar = if (BuildConfig.DEBUG) DebugMenuToolbar(context) else Toolbar(context)
+        toolbar = if (BuildConfig.DEBUG) DebugMenuToolbar(context, this) else CustomToolbar(context, this)
         mDefaultStartInset = toolbar.contentInsetStart
         mDefaultStartInsetWithNavigation = toolbar.contentInsetStartWithNavigation
 

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt

@@ -2,6 +2,7 @@ package com.swmansion.rnscreens
 
 import android.view.View
 import com.facebook.react.bridge.JSApplicationCausedNativeException
+import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
@@ -129,6 +130,13 @@ class ScreenStackHeaderConfigViewManager : ViewGroupManager<ScreenStackHeaderCon
         config.setDirection(direction)
     }
 
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.builder<String, Any>()
+            .put("onAttached", MapBuilder.of("registrationName", "onAttached"))
+            .put("onDetached", MapBuilder.of("registrationName", "onDetached"))
+            .build()
+    }
+
     companion object {
         const val REACT_CLASS = "RNSScreenStackHeaderConfig"
     }

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.kt

@@ -10,6 +10,12 @@ class ScreenStackHeaderSubview(context: ReactContext?) : ReactViewGroup(context)
     private var mReactWidth = 0
     private var mReactHeight = 0
     var type = Type.RIGHT
+
+    val config: ScreenStackHeaderConfig?
+        get() {
+            return (parent as? CustomToolbar)?.config
+        }
+
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY &&
             MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY
@@ -31,6 +37,6 @@ class ScreenStackHeaderSubview(context: ReactContext?) : ReactViewGroup(context)
     }
 
     enum class Type {
-        LEFT, CENTER, RIGHT, BACK
+        LEFT, CENTER, RIGHT, BACK, SEARCH_BAR
     }
 }

package/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.kt

@@ -24,6 +24,7 @@ class ScreenStackHeaderSubviewManager : ReactViewManager() {
             "center" -> ScreenStackHeaderSubview.Type.CENTER
             "right" -> ScreenStackHeaderSubview.Type.RIGHT
             "back" -> ScreenStackHeaderSubview.Type.BACK
+            "searchBar" -> ScreenStackHeaderSubview.Type.SEARCH_BAR
             else -> throw JSApplicationIllegalArgumentException("Unknown type $type")
         }
     }

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

@@ -0,0 +1,90 @@
+package com.swmansion.rnscreens
+
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@ReactModule(name = SearchBarManager.REACT_CLASS)
+class SearchBarManager : ViewGroupManager<SearchBarView>() {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(context: ThemedReactContext): SearchBarView {
+        return SearchBarView(context)
+    }
+
+    override fun onAfterUpdateTransaction(view: SearchBarView) {
+        super.onAfterUpdateTransaction(view)
+        view.onUpdate()
+    }
+
+    @ReactProp(name = "autoCapitalize")
+    fun setAutoCapitalize(view: SearchBarView, autoCapitalize: String?) {
+        view.autoCapitalize = when (autoCapitalize) {
+            null, "none" -> SearchBarView.SearchBarAutoCapitalize.NONE
+            "words" -> SearchBarView.SearchBarAutoCapitalize.WORDS
+            "sentences" -> SearchBarView.SearchBarAutoCapitalize.SENTENCES
+            "characters" -> SearchBarView.SearchBarAutoCapitalize.CHARACTERS
+            else -> throw JSApplicationIllegalArgumentException(
+                "Forbidden auto capitalize value passed"
+            )
+        }
+    }
+
+    @ReactProp(name = "autoFocus")
+    fun setAutoFocus(view: SearchBarView, autoFocus: Boolean?) {
+        view.autoFocus = autoFocus ?: false
+    }
+
+    @ReactProp(name = "barTintColor", customType = "Color")
+    fun setTintColor(view: SearchBarView, color: Int?) {
+        view.tintColor = color
+    }
+
+    @ReactProp(name = "disableBackButtonOverride")
+    fun setDisableBackButtonOverride(view: SearchBarView, disableBackButtonOverride: Boolean?) {
+        view.shouldOverrideBackButton = disableBackButtonOverride != true
+    }
+
+    @ReactProp(name = "inputType")
+    fun setInputType(view: SearchBarView, inputType: String?) {
+        view.inputType = when (inputType) {
+            null, "text" -> SearchBarView.SearchBarInputTypes.TEXT
+            "phone" -> SearchBarView.SearchBarInputTypes.PHONE
+            "number" -> SearchBarView.SearchBarInputTypes.NUMBER
+            "email" -> SearchBarView.SearchBarInputTypes.EMAIL
+            else -> throw JSApplicationIllegalArgumentException(
+                "Forbidden input type value"
+            )
+        }
+    }
+
+    @ReactProp(name = "placeholder")
+    fun setPlaceholder(view: SearchBarView, placeholder: String?) {
+        view.placeholder = placeholder
+    }
+
+    @ReactProp(name = "textColor", customType = "Color")
+    fun setTextColor(view: SearchBarView, color: Int?) {
+        view.textColor = color
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
+        return MapBuilder.builder<String, Any>()
+            .put("onChangeText", MapBuilder.of("registrationName", "onChangeText"))
+            .put("onSearchButtonPress", MapBuilder.of("registrationName", "onSearchButtonPress"))
+            .put("onFocus", MapBuilder.of("registrationName", "onFocus"))
+            .put("onBlur", MapBuilder.of("registrationName", "onBlur"))
+            .put("onClose", MapBuilder.of("registrationName", "onClose"))
+            .put("onOpen", MapBuilder.of("registrationName", "onOpen"))
+            .build()
+    }
+
+    companion object {
+        const val REACT_CLASS = "RNSSearchBar"
+    }
+}

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

@@ -0,0 +1,150 @@
+package com.swmansion.rnscreens
+
+import android.annotation.SuppressLint
+import android.text.InputType
+import androidx.appcompat.widget.SearchView
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.views.view.ReactViewGroup
+
+@SuppressLint("ViewConstructor")
+class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext) {
+    var inputType: SearchBarInputTypes = SearchBarInputTypes.TEXT
+    var autoCapitalize: SearchBarAutoCapitalize = SearchBarAutoCapitalize.NONE
+    var textColor: Int? = null
+    var tintColor: Int? = null
+    var placeholder: String? = null
+    var shouldOverrideBackButton: Boolean = true
+    var autoFocus: Boolean = false
+
+    private var mSearchViewFormatter: SearchViewFormatter? = null
+
+    private var mAreListenersSet: Boolean = false
+
+    private val screenStackFragment: ScreenStackFragment?
+        get() {
+            val currentParent = parent
+            if (currentParent is ScreenStackHeaderSubview) {
+                return currentParent.config?.screenFragment
+            }
+            return null
+        }
+
+    fun onUpdate() {
+        setSearchViewProps()
+    }
+
+    private fun setSearchViewProps() {
+        val searchView = screenStackFragment?.searchView
+        if (searchView != null) {
+            if (!mAreListenersSet) {
+                setSearchViewListeners(searchView)
+                mAreListenersSet = true
+            }
+
+            searchView.inputType = inputType.toAndroidInputType(autoCapitalize)
+            searchView.queryHint = placeholder
+            mSearchViewFormatter?.setTextColor(textColor)
+            mSearchViewFormatter?.setTintColor(tintColor)
+            searchView.overrideBackAction = shouldOverrideBackButton
+        }
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+
+        screenStackFragment?.onSearchViewCreate = { newSearchView ->
+            if (mSearchViewFormatter == null) mSearchViewFormatter =
+                SearchViewFormatter(newSearchView)
+            setSearchViewProps()
+            if (autoFocus) {
+                screenStackFragment?.searchView?.focus()
+            }
+        }
+    }
+
+    private fun setSearchViewListeners(searchView: SearchView) {
+        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
+            override fun onQueryTextChange(newText: String?): Boolean {
+                handleTextChange(newText)
+                return true
+            }
+
+            override fun onQueryTextSubmit(query: String?): Boolean {
+                handleTextSubmit(query)
+                return true
+            }
+        })
+        searchView.setOnQueryTextFocusChangeListener { _, hasFocus ->
+            handleFocusChange(hasFocus)
+        }
+        searchView.setOnCloseListener {
+            handleClose()
+            false
+        }
+        searchView.setOnSearchClickListener {
+            handleOpen()
+        }
+    }
+
+    private fun handleTextChange(newText: String?) {
+        val event = Arguments.createMap()
+        event.putString("text", newText)
+        sendEvent("onChangeText", event)
+    }
+
+    private fun handleFocusChange(hasFocus: Boolean) {
+        sendEvent(if (hasFocus) "onFocus" else "onBlur", null)
+    }
+
+    private fun handleClose() {
+        sendEvent("onClose", null)
+    }
+
+    private fun handleOpen() {
+        sendEvent("onOpen", null)
+    }
+
+    private fun handleTextSubmit(newText: String?) {
+        val event = Arguments.createMap()
+        event.putString("text", newText)
+        sendEvent("onSearchButtonPress", event)
+    }
+
+    private fun sendEvent(eventName: String, eventContent: WritableMap?) {
+        (context as ReactContext).getJSModule(RCTEventEmitter::class.java)
+            ?.receiveEvent(id, eventName, eventContent)
+    }
+
+    enum class SearchBarAutoCapitalize {
+        NONE, WORDS, SENTENCES, CHARACTERS
+    }
+
+    enum class SearchBarInputTypes {
+        TEXT {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                when (capitalize) {
+                    SearchBarAutoCapitalize.NONE -> InputType.TYPE_CLASS_TEXT
+                    SearchBarAutoCapitalize.WORDS -> InputType.TYPE_TEXT_FLAG_CAP_WORDS
+                    SearchBarAutoCapitalize.SENTENCES -> InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+                    SearchBarAutoCapitalize.CHARACTERS -> InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+                }
+        },
+        PHONE {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                InputType.TYPE_CLASS_PHONE
+        },
+        NUMBER {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                InputType.TYPE_CLASS_NUMBER
+        },
+        EMAIL {
+            override fun toAndroidInputType(capitalize: SearchBarAutoCapitalize) =
+                InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS
+        };
+
+        abstract fun toAndroidInputType(capitalize: SearchBarAutoCapitalize): Int
+    }
+}