Search code examples
react-nativekeyboardscrollview

Two clicks instead one when use scrollView in react-native


When I use a <ScrollView> in react-native and the keyboard is open, I need use two clicks instead one to execute a button. The first click only close the keyboard and the second click execute the action from button. The clicks are executed in the same point of the screen(over the button). I use <KeyboardAvoidView> too because.

        <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={styles.Container}
        >
            <ScrollView>
                <Components/>
                <Components/>
                <Components/>
                <Components/>
                <Components/>
                <Button/>
            </ScrollView>
        </KeyboardAvoidingView>

With ScrollView

enter image description here

Without ScrollView (Desire behavior) enter image description here

I make some tests:

  1. When remove <ScrollView> : I use one click but not display the button on screen because I have many componentes;

  2. Uses <keyboardAvoidingView> not alter the behavior from <ScrollView>

  3. I try uses <KeyboardAwareScrollView> but I couldn't install it.

    "react": "18.2.0",
    "react-native": "0.71.2",
    

Solution

  • I believe you're looking for the keyboardShouldPersistTaps prop.