react-native-bottom-sheet: [v4] screen resize events triggering animatedIndex change
Bug
When a resize event occurs such as a screen rotation (in native) or a window resize (in web) the bottom sheet index can change suddenly. This seems to be due to animatedContainerHeight being used in the calculation of animatedIndex.
Environment info
| Library | Version |
|---|---|
| @gorhom/bottom-sheet | 4.4.7 |
| react-native | 0.71.6 |
| react-native-reanimated | ^2.6.0 |
| react-native-gesture-handler | ^2.4.2 |
Steps To Reproduce
Web
- Open the bottom sheet.
- Resize the window.
Mobile I haven’t tested this on mobile but theoretically it should happen there too.
- Open the bottom sheet.
- Rotate the device (triggering a change in the screen dimensions)
Describe what you expected to happen:
A window/screen resize should not result in a change in the animatedIndex
Reproducible sample code
N/A
Notes
I’ve done a little exploration on fixing this but I’m not super happy with any of my approaches or results. I’ve effectively tried to set a property in the component when a resize reaction takes place and then adding a conditional to check if a resize event is the responsible for triggering a recalc on the animatedIndex property.
If I could get some direction from someone who knows more about the library and the best path forward I’d happily do the implementation and submit a PR!
About this issue
- Original URL
- State: open
- Created a year ago
- Comments: 17 (6 by maintainers)
@gorhom I realize now I might’ve misunderstood your question. You could basically copy the contents of that index file and strip out all the NextJS specific stuff and you should be able to reproduce it on Android yes. Make sure that you have
android:windowSoftInputMode="adjustResize"set in yourAndroidManifest.xmlfile as I mentioned here. You’ll also need to add a text input on the underlying screen that would cause the keyboard to pop.@gorhom Yes it does happen in apps too. One way I’ve gotten it to reproduce is by opening an android keyboard when the sheet is open and docked close to the bottom. I think I document that somewhere, it might be on the PR I sent.
Another way to reproduce this on native Android is by opening the keyboard when the bottom-sheet is open (and sufficiently close to the bottom of the screen). The default configuration for android is
android:windowSoftInputMode="adjustResize"which resizes the entire screen when the keyboard opens. As a result of the rapid decrease in size of the screen the bottom-sheet collapses. Despite the fixes that were put in place to handle android keyboard interactions this issue is present in v5.0.0-alpha.3.@gorhom thanks for your response! I’m going to upgrade to v5 and double check. If I’m still seeing an issue there I’ll reopen.