How to colorize password inputs in React Native Android

Devops

React Native

Android

On React Native 0.22 and below, it is a known issue that you cannot change the input text color for password inputs on Android.

Indeed, setting the color style attribute like this:

<TextInput secureTextEntry={true} style={{color: "white"}}/>  

will not affect the input color:


bad-input.png

 

A fix by @brunobar79 has been merged and should land in React Native 0.23 or later.

But if you don't want to wait for the latest version to come out or if you can't upgrade easily your React Native version, you can use react-native-text-input!

Install it with

npm install --save react-native-text-input  

I strongly recommend the use of RNPM to link native modules:

npm install -g rnpm  
rnpm link react-native-text-input  

Now you can replace:

import { TextInput } from 'react-native';  

by:

import TextInput from 'react-native-text-input';  

 

And tadaaaaa!
Your input is now white :)

good-input.png