CODEWITHSUNDEEP
javascriptandroidreactjsxcodereact-native
Alejandro Gonzalez
Alejandro Gonzalez

Reputation: 1371

i need to give two clicks when the keyboard is open -- React native

I have a project in react native, i created a view that it has a button, when the user does not open the keyboard, he only gives a click, but if the keyboard opens, the user needs to gie two clicks, because when the user click at button is nos functioned. It should be hidding.

Someone knows how the click can function, if the keyboard is open.

The code is the next

 return (
        <ScrollView>
      <View style={LoginStyles.container_login}>
        <View style={LoginStyles.container_detail}>
          <View style={LoginStyles.container_components}>
            <View  style={LoginStyles.container_image}>
              <Image
                  style={LoginStyles.container_display_image}
                  source={logo}/>
            </View>
            <TextInput style={LoginStyles.container_user} placeholder = {labelApp.holderUser}  onChangeText={(user) => this.checkDataEmail(user)}/>
            <TextInput  secureTextEntry={true}  style={LoginStyles.container_password} placeholder = {labelApp.holderPassword} onChangeText={(password) => this.checkDataPassword(password)}/>
            <TouchableOpacity disabled={ this.state.disabled }
                              style={this.state.disabled ? LoginStyles.button_disabled: LoginStyles.button_login}
              onPress={this.handleClickBtnEnter}
            >
              <Text style={LoginStyles.text_button_login}>
                {labelApp.textButtonLogin}
              </Text>
            </TouchableOpacity>
            <Text
              style={LoginStyles.text_forgot_password}
              onPress={this.handleClickBtnEnter}
            >
              {labelApp.textForgotUser}
            </Text>
            <Text
              style={LoginStyles.text_register}
              onPress={this.handleClickBtnEnter}
            >
              {labelApp.textRegister}
            </Text>
            <View style={LoginStyles.container_image_share}>
              <Image style={LoginStyles.container_display_share}
                     source={facebook}/>
              <Image  style={LoginStyles.container_display_share}
                  source={google}/>
            </View>
            <View  style={LoginStyles.container_image}>
              <Image
                  style={LoginStyles.container_display_register}
                  source={register}/>
            </View>
          </View>
        </View>
      </View>
        </ScrollView>
    );

The event is on TouchableOpacity

Upvotes: 10

Views: 2886

Answers (1)

CampbellMG
CampbellMG

Reputation: 2220

Try setting the keyboardShouldPersistTaps value on your ScrollView to handled, like this: 

 return (
        <ScrollView keyboardShouldPersistTaps='handled'>
          ...
        </ScrollView>
    );

Upvotes: 15

Related Questions