Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pgill-rbi opened this issue May 17, 2023 · 2 comments · Fixed by #1392
Closed
Labels
bug Something isn't working

Comments

@pgill-rbi
Copy link

pgill-rbi commented May 17, 2023

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>
 )
@pgill-rbi
Copy link
Author

PR that addresses this issue has been submitted here: #1375

@gorhom
Copy link
Owner

gorhom commented Jun 4, 2023

this should be fix in the next patch release

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants