Skip to content

[v4] | [v2] Janky bottom sheet dynamic size if using BottomSheetTextInput #1821

Description

@XantreDev

Bug

Janky bottom sheet dynamic size if using BottomSheetTextInput
BottomSheetTextInput

bottom-sheet-input.mp4

TextInput

bottom-sheet-regular-input.mp4

Environment info

Library Version
@gorhom/bottom-sheet 4.6.1
react-native 0.73.7
react-native-reanimated 3.8.1
react-native-gesture-handler 2.16.0

Steps To Reproduce

  1. Type something to the input

Describe what you expected to happen:

  1. Bottom sheet size changes smoothly

Reproducible sample code

const Component = () => {
  const [text, setText] = useState("");
  const ref = useRef(null);
  useEffect(() => {
    ref.current?.present();
  }, []);
  
  return (
    <BottomSheetModal
      ref={ref}
      enableDynamicSizing
      enableContentPanningGesture={false}
    >
      <BottomSheetTextInput className="py-10" value={text} onChangeText={setText} />
      {text.split("").map((it) => (
        <View className="h-1 bg-red py-1" />
      ))}
    </BottomSheetModal>
  );
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions