Description
flashing-backdrop.mp4
Bug
I added a backdrop to the "Dynamic Snap Point" example and experienced flickering of the backdrop when:
- bottom sheet is mounted
- content height is increased
Please see the attached screen recording.
The flickering is caused by the opacity of the backdrop which is derived from animatedIndex:
When the bottom sheet is mounted, contentHeight is set to 0 and thus the animatedIndex is calculated as 1.
This initializes the backdrop with its target opacity.
When contentHeight is updated in handleOnLayout and thus the snap points change, animatedIndex drops to a value below 1 and then reaches 1. This causes a change in the backdrop's opacity which looks like it's flickering.
LOG animatedIndex 1
LOG animatedIndex 0.303923371864135
LOG animatedIndex 0.44752361701454846
LOG animatedIndex 0.5614992061630881
LOG animatedIndex 0.6519616911085544
LOG animatedIndex 0.7237618123876004
LOG animatedIndex 0.7807496059801955
LOG animatedIndex 0.8259808478549384
LOG animatedIndex 0.8618809080198362
LOG animatedIndex 0.8903748046205889
LOG animatedIndex 0.9129904250777997
LOG animatedIndex 0.9309404549799996
LOG animatedIndex 0.9451874030349574
LOG animatedIndex 0.9564952131859606
LOG animatedIndex 0.9654702279750407
LOG animatedIndex 0.9725937019024556
LOG animatedIndex 0.9782476068805629
LOG animatedIndex 0.9827351142300406
LOG animatedIndex 0.9862968511437163
LOG animatedIndex 0.9891238036020468
LOG animatedIndex 0.9913675572291475
LOG animatedIndex 0.993148425662441
LOG animatedIndex 0.994561901872919
LOG animatedIndex 0.9956837786752039
LOG animatedIndex 0.9965742128821735
LOG animatedIndex 0.9972809509724073
LOG animatedIndex 0.9978418893679171
LOG animatedIndex 0.9982871064637325
LOG animatedIndex 0.9986404755064244
LOG animatedIndex 0.9989209446991162
LOG animatedIndex 1
When contentHeight is increased, the same behavior is shown:
LOG animatedIndex 1
LOG animatedIndex 0.8632851491723874
LOG animatedIndex 0.891489351466483
LOG animatedIndex 0.9138750416347815
LOG animatedIndex 0.9316425755464124
LOG animatedIndex 0.9457446764953674
LOG animatedIndex 0.9569375213867082
LOG animatedIndex 0.9658212882250738
LOG animatedIndex 0.9728723386287468
LOG animatedIndex 0.978468760995804
LOG animatedIndex 0.9829106443525916
LOG animatedIndex 0.9864361694936971
LOG animatedIndex 0.9892343806491268
LOG animatedIndex 0.9914553222963229
LOG animatedIndex 0.9932180848477181
LOG animatedIndex 0.9946171903957283
LOG animatedIndex 0.9957276612081754
LOG animatedIndex 0.9966090424686902
LOG animatedIndex 0.9973085952378943
LOG animatedIndex 0.9978638306340945
LOG animatedIndex 0.9983045212581616
LOG animatedIndex 0.9986542976367383
LOG animatedIndex 0.998931915331168
LOG animatedIndex 0.9991522606409889
LOG animatedIndex 0.9993271488278208
LOG animatedIndex 0.9994659576730858
LOG animatedIndex 0.9995761303260984
LOG animatedIndex 0.9996635744186362
LOG animatedIndex 0.9997329788402937
LOG animatedIndex 0.9997880651662013
LOG animatedIndex 0.999831787211542
LOG animatedIndex 1
When contentHeight is decreased, animatedIndex stays at 1 and no flickering occurs:
LOG animatedIndex 1
LOG animatedIndex 1
Environment info
| Library | Version |
|---|---|
| @gorhom/bottom-sheet | 3.6.4 |
| react-native | 0.64.0 |
| react-native-reanimated | 2.1.0 |
| react-native-gesture-handler | 1.9.0 |
Steps To Reproduce
- set
backdropComponent={BottomSheetBackdrop} - modify snap points dynamically
- backdrop flickers
Describe what you expected to happen:
no flickering of backdrop
Ideally, animatedIndex would not change when the snap points are modified as done here.
Maybe when the number of snap points stay the same, animatedIndex should stay constant?
Reproducible sample code
I modified the example app by adding the backdrop to the dynamic snap point example, please have a look: schiller-manuel@86b628e