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] keyboardBehavior="interactive" does not work on Android #1453

Closed
JayJiangCT opened this issue Jul 26, 2023 · 4 comments
Closed

[v4] keyboardBehavior="interactive" does not work on Android #1453

JayJiangCT opened this issue Jul 26, 2023 · 4 comments
Labels
bug Something isn't working no-issue-activity

Comments

@JayJiangCT
Copy link

Bug

I copied the example code about BottomSheetTextInput and made a simple test. But I found out that "interactive" doesn't work on Android phones!

Environment info

Library Version
@gorhom/bottom-sheet ^4.4.7
react-native 0.71.6
react-native-reanimated ^3.1.0
react-native-gesture-handler ^2.10.0

Steps To Reproduce

  1. Click the text input, and show the keyboard
  2. The bottom sheet expands to fill the top
9721390687de0d03919022226f5f4eec.mp4

Describe what you expected to happen:

  1. I would like to offset only the height of the keyboard after I set keyboardBehavior = "interactive"

Reproducible sample code

`import {useCallback, useMemo, useRef} from "react";
import BottomSheet, {BottomSheetTextInput} from "@gorhom/bottom-sheet";
import {StyleSheet, Text, View} from "react-native";

export const BottomSheetScreen = () => {
const bottomSheetRef = useRef(null);

// variables
const snapPoints = useMemo(() => ["25%", "30%"], []);

// callbacks
const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
}, []);

// renders
return (
    <View style={styles.container}>
        <BottomSheet ref={bottomSheetRef} index={1} snapPoints={snapPoints} keyboardBehavior="interactive" keyboardBlurBehavior="restore" onChange={handleSheetChanges}>
            <BottomSheetTextInput style={styles.input} />
            <View style={styles.contentContainer}>
                <Text>Awesome 🎉</Text>
            </View>
        </BottomSheet>
    </View>
);

};

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "grey",
},
contentContainer: {
flex: 1,
alignItems: "center",
},
input: {
marginTop: 8,
marginBottom: 10,
borderRadius: 10,
fontSize: 16,
lineHeight: 20,
padding: 8,
backgroundColor: "rgba(151, 151, 151, 0.25)",
},
});
`

@JayJiangCT JayJiangCT added the bug Something isn't working label Jul 26, 2023
@HuriHuchi
Copy link

same issue

@github-actions
Copy link

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
Copy link

github-actions bot commented Sep 5, 2023

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

@github-actions github-actions bot closed this as completed Sep 5, 2023
@edritech93
Copy link

same issue in the Samsung A14

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

No branches or pull requests

3 participants