Skip to content

Commit

Permalink
fix(Android): Change elements visibility on search bar open (software…
Browse files Browse the repository at this point in the history
…-mansion#1903)

## Description

Currently, when user opens the search bar all of the subviews on the
toolbar are being pushed to the left.
Instead, we want to hide them or even remove them so that they won't be
visible during the layout.
This PR fixes that problem by secretly hiding the toolbar elements,
changing their visibility to `GONE`.

Fixes software-mansion#1450.

## Changes

- Added a fix that is being controlled by `handleOpen` and `handleClose`
methods in SearchBarView.

## Screenshots / GIFs

### Before


https://github.com/software-mansion/react-native-screens/assets/23281839/8ca8e18e-2cf6-4c04-85c8-51b5d69f1a61

### After


https://github.com/software-mansion/react-native-screens/assets/23281839/41330ea7-a12b-4e14-9a1e-2207a54ebed0

## Test code and steps to reproduce

In our example app open `SearchBar.tsx` and add `headerRight: () =>
<Button title="Test"/> to the `navigation.setOptions({` declaration.
Then launch the app and open `Search bar` example.

## Checklist

- [ ] Ensured that CI passes
  • Loading branch information
tboba authored and ja1ns committed Oct 9, 2024
1 parent 44b2f3b commit b7523d5
Showing 1 changed file with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions android/src/main/java/com/swmansion/rnscreens/SearchBarView.kt
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,19 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)

private var mAreListenersSet: Boolean = false

private val screenStackFragment: ScreenStackFragment?
private val headerConfig: ScreenStackHeaderConfig?
get() {
val currentParent = parent
if (currentParent is ScreenStackHeaderSubview) {
return currentParent.config?.screenFragment
return currentParent.config
}

return null
}

private val screenStackFragment: ScreenStackFragment?
get() = headerConfig?.screenFragment

fun onUpdate() {
setSearchViewProps()
}
Expand Down Expand Up @@ -110,10 +114,12 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)

private fun handleClose() {
sendEvent(SearchBarCloseEvent(surfaceId, id))
setToolbarElementsVisibility(VISIBLE)
}

private fun handleOpen() {
sendEvent(SearchBarOpenEvent(surfaceId, id))
setToolbarElementsVisibility(GONE)
}

private fun handleTextSubmit(newText: String?) {
Expand Down Expand Up @@ -144,6 +150,14 @@ class SearchBarView(reactContext: ReactContext?) : ReactViewGroup(reactContext)
text?.let { screenStackFragment?.searchView?.setText(it) }
}

private fun setToolbarElementsVisibility(visibility: Int) {
for (i in 0..(headerConfig?.configSubviewsCount?.minus(1) ?: 0)) {
val subview = headerConfig?.getConfigSubview(i)
if (subview?.type != ScreenStackHeaderSubview.Type.SEARCH_BAR)
subview?.visibility = visibility
}
}

private val surfaceId = UIManagerHelper.getSurfaceId(this)

enum class SearchBarAutoCapitalize {
Expand Down

0 comments on commit b7523d5

Please sign in to comment.