[v4] | Keyboard pushing bottom sheet content to screen top, with empty space in between

[farhann1]

Bug

const snapPoints = useMemo(() => ['50%'], []);

<BottomSheetModalProvider>
  ....

  <BottomSheetModal
     ref={bottomSheetModalRef}
     index={0}
     snapPoints={snapPoints}
     onChange={handleSheetChanges}
     keyboardBlurBehavior='restore'
 >
           ....
                       </BottomSheetModal>
                  ....
               </BottomSheetModalProvider >


<BottomSheetTextInput style={{
       borderRadius: 10,
       borderWidth: 1,
       fontSize: 15,
       lineHeight: 15,
       padding: 12,
       marginVertical: 12
     }}
       keyboardType='numeric'
       placeholder="Enter amount as shown on bill"
       value={billAmount}
       onChangeText={
         amount => setBillAmount(amount.replace(TRAILING_ZEROS_REGEX, EMPTY_STRING))
       }
     />

Launching keyboard for BottomSheetTextInput, pushes the content to the top of the screen with empty space in between. This happens even though i am using the keyboardBehaviour as interactive.

Tried using android_keyboardInputMode also, but same issue.

Please note that issues that do not follow the template may be closed.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.73.6
react-native-reanimated	3.6.2
react-native-gesture-handler	2.14.0

Steps To Reproduce

1. Launch bottom sheet modal with bottom sheet text input.
2. Use keyboardBehavior as interactive
3. Observe the extra space between keyboard and content.

Describe what you expected to happen:

1. Content should get pushed upwards by the height of the keyboard.

Reproducible sample code

WIP

[jasimchz]

try this props

keyboardBehavior={'interactive'}
keyboardBlurBehavior={'restore'}

<BottomSheetModal
              enableDynamicSizing
              keyboardBehavior={'interactive'}
              keyboardBlurBehavior={'restore'}
              {...rest}>
             ...
            </BottomSheetModal>

[farhann1]

enableDynamicSizing keyboardBehavior={'interactive'} keyboardBlurBehavior={'restore'}

Thanks for the suggestion @jasimchz , but i already tried out those props and it is not working for me..

Also when i add the enableDynamicSizing prop, the BottomSheetModal is not responding on button click anymore.

[Lelouch65428]

Try adding the provider on app.tsx. Also try removing snapPoints when enableDynamicSizing is true. To control the height you can add topInset accordingly else the modal will go to the max screen height.Try putting android_keyboardInputMode to adjustResize.

[Mitrandir-main]

Same issue, any other ideas?

[Lelouch65428]

@Mitrandir-main have you added the provider on app.tsx and put the modal outside your scrollview?

[farhann1]

I replaced the BottomSheetTextInput with TextInput from 'react-native-paper' due to some styling reasons.. but surprisingly the above issue also got fixed with it. Cheer!

Resolving this issue for now.