1

So I have set autoCapitalize and keyboardType to a TextInput in React Native. But autoCapitalize is ignored.

There was a bug in React native codebase which they fixed and the solution was : (Work-around) If using TextInput in a component and the keyboardType should be 'default' omit the keyboardType property.

<TextInput 
    style={styles.textStyle}
    placeholder="Enter ID" 
    value={this.state.idValue}
    autoCapitalize="characters"
    keyboardType = {this.state.keyboardType}
    maxLength ={this.state.maxlengthValue}
    onChangeText={idValue => this.setState({ idValue })}
/>

// Setting the default state

componentDidMount(){
   let { idType } = this.props.navigation.state.params.data;
   let keyboardType = "default";
   let maxlengthValue = 10;
   if(idType === "Aadhaar"){
      keyboardType = "number-pad";
      maxlengthValue = 12;
   } else if(idType === "Passport"){
               maxlengthValue = 8;
          }
      this.setState({ idType , keyboardType, maxlengthValue});
 }

My use case is I have to define a default KeyboardType and then based on the option user has selected will change the KeyboardType, so I cannot omit the KeyboardType property.

I am new to React-Native in fact, I am new to Javascript altogether, guide me where am I wrong or how to work-around this.

Muneeb Ali
  • 472
  • 6
  • 14

0 Answers0