Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you style a TextInput in react native for password input

Tags:

react-native

People also ask

How do you give styling to TextInput React Native?

import React from 'react' import { View, Text, TouchableHighlight, TextInput, Dimensions, StyleSheet } from 'react-native' import { StackNavigator } from 'react-navigation' import { colors } from '../styles/colors' let windowSize = Dimensions. get('window') export default class TestScreen extends React.

How do I get the input type password in React Native?

To add a password input with React Native, we can set the secureTextEntry prop to true . to set secureTextEntry to true to make the TextInput a password input.


When this was asked there wasn't a way to do it natively, however this will be added on the next sync according to this pull request. Here is the last comment on the pull request - "Landed internally, will be out on the next sync"

When it is added you will be able to do something like this

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

refs


May 2018 react-native version 0.55.2

It's work fine:

secureTextEntry={true}

And this does not work anymore:

password={true} 

Just add the line below to the <TextInput>

secureTextEntry={true}

Add

secureTextEntry={true}

or just

secureTextEntry 

property in your TextInput.

Working Example:

<TextInput style={styles.input}
           placeholder="Password"
           placeholderTextColor="#9a73ef"
           returnKeyType='go'
           secureTextEntry
           autoCorrect={false}
/>