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

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-06-18.at.17.24.36.mp4

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

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-06-18.at.18.57.23.mp4

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]

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]

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