[v4] BottomSheetScrollView causes extra padding to appear

[RBrNx]

Bug

Using a combination of BottomSheetModal, BottomSheetScrollView and BottomSheetTextInput with keyboardBehavior set to interactive will result in extra padding/margin appearing when the keyboard is visible - this only applies to Android, on iOS it seems to work as expected.

Environment info

Library	Version
@gorhom/bottom-sheet	4.0.2
react-native	0.63
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Create a BottomSheetModal component that renders a BottomSheetScrollView and a small number of BottomSheetTextInputs
2. Focus one of the lower TextInputs
3. Extra padding/margin appears

Describe what you expected to happen:

1. No extra padding/margin should render above the keyboard

Reproducible sample code

Below is a Snack containing a reproducible sample https://snack.expo.dev/@conorw/v4-bottomsheetscrollview-keyboard-padding-issue

and here are two videos showcasing the issue, one using the above Snack, and the other in my own Production app

https://user-images.githubusercontent.com/1332314/131832648-a60148cc-2c99-4207-9248-83139fd48b70.mp4

https://user-images.githubusercontent.com/1332314/131833763-bc0114ca-eed5-42bf-b01b-840731347f78.mp4

[gorhom]

@RBrNx have you tried to change android_keyboardInputMode to your app android:windowSoftInputMode ? https://gorhom.github.io/react-native-bottom-sheet/props#android_keyboardinputmode

[RBrNx]

@RBrNx have you tried to change android_keyboardInputMode to your app android:windowSoftInputMode ? https://gorhom.github.io/react-native-bottom-sheet/props#android_keyboardinputmode

@gorhom I currently have the softwareKeyboardLayoutMode set to pan in my Expo app.json which matches the adjustPan setting of android_keyboardInputMode in the Snack

[gorhom]

okay, i notice that you have the BottomSheetModalProvider in the BottomSheetModal, which will pick the wrong container height measurement.

I advice you to move BottomSheetModalProvider to the root component , to wrap your app

[gorhom]

i would consider this issue resolve 👍

[RBrNx]

Hey @gorhom, apologies for taking so long to get back to you!

Your suggestion absolutely makes sense, but unfortunately I am still able to replicate the issue. It seems as if the first input works ok, but the further you need to scroll down, the more the issue appears.

https://user-images.githubusercontent.com/1332314/133065110-8b5c8c0a-b04a-4488-9546-f21a2bdefdfa.mp4

I've also updated the Expo Snack I linked previously, which also still showcases the issue on Android

[gorhom]

I will check it out later, thanks for the update

[ramkgunturu]

Even I am facing same issue when I used BottomSheetModal on ScrollView then I am getting extra paddingBottom appending to the Data so that I is moving above of the mobile screen.I am facing this issue from last 2 months but I thought it is my mistake and today I checked all the scenarios in my programming but I didn't find out any resolves in my code. So could you please suggest any solution for the problem I am facing?

[gorhom]

@RBrNx i couldn't reproduce the issue on provided snack , could you please verify it, thanks

[mikealche]

Hihi @gorhom ! Thanks for this amazing library.

I'm also experiencing the same issue. In my case I want to replicate tiktok's comments in which the textinput is always floating at the bottom. That's why I thought I could use the footerComponent prop to render a TextInput... but I'm getting the exact same behavior as the above comments describe .

EDIT: upon further debugging, it has nothing to do with where the TextInput is located. Also it doesn't matter if it's in the fotterComponent prop or not. It seems that the issue is the keyboard opening

[KingDoxik]

Same issue here. Works great on ios, only happens on Android. ScrollView gets smaller when keyboard is open. The white space is equal to the keyboard size.

[gorhom]

@mikealche @KingDoxik could you provide reproducible snacks i can investigate the issue on ? thanks

[SrAnthony]

I was having the same problem. Fixed by removing this logic:

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 3606001..faf6e76 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -304,10 +304,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       return $modal
-        ? Math.abs(
-            animatedKeyboardHeight.value -
-              Math.abs(bottomInset - animatedContainerOffset.value.bottom)
-          )
+        ? Math.abs(bottomInset - animatedContainerOffset.value.bottom)
         : Math.abs(
             animatedKeyboardHeight.value - animatedContainerOffset.value.bottom
           );

Not sure if this will impact other parts of the package, still testing.

[antonio5mins]

Hey guys,

Same happens for us.

https://user-images.githubusercontent.com/86594608/140560280-087b8908-cdea-42fe-8efe-08f3e57806fb.mp4

[raedhellal]

Same issue for me, there is a random padding, is there any solution?

[raedhellal]

it worked for me when i changed KeyboardBehavior prop to "extend"

[vitorsilvalima]

I have a similar issue on Android. I'm currently running the Example App and the list has 11 items that can be scrolled. However, it only shows 10 items when the keyboard is open:

https://user-images.githubusercontent.com/9752658/146922802-4615e0e8-147b-48b5-9068-25e3145019ed.mov

[vitorsilvalima]

I actually got it working by setting keyboardBehavior="extend"

<RNBottomSheet
      ref={ref}
      snapPoints={animatedSnapPoints}
      handleHeight={animatedHandleHeight}
      contentHeight={animatedContentHeight}
      animateOnMount={false}
      onClose={onClose}
      backdropComponent={renderBackdrop}
      backgroundStyle={styles.backgroundStyle}
      handleIndicatorStyle={styles.handleIndicator}
      enablePanDownToClose
      keyboardBehavior="extend"
      keyboardBlurBehavior="restore"
    >

[AppneticSoftware]

Hello all, i kanda have a similar problem. It seams that keyboardBehavior isn't working correctly - at least for me. I have two snap points (aprox. 25% and 50%). My BottomSheetTextInput is within the 25% but as soon as tapping the TextInput in order to type something it straight goes to 50%. Although its the default I also did set keyboardBehavior="interactive".

Working on an iOS App - haven't tested it on Android at all.

[vanenshi]

I manage to resolve it by providing the correct android_keyboardInputMode

[InfiniteRain]

For the people who happen to stumble upon this thread: what worked for me was setting android:windowSoftInputMode to adjustPan in the AndroidManifest.xml

[thespacemanatee]

@gorhom many people including me seem to still encounter this problem of extra padding (around 32 pixels), any idea what could be causing it? It happens on both platforms and I already set keyboard window resize to adjustPan.

[filippobarcellos]

Still happening. Has anyone found a solution?

[samuellima99]

🐞 I'm facing the same problem on Android, I'm using the bottom sheet in version 4 and when focusing on my input, a very large padding is added just below the input and everything ends up being white.

[Narendra-Rathore-16]

🐞 I'm facing the same problem on Android, I'm using the bottom sheet in version 4 and when focusing on my input, a very large padding is added just below the input and everything ends up being white.

I am using the same version 4, and facing same issue in Android. Have you somehow managed to make it work?

[pedpess]

For the people who happen to stumble upon this thread: what worked for me was setting android:windowSoftInputMode to adjustPan in the AndroidManifest.xml

@InfiniteRain according to Android docs adjustResize is preferable, so this is not the final solution. I think it works as a workaround but could potentially have side effects in UX depending on your use case of keyboard, adjustPan might overlap the view with the keyboard.

[jamesdunay]

I was having the same problem. Fixed by removing this logic:

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 3606001..faf6e76 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -304,10 +304,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       return $modal
-        ? Math.abs(
-            animatedKeyboardHeight.value -
-              Math.abs(bottomInset - animatedContainerOffset.value.bottom)
-          )
+        ? Math.abs(bottomInset - animatedContainerOffset.value.bottom)
         : Math.abs(
             animatedKeyboardHeight.value - animatedContainerOffset.value.bottom
           );

Not sure if this will impact other parts of the package, still testing.

Having success with this so far.

[boplkj]

this works well for android, but in my case ios stops working, so the following code works correctly for me: ` animatedKeyboardHeightInContainer.value = $modal

•      ? Math.abs(
  

•          _keyboardHeight -
  

•            Math.abs(bottomInset - animatedContainerOffset.value.bottom)
  

•        )
  

•    ? Platform.OS === 'ios'?  Math.abs(
  

•                    _keyboardHeight -
  

•                      Math.abs(bottomInset - animatedContainerOffset.value.bottom)
  

•                  ) : Math.abs(bottomInset - animatedContainerOffset.value.bottom)
       : Math.abs(_keyboardHeight - animatedContainerOffset.value.bottom);`
  

Untitled-1.txt

[anurbecirovic]

Adding android_keyboardInputMode='adjustResize' property worked for me

I also added:

keyboardBehavior='interactive'
keyboardBlurBehavior='restore'

[conrad-vanl]

We're also having this issue. Our team opened https://github.com/gorhom/react-native-bottom-sheet/issues/1195 to try and document before we saw this. We were able to fix on our end by doing two things:

1. Not using BottomSheetScrollView
2. Adding android_keyboardInputMode='adjustResize'

[hotaryuzaki]

i have tricky solution for this,

my problem was i had absolute view as my footer inside BottomSheetModal, and i had problem with adjustResize and adjustPan. if i set adjustResize the bottomsheet will going up like there is big margin with the keyboard. if i set adjustPan there will be a problem for smartphone with large screen only, the bottomsheet will sink to the back of the keyboard

adjustResize	adjustPan

my bottomsheet component FilterBottomSheet.js like this

      <View key={index} style={{ flex: 1 }}>
        <  style={styles.filterBottomSheetContent}>
          <View style={styles.filterSelectRadio}>
            <FilterData data={filterFormTemp} />
          </View>
        </ScrollView>

        <View style={styles.filterBottomSheetFooter}> // THIS IS ABSOLUTE VIEW AS FOOTER
          <Button
            style={[styles.filterBottomSheetButton, styles.filterBottomSheetReset]}
            onPress={() => _onPressFilter(name, 'reset')}
          >
            <OpenSansSemiBold style={styles.filterBottomSheetButtonText}>Reset</OpenSansSemiBold>
          </Button>

          <Button
            style={[styles.filterBottomSheetButton, styles.filterBottomSheetSimpan]}
            onPress={() => _onPressFilter(name, 'simpan', filterFormTemp)}
          >
            <OpenSansSemiBold style={[styles.filterBottomSheetButtonText, { color: Colors.colorLevel1 }]}>Simpan</OpenSansSemiBold>
          </Button>
        </View>
      </View>

i tried using BottomSheetView in my absolute View but the problem still occured. i tried BottomSheetScrollView as my ScrollView but the problem still occured, and other issue occured that it cannot be scrolled. (for this issue im using ScrollView from react-native-gesture-handler) i cannot used BottomSheetFooter because it's in diffferent component from the parent BottomSheetModal

i tried everything from event focus input, keyboard listener in the component, all make the keyboard dismissed because it would rerender the component.

finally i solved this with created a keyboard listener in the parent that contain BottomSheetModal like this:

  useEffect(() => {
    let unmounted = false; // FLAG TO CHECK COMPONENT UNMOUNT
    // BUG FIXED BOTTOMSHEET FOR ABSOLUTE VIEW WHEN KEYBOARD SHOW
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardBottomInset(0.1);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardBottomInset(0);
    });

    if (!unmounted) {
        ...
    }

    // CLEAR FUNCTION COMPONENT UNMOUNT
    return () => {
      unmounted = true;
      showSubscription.remove();
      hideSubscription.remove();
    }

  }, []);
  
    <BottomSheetModal
      key="filterHarga"
      ref={bottomSheetHargaRef}
      index={0}
      snapPoints={snapPoints}
      onChange={(index) => _filterChange("price", index)}
      backdropComponent={renderBackdrop}
      keyboardBehavior="fillParent"
      keyboardBlurBehavior="restore"
      bottomInset={keyboardBottomInset}
    >

please look setKeyboardBottomInset(0.1) and bottomInset={keyboardBottomInset} setKeyboardBottomInset(0.1) in the keyboardDidShow event listener would tricked the keyboard event to change the value bottomInset={keyboardBottomInset}

hope it helps!