onPress() function of TouchableOpacity does not work at first if the keyboard is open [duplicate]

Question

I have used TouchableOpacity as my submit button, after filling the form(Login/Registration/...) when I click on submit button(TouchableOpacity), the keyboard hides (if open), and then I need to press again on submit button and then the onPress method gets called.

What I want to achieve is if I click on submit button, the onPress() method should call, regardless of the keyboard is open or not. I have to click two times to submit the form which does not look good.

Also, I have not tested this behaviour on IOS, android only.

EDIT:1

Login Screen Code =>

<KeyboardAvoidingView>
   <ScrollView>
    <View style={styles.container}>
    <View style={styles.container_one}>
        <Image
        style={{ height: 100, marginTop: 40 }}
        source={require("../images/logo.png")}
        />
    </View>

    <View style={styles.container_three}>
        <View>
        <View style={styles.container_two}>
            <Text style={styles.text_style_two}>Login</Text>
        </View>

        <View>
            <Text style={styles.text_style_three}>
            Please enter mobile number
            </Text>
            <TextInput
            style={styles.text_input_1}
            autoCapitalize="none"
            keyboardType="numeric"
            onChangeText={text => {
                this.setState({
                username: text
                });
            }}
            value={this.state.username}
            />
        </View>

        <View>
            <Text style={styles.text_style_three}>
            Please enter your password
            </Text>
            <TextInput
            style={styles.text_input_1}
            secureTextEntry={true}
            autoCapitalize="none"
            onChangeText={text => {
                this.setState({
                password: text
                });
            }}
            value={this.state.password}
            />
        </View>
        <View
            style={{
            width: screenWidth / 1.3,
            flexDirection: "row",
            justifyContent: "center"
            }}
        >
            <View>
            <TouchableOpacity
                style={styles.button_1}
                onPress={() => {
                if (this.state.username == "") {
                    alert("Username can not be blank");
                } else if (this.state.password == "") {
                    alert("Password can not be blank");
                } else {
                    this.submitLogin(
                    this.state.username,
                    this.state.password
                    );
                }
                }}
            >
                <Text style={CommonStyles.buttonText}>Login</Text>
            </TouchableOpacity>
            </View>
        </View>
        </View>
    </View>
    <View style={{ alignItems: "center" }}>
        <View style={{ marginBottom: 10 }}>
        <Text style={{ fontSize: 20 }}>-OR-</Text>
        </View>
        <View style={{ marginBottom: 10 }}>
        <TouchableOpacity
            onPress={() => {
            this.props.navigation.navigate("Registration");
            }}
        >
            <Text style={styles.text_style_one}>Sign up here</Text>
        </TouchableOpacity>
        </View>
    </View>
    <View style={{ alignItems: "center" }}>
        <View style={{ marginBottom: 10 }}></View>

        <View style={{ marginBottom: 10 }}>
        <TouchableOpacity
            onPress={() => {
            this.props.navigation.navigate("ForgotPassword");
            }}
        >
            <Text style={styles.text_style_five}>forgot password?/Text>
        </TouchableOpacity>
        </View>
    </View>
    </View>
  </ScrollView>
</KeyboardAvoidingView>

Answer 1

Just add keyboardShouldPersistTaps={'handled'} to your ScrollView

<ScrollView keyboardShouldPersistTaps={'handled'}>
 ......
 ..............
</ScrollView>