react-native-bottom-sheet Fix android issues with dynamic snap points and open keyboard + `onAnimate` values

Motivation

I was facing an issue on android when using dynamic snap points and the adjustPan setting when content height changed while the keyboard was open. I think the following video best showcases the problem:

https://user-images.githubusercontent.com/1866649/199200414-1d78a25c-538d-4021-9f27-4c4c9003d52b.mp4

as you can see, the height of the content changes when the validation text appears or disappears, thereby adding or removing about twenty pixels.

I've narrowed down the issue: because of the keyboard height, the appropriate snapPoint index is not found and triggers the intermediary collapse of the sheet.

I've tested this on android and ios:

with and without dynamic snap points setting
with single and multiple snap points
with modal/regular bottom sheet
with bottomsheet scrollview

I have not found this to cause any regressions, but there may be a better solution to this problem.

Edit: Upon further investigation, I also found some issues with onAnimate being provided with the wrong values (both ios and android), I've fixed that in https://github.com/gorhom/react-native-bottom-sheet/pull/1163/commits/0c7e1532eaac8cd56488ca4c9221c1afdd2714fc, but I'm starting to think my fixes are not tackling the root issue, @gorhom please advise 🙂

Nov 01 '22 09:11 paulrostorp

for any interested, here is a patch:

@gorhom+bottom-sheet+4.4.5.patch

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
index b166440..ce74512 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -693,9 +693,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * store next position
          */
-        animatedNextPosition.value = position;
+        animatedNextPosition.value = position + animatedKeyboardHeight.value;
         animatedNextPositionIndex.value =
-          animatedSnapPoints.value.indexOf(position);
+          animatedSnapPoints.value.indexOf(position + animatedKeyboardHeight.value);

Nov 01 '22 09:11 paulrostorp