CODEWITHSUNDEEP
react-native
Dale
Dale

Reputation: 619

React Native Allow only lowercase input for TextInput

Is it possible to have a TextInput for react native that allows only lowercase input?

As of now, tried this code:

state = { login: '' }

changeUsernameToLowercase = (input) => {
  var temp = input.toLowerCase()
  this.setState({login: temp})
}

<TextInput
  onChangeText={(login) => this.changeUsernameToLowercase(login)}
  value={this.state.login}
  autoCapitalize='none' />

But it seems to not work on some android devices.

Maybe there is a more efficient way on doing this?

Upvotes: 9

Views: 12360

Answers (2)

Rodrigo Ibarra
Rodrigo Ibarra

Reputation: 325

If you keep struggling with this and the autoCapitalize="none" is not working, try this:

First, your TexInput:

<TextInput
   placeholder="Nombre completo"
   placeholderTextColor="rgba(255,255,255,0.4)"
   style={styles.inputField}
   selectionColor={'white'}
   onChangeText={value => onChange(value, 'name')}
   value={name}
   autoCorrect={false}
 />

Notice that I'm not using autoCapitalize but I'm adding a style prop

Finally, I'm going to capitalize or lowercase using CSS with the textTransform property:

inputField: {
    marginTop: 10,
    width: '90%',
    alignSelf: 'center',
    color: colors.primary,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: colors.primary,
    fontSize: 18,
    backgroundColor: colors.background,
    textTransform: 'lowercase',
  }

Hope this helps!

Upvotes: 2

shubham jha
shubham jha

Reputation: 1460

This might solve your problem, it works for me.
Add these three lines inside TextInput, original answer source

 autoCapitalize="none"
 secureTextEntry={true}
 keyboardType={"visible-password"}

example

import React, { useState } from "react";
import { View, TextInput } from "react-native";


export default function App () {
    const [text,setText] = useState('');
    
    return (
      <View>
        <TextInput
           autoCapitalize="none"
           secureTextEntry={true}
           keyboardType={"visible-password"}
          style={{height: 40, borderColor: 'gray', borderWidth: 1,width:"100%"}}
          value={text}
          onChangeText={ text => setText(text.toLowerCase()) }
        />
      </View>
    );
}

Upvotes: 8

Related Questions