toUpperCase() is not working in react native ,its repeating first letter two times

user_8477139 0
Viewed 924

Here is my code there are 3 input fields, in uniqueIdNo whenever I have to type it should automatic convert to uppercase. I am using the toUpperCase() function, it converts to the upper case also, but if I am writing ab two-letter its coming AAB means whatever the first letter I am typing it adding that and coming two times. 

this.state={
  firstName: props.firstName || '',
  lastName: props.lastName || '',
  uniqueIdNo:props.uniqueIdNo || '',
}

onChangeText = async (text, identifier) => {
  if (identifier === "FN") {
    this.setState({
      firstName: text
    });
  } else if (identifier === "LN") {
    this.setState({
      lastName: text
    });
  } else if (identifier === "UIN") {
    this.setState({
      uniqueIdNo: text.toUpperCase()
    });
  }
};

<Item style={{ borderColor: "#00fff", borderBottomWidth: 0.6 }}>
  <Input
    value={firstName}
    keyboardType="default"
    onChangeText={text => this.onChangeText(text, "FN")}
  />
</Item>
<Item style={{ borderColor: "#00fff", borderBottomWidth: 0.6 }}>
  <Input
    value={lastName}
    keyboardType="default"
    onChangeText={text => this.onChangeText(text, "LN")}
  />
</Item>
<Item style={{ borderColor: "#00fff", borderBottomWidth: 0.6 }}>
  <Input
    value={uniqueIdNo}
    onChangeText={text => this.onChangeText(text, "UIN")}
  />
</Item>
react-native reactjs javascript
4 Answers

You can use the keyboardType property for that in android you can set keyboard type to visible-password and iOS default.

 keyboardType={Platform.OS === 'ios' ? 'default' : 'visible-password'}
user_174363250

Hey you can check my expo-snack link, i couldnt find the error, please do check : expo-snack

Code is as below :

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
export default class App extends React.Component {

constructor(props){
  super(props)
this.state={
  firstName:'',
  lastName:  '',
  uniqueIdNo: '',
}
}

onChangeText = async (text, identifier) => {
  if (identifier === "FN") {
    this.setState({
      firstName: text
    });
  } else if (identifier === "LN") {
    this.setState({
      lastName: text
    });
  } else if (identifier === "UIN") {
    this.setState({
      uniqueIdNo: text.toUpperCase()
    });
  }
};

  render() {
    let {firstName,lastName,uniqueIdNo} = this.state;
    return (
      <View style={styles.container}>
       <View style={{ borderColor: "#00fff", borderBottomWidth: 0.6 }}>
  <TextInput
    value={firstName}
    keyboardType="default"
    onChangeText={text => this.onChangeText(text, "FN")}
  />
</View>
<View style={{ borderColor: "#00fff", borderBottomWidth: 0.6 }}>
  <TextInput
    value={lastName}
    keyboardType="default"
    onChangeText={text => this.onChangeText(text, "LN")}
  />
</View>
<View style={{ borderColor: "#00fff", borderBottomWidth: 0.6 }}>
  <TextInput
    value={uniqueIdNo}
    onChangeText={text => this.onChangeText(text, "UIN")}
  />
</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Hope it helps. feel free for doubts

user_113553030

Try this:

if (identifier === "UIN") {
var uppercasetext = text.toUpperCase();//To convert Upper Case
this.setState({
  uniqueIdNo: uppercasetext    
});
user_129845520
user_59007930
Related