[v4] | [v2] iOS BottomSheetTextInput multiple lines on BottomSheetModal with BottomSheetScrollView

[micaelomota]

Bug

Hi, first let me say thank you for working on this awesome library! It has helped me a lot.

I have a complex use case where I would like to show a form in the bottom sheet with a scrollview and I'm facing this issue:

https://github.com/gorhom/react-native-bottom-sheet/assets/12684971/d7e2d26a-4fd2-4db5-95db-23a55f7e64ad

I burned a couple of hours digging into everything involved in this implementation (my ui kit, formik and even a known bug on the react-native project), however, in the end it seems that there is an issues on the way this library handle keyboard events. I tried using the bare input instead of BottomSheetTextInput and the error persisted.

Then I decided to render the form in the screen directly, outside of the BottomSheetModal and it worked.

So I decided to try to implement a custom version of the bottom sheet with reanimated following an example in their website and again it worked fine (of course without all the beautiful ux features provided by react-native-bottom-sheet).

https://github.com/gorhom/react-native-bottom-sheet/assets/12684971/9a94a1ee-4bdc-4103-b4d8-24b3ccf4f9ef

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.3
react-native	0.74.2
react-native-reanimated	3.10.1
react-native-gesture-handler	2.16.1

Steps To Reproduce

1. Setup a screen with BottomSheetModal + BottomSheetScrollView + BottomSheetTextInput
2. Add a state variable on the screen, then onChangeText update the value`. And pass the value as props to the input

Describe what you expected to happen:

1. The form should work fine

Reproducible sample code

<BottomSheetModal
      ref={ref}
      index={1}
      snapPoints={snapPoints ?? ["10%", "25%"]}
      onChange={onChange}
      handleIndicatorStyle={{
        backgroundColor: color,
      }}
      handleStyle={{
        backgroundColor,
        borderTopLeftRadius: 14,
        borderTopRightRadius: 14,
      }}
      backdropComponent={BottomSheetBackdrop}
      handleComponent={
        leftAction || title || rightAction
          ? () => (
              <ThemedView style={styles.modalTitleContainer}>
                {leftAction ? (
                  <ThemedButton type="link" color="primary" {...leftAction} />
                ) : (
                  <View />
                )}

                {title && (
                  <ThemedText type="defaultSemiBold">{title}</ThemedText>
                )}

                {rightAction ? (
                  <ThemedButton type="link" color="primary" {...rightAction} />
                ) : (
                  <View />
                )}
              </ThemedView>
            )
          : undefined
      }
      {...modalProps}
    >
      <BottomSheetScrollView
        style={{
          backgroundColor,
          flex: 1,
        }}
      >
        <BottomSheetTextInput
            placeholder="Quer adicionar alguma observação aqui?"
            multiline
            numberOfLines={4}
            onChangeText={handleChange("notes")}
            onBlur={handleBlur("notes")}
            error={errors.notes ?? undefined}
            value={values.notes?.toString()}
          />
      </BottomSheetScrollView>
    </BottomSheetModal>

[bill9222729]

I encountered the same issue today, and I found an interesting solution. The problem is resolved by encapsulating the BottomSheetTextInput into a component that does not contain BottomSheet. The key is that the value given to BottomSheetTextInput should not be at the same level as BottomSheet. If the value causes the BottomSheet to re-render, it will create issues.

Here is an example using the code provided by @micaelomota:

// BottomSheetTextInputV2
export const BottomSheetTextInputV2 = () => {
  return (
    <BottomSheetTextInput
      placeholder="Quer adicionar alguma observação aqui?"
      multiline
      numberOfLines={4}
      onChangeText={handleChange('notes')}
      onBlur={handleBlur('notes')}
      error={errors.notes ?? undefined}
      value={values.notes?.toString()}
    />
  );
};

// Code provided by micaelomota
<BottomSheetModal
  ref={ref}
  index={1}
  snapPoints={snapPoints ?? ["10%", "25%"]}
  onChange={onChange}
  handleIndicatorStyle={{
    backgroundColor: color,
  }}
  handleStyle={{
    backgroundColor,
    borderTopLeftRadius: 14,
    borderTopRightRadius: 14,
  }}
  backdropComponent={BottomSheetBackdrop}
  handleComponent={
    leftAction || title || rightAction
      ? () => (
          <ThemedView style={styles.modalTitleContainer}>
            {leftAction ? (
              <ThemedButton type="link" color="primary" {...leftAction} />
            ) : (
              <View />
            )}
            {title && (
              <ThemedText type="defaultSemiBold">{title}</ThemedText>
            )}
            {rightAction ? (
              <ThemedButton type="link" color="primary" {...rightAction} />
            ) : (
              <View />
            )}
          </ThemedView>
        )
      : undefined
  }
  {...modalProps}
>
  <BottomSheetScrollView
    style={{
      backgroundColor,
      flex: 1,
    }}
  >
    <BottomSheetTextInputV2 />
  </BottomSheetScrollView>
</BottomSheetModal>

[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.

[MSetnik]

Hi,

I have the same issue and i was able to solve it. Instead of BottomSheetTextInput, use TextInput from gesture-handler.

import { TextInput as TextInputGH } from "react-native-gesture-handler";

[IlirEdis]

Same issue. Please reopen. It not working with multiline TextInput

[devlprkhan]

Same here

[arnoldo-rodriguez]

same

[Mihai-github]

Same

[Mihai-github]

@micaelomota have you found any workaround for this?

[NaudyDev]

Please let us know on textinput if I put multiple line true and add enter enter to next lines it extends the bottom sheet but it’s getting closed right away after enter the two or three lines and if try to focus on it again it opens the keyboard but bloses it right away with bottom sheet and it flickers while closing like it’s trying to stay open but gets closed

@micaelomota @gorhom

[micaelomota]

@Mihai-github @NaudyDev sorry for the time to reply, github notifications are the worst for me to see. I ended up redesigning my feature completely to avoid using this component :/