[v4] Keyboard does not push the bottom sheet up when open on iOS

[jamesbtlr]

Bug

When interacting with an input field within the bottom sheet on iOS, the keyboard opens above the bottom sheet instead of pushing the content upwards with it. This only seems to be an issue on iOS, as it's working correctly for us on Android.

Environment info

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

Steps To Reproduce

1. Have a bottom sheet that contains a TextInput
2. Focus into the TextInput so that you can start typing
3. Keyboard appears over the top of the Bottom Sheet instead of pushing the screen content upwards
4. This means that a user cannot see what they are typing into the TextInput

Describe what you expected to happen:

1. When focusing into the TextInput field, the screen content (including Bottom Sheet) should be pushed upwards, so that the keyboard does not cover the input field and a user can see what they are typing

Reproducible sample code

Can provide later if needed.

[fabriziocucci]

@jamesbtlr, it is true that on Android it works out of the box but you can make it work also for iOS following the suggestions in the Keyboard Handling doc.

[jamesbtlr]

Sorry, but I don't understand what exactly you mean here. I've tried copying things over, but the problem still persists.

[MRL-00]

@jamesbtlr this does work, at least it does for me. One thing I noticed was that there were styles being applied to the container so the bottom sheet wasn't able to go that high. Here is an example that works for me.

<BottomSheetHandler
        bottomSheetRef={bottomSheetRef}
        handleSheetChange={handleSheetChange}
        onSave={() => {}}>
        <BottomSheetTextInput style={styles.textInput} value='Awesome 🎉' />
</BottomSheetHandler>

import { View, StyleSheet } from 'react-native';
import React from 'react';
import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import DefaultButton from './buttons/DefaultButton';

interface BottomSheetHandlerProps {
  bottomSheetRef: React.RefObject<BottomSheet>;
  handleSheetChange: (index: number) => void;
  children: React.ReactNode;
  onSave: () => void;
}

export default function BottomSheetHandler({
  bottomSheetRef,
  handleSheetChange,
  children,
  onSave,
}: BottomSheetHandlerProps) {
  return (
    <BottomSheet
      backdropComponent={backdropProps => (
        <BottomSheetBackdrop {...backdropProps} disappearsOnIndex={-1} appearsOnIndex={0} />
      )}
      ref={bottomSheetRef}
      index={-1}
      snapPoints={['90%', '50%', '25%']}
      onChange={handleSheetChange}
      enablePanDownToClose
      keyboardBehavior='interactive'>
      <View style={styles.bottomSheetContainer}>
        {children}
        <DefaultButton title='Save' onPress={onSave} />
      </View>
    </BottomSheet>
  );
}

const styles = StyleSheet.create({
  bottomSheetContainer: {
    flex: 1,
    alignItems: 'center',
    padding: 20,
  },
});

https://github.com/user-attachments/assets/604e2d61-23aa-4590-81b8-50f021a0c8ec

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[peefg]

~~has this been solved? I am still facing this issue.~~

Edit:

Right, I guess the issue lies with a component TextInput. You should be using BottomSheetTextInput like is in above example by @MattL-NZ