CODEWITHSUNDEEP
androidreact-native
cubbuk
cubbuk

Reputation: 7920

How to set style of a password text input in React-native

I couldn't manage to change the style of TextInput in React Native when the secureTextEntry prop set to true. Also the default style of input changes, I understood this is due to android native behaviour. The below code does not change the style unless I unset secureTextEntry.

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

I have a login form and having different styles for email input and password input is disturbing. Does anyone know how to fix this?

UPDATED

Seems like the following PR will fix the issue:

PR Link

Upvotes: 3

Views: 8506

Answers (3)

Asanka Sampath
Asanka Sampath

Reputation: 603

<TextInput
          placeholder={'Environment'}
          placeholderTextColor="#202020"
          secureTextEntry={true}
        />

Upvotes: 4

Almouro
Almouro

Reputation: 6524

This PR has now been merged to fix it, and it should probably land in 0.23.

If like me, you don't want to wait for it, or can't upgrade easily, you can use this module I created, as described in this blog post.

Basically, install the module with:

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

Link it to your native code: 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 :)

The TextInput from this module is actually a copy-paste from the default React Native one, with the fix in the PR above added.

Upvotes: 1

G. Hamaide
G. Hamaide

Reputation: 7106

It's a known RN issue. You can track it here. Unless you submit a PR, I think we'll have to wait for that feature to come.

Upvotes: 0

Related Questions