Skip to content

[v4] Sheet re-opens after closing on Android when keyboard present - only with 100% detent. #1374

@pgill-rbi

Description

@pgill-rbi

Bug

On Android specifically, the Sheet would intermittently re-open after closing it in the following scenario:

Keyboard is open
Detent is 100%
This was an issue within the @gorhom/bottom-sheet library where the function normalizeSnapPoints would not change the true pixel value of a 100% detent. It always equates to 0. This is specific to Android with adjustResize as the keyboard behaviour.

A condition was added as a patch to prevent exiting a function (onSnapPointsChange) which allows the Sheet to react to snap point changes mid-animation.

A PR to solve this has been submitted here: #1375

Screen.Recording.2023-05-17.at.10.26.25.AM.mov

Environment info

Library Version
@gorhom/bottom-sheet 4.4.4
react-native 0.69.6
react-native-reanimated 2.10.0
react-native-gesture-handler ~2.5.0

Steps To Reproduce

  1. On Android, Open bottomsheet with a bottomsheetflatlist inside, set only one detent at 100%.
  2. Drag down Sheet while keyboard is open ( to close it)

Describe what you expected to happen:

  1. BottomSheet should close.

What actually happens:

  1. BottomSheet closes and reopens.

Reproducible sample code

 const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 200,
    },
    contentContainer: {
      backgroundColor: "white",
    },
    itemContainer: {
      padding: 6,
      margin: 6,
      backgroundColor: "#eee",
    },
  });
  const handleSheetChange = useCallback((index) => {
    console.log("handleSheetChange", index);
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);
  const data = useMemo(
    () =>
      Array(50)
        .fill(0)
        .map((_, index) => `index-${index}`),
    []
  );
  const renderItem = useCallback(
    ({ item }) => (
      <View style={styles.itemContainer}>
        <Text>{item}</Text>
      </View>
    ),
    []
  );
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Box flex={1} alignItems="center" mt="6">
        <Button
          title="Snap To 100%"
          onPress={() => sheetRef?.current?.expand()}
        />
        <BottomSheet
          ref={sheetRef}
          snapPoints={["100%"]}
          onChange={handleSheetChange}
          enablePanDownToClose
          keyboardBehavior="interactive"
          keyboardBlurBehavior="restore"
          android_keyboardInputMode="adjustResize"
        >
          <BottomSheetTextInput />
          <BottomSheetFlatList
            data={data}
            keyExtractor={(i) => i}
            renderItem={renderItem}
            contentContainerStyle={styles.contentContainer}
            keyboardShouldPersistTaps="handled"
          />
        </BottomSheet>
       </Box>
      </GestureHandlerRootView>
 )

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions