Auto fill password using Text Input React Native

Question

Based on the docs, if we set textContentType to username and password, the keyboard should have an option to autofill. But somehow It is not working for me.

              <TextInput
                textContentType='username'
                style={{ width: 300, height: 50, borderWidth: 1 }}
                value={this.state.currentEmail}
                onChangeText={this.handleChangeTextEmail}
              />
              <TextInput
                textContentType='password'
                value={this.state.currentPassword}
                textContentType="password"
                style={{ width: 300, height: 50, borderWidth: 1, marginTop: 10 }}
                onChangeText={this.handleChangeTextPassword}
                secureTextEntry
              />

Is there anyone facing the same problem or is there anyway to fix this?
EDIT:
I'm using Iphone X (real device) Iphone 11(Simulator) both ios version is 11+

what kind of device and OS version (iOS/Android) and RN do you use? — kosiakMD
– kosiakMD, Commented Oct 6, 2021 at 8:00
According to the docs, you need to add autoComplete={true} for Android. For IOS, it should suffice to only add the textContentType. — Titulum
– Titulum, Commented Oct 6, 2021 at 8:08
@kosiakMD I'm using RN 0.63 and the device I edited the post — Phaoga54
– Phaoga54, Commented Oct 6, 2021 at 8:44
does that feature work with others Apps? m.b it's turned off? will update my asnwer iCloud Keychain is used: Settings → Apple ID → iCloud → Keychain → toggle "On" the iCloud Keychain. — kosiakMD
– kosiakMD, Commented Oct 7, 2021 at 9:08
its already toggle on, and i just init new react native project and try the text input but does not work — Phaoga54
– Phaoga54, Commented Oct 7, 2021 at 9:31

kosiakMD · Accepted Answer · 2021-10-07 09:10:07Z

1

What kind of device faces this issue?
what kind of OS iOS/Android version?
I think to propose autofill form the password chain it should contain password and username instead of emailAddress

https://reactnative.dev/docs/next/textinput#textcontenttype-ios

For iOS 11+ you can set textContentType to username or password to enable autofill of login details from the device keychain.

if v11+

<TextInput
    value={this.state.username}
    textContentType="username"
/>
<TextInput
    value={this.state.password}
    secureTextEntry={true}
    textContentType="password"
/>

if v12+

<TextInput
    value={this.state.username}
    textContentType="username"
/>
<TextInput
    value={this.state.password}
    secureTextEntry={true}
    textContentType={"password" | "newPassword"} // newPassword if suggest & save into cahins
/>

UPD: 07.10.2021

ensure that Keychain autofill is turned ON

iCloud Keychain is used: Settings → Apple ID → iCloud → Keychain → toggle "On" the iCloud Keychain.

as here https://reactnative.dev/docs/next/textinput#passwordrules-ios

edited Oct 7, 2021 at 9:10

answered Oct 6, 2021 at 8:04

kosiakMD

1,07211 silver badges26 bronze badges

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

1 Comment

Phaoga54 Over a year ago

Hello @kosiak, thanks for answering. But I've try username and password before switch to content address but not work. The device version I've just updated in the post

Rajesh N · Accepted Answer · 2022-09-16 14:06:39Z

Fixed it by following the way

Add autocorrect true in the email field and give the margin for iOS
Add extra dummy text input between email and password for only the iOS platform with the wrapping of parent View pointer none for avoiding focus

final code

  <TextInput
        autoCompleteType="email"
        autoCorrect={true}
        clearTextOnFocus={false}
        containerStyle={{marginTop: 5, marginBottom: isIos() ? -20 : 0}}
        keyboard="email-address"
        textContentType="emailAddress"
        value={username}
        onChangeText={(value): void => onInputChange('username', value)}
      />

      {isIos() ? (
        <View pointerEvents="none">
          <TextInput
            focusable={false}
            style={{color: '#00000000'}}
            onChangeText={(value): void => onInputChange('username', value)}
          />
        </View>
      ) : null}

      <TextInput
        autoCorrect={false}
        clearTextOnFocus={false}
        containerStyle={{marginTop: 5}}
        keyboard={isIos() ? 'ascii-capable' : 'default'}
        secureTextEntry={true}
        value={password}
        onChangeText={(value): void => onInputChange('password', value)}
      />

Collectives™ on Stack Overflow

Auto fill password using Text Input React Native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related