CODEWITHSUNDEEP
reactjsreact-native
Anthony Sette
Anthony Sette

Reputation: 837

Why does the keyboard disappear after each key pressed in my react native app?

The main portion of my code is below, and basically, it allows the user to pick a country and type their phone number in. Once the phone number is recognized as valid the color of the icon is changed. The only problem is that the keyboard continues to disappear each time a key on the number pad is pressed. Here is an example:

enter image description here

Here is the source code from the Phone Login Screen. Without the line onChangePhoneNumber={ (phone) => {this.updateInfo()} } the keyboard doesn't disappear as you type but then the next icon won't change to that shade of blue when a valid number is typed. That function updates the states as the user types. 

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, Keyboard} from 'react-native';
import { Icon } from 'react-native-elements';

import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
import PhoneInput from 'react-native-phone-input';

export default class PhoneLogin extends Component {

    constructor() {
        super();

        this.state = {
            valid: "",
            type: "",
            value: "",
            iconColor: "#D3D3D3",
        };

        this.updateInfo = this.updateInfo.bind(this);
    }

    updateInfo() {
        this.setState({
            valid: this.phone.isValidNumber(),
            type: this.phone.getNumberType(),
            value: this.phone.getValue().replace(/[- )(]/g,''),
        });
    }

    render() {
        return (
          <View style={styles.container}>
            <PhoneInput
              ref={ref => {
                this.phone = ref;
              }}
              style={{height: 50, borderColor:'#44c0b9', borderBottomWidth:2}}
              onChangePhoneNumber={ (phone) => {this.updateInfo()} }
            />

            <KeyboardAccessory backgroundColor="#fff">
                <View style={{ alignItems: 'flex-end', padding:10 }}>
                    <Icon
                        raised
                        reverse
                        color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"}
                        name='arrow-right'
                        type='font-awesome'
                        onPress={ Keyboard.dismiss()}
                    />
                </View>
            </KeyboardAccessory>
          </View>
        );
    }

}

Upvotes: 4

Views: 3690

Answers (1)

Anthony Sette
Anthony Sette

Reputation: 837

The package react-native-phone-input has a function called focus which basically places the focus on the text input. In my code this.phone = ref;, so when I run this.phone.focus() the text input is in focus and the keyboard shows up. In order to prevent the keyboard from disappearing all I had to do was add the following function.

componentDidMount(){
    this.phone.focus()
}

Upvotes: 0

Related Questions