CODEWITHSUNDEEP
react-native
paulgio
paulgio

Reputation: 712

React native elements form Secure text entry

I want to use a react native elements form for a text input for user passwords. My code is here:

<FormLabel> Passsword </FormLabel>
<FormInput 
onChangeText - {(text) => this.setState({password: text})}
/>

How can I make the text they enter secure so nobody can see what it is. For textInput they have secureTextEntry but I have not been able to find something similar for react native elements

Upvotes: 8

Views: 37973

Answers (8)

V.Kumar
V.Kumar

Reputation: 149

By using this code you can secure Input Field

<TextInput
                   secureTextEntry={true}
                   placeholder = "Enter your password"
                   autoCorrect={false}
                    style={{ height: 44, width: '92%', marginTop: 20, borderColor: 'gray', borderWidth: 1, paddingLeft: 15, borderRadius: 7}}
                    />

Upvotes: 0

James Brett
James Brett

Reputation: 362

Had the same issue and resolved it by adding the following to the <Input />:

multiline={false} <------THIS
secureTextEntry={true}

secureTextEntry does not work with a multiline input per the react-native docs. So react-native-elements obviously defaults to a multiline input. Setting multiline to false worked for me.

Upvotes: 0

Keshav Gera
Keshav Gera

Reputation: 11244

do keyboardType="default" and it will work. It worked for me.


  <TextInput
                        style={[styles.textInput]}
                        placeholder=""
                        secureTextEntry={hidePassword}
                        selectionColor={'#000'}
                        editable={true}
                        returnKeyType={'next'}
                        keyboardType="default"
                        autoFocus={false}
                        autoCapitalize={'characters'}
                        placeholderTextColor="rgb(153,153,153)"
                        onChangeText={(text) => this.onCurrentPassTextChange(text)}
                      >{currentPassword}</TextInput>

Upvotes: 1

Roland
Roland

Reputation: 430

React Native Elements Input inherits all native TextInput props from React Native:

see: https://react-native-training.github.io/react-native-elements/docs/input.html#props

So this works fine:

import { Input } from 'react-native-elements'

<Input placeholder="password" secureTextEntry={true} />

Upvotes: 33

AmolR
AmolR

Reputation: 71

I think FormInput does support secureTextEntry. Pass it as a prop to ..

    <FormInput
      {...props}
      style={StyleSheet.flatten([
        style,
      marginTop={marginTop}
      autoCapitalize={autoCapitalize}
      autoCorrect={autoCorrect}
      secureTextEntry={true}
      ...
    />

FormInput inherits all native TextInput props that come with a standard React Native TextInput element. We're using FormInput with secureTextEntry as a prop in our project. You may want to see: https://react-native-training.github.io/react-native-elements/docs/0.19.1/forms.html

Upvotes: 2

paulgiordan
paulgiordan

Reputation: 124

React Native Elements FormInput does not support secureTextEntry. Just add a TextInput instead of a FormInput it will work the same and look the same if styled correctly.

Upvotes: 5

Nirmalsinh Rathod
Nirmalsinh Rathod

Reputation: 5186

You need to add one more props in your custom component for secure the text. 

<FormLabel> Passsword </FormLabel>
<FormInput 
isSecure={true}
onChangeText - {(text) => this.setState({password: text})}
/>

In your class, you need to get the props and pass into your TextInput property.

    <TextInput
       secureTextEntry={this.props.isSecure ? this.props.isSecure : false}  
    />

You can check about secureTextEntry from here.

Upvotes: 1

Jay Thummar
Jay Thummar

Reputation: 2299

Use TextInput's property secureTextEntry for to hide the password field 

            <TextInput
                   .....
                    secureTextEntry={true}  
                />

This field accepts boolean value true for hide the text and false for to show the text

Upvotes: 11

Related Questions