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

Question

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

Asanka Sampath · Accepted Answer · 2018-09-11 10:31:41Z

4

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

answered Sep 11, 2018 at 10:31

Asanka Sampath

6035 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Almouro · Accepted Answer · 2016-04-06 17:20:07Z

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.

G. Hamaide · Accepted Answer · 2016-03-03 15:13:38Z

0

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.

answered Mar 3, 2016 at 15:13

G. Hamaide

7,1262 gold badges39 silver badges58 bronze badges

1 Comment

cubbuk Over a year ago

Seems like the following PR will fix the issue. Thanks. github.com/facebook/react-native/pull/6064

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related