Autofill not showing up

[humble-programmer]

Description

The React-Native app (Android) that I'm working on has sign up and log in screens. Both of these screens have email and password TextInput components as well as a primary button. When signing up, the user enters email address and password, then presses the button. Upon pressing the button and moving to a new screen, a native Android app would automatically bring up the password saving modal (for Autofill on next log in to this app). The React-native docs also suggest that React-native supports autofill, so long as the right props are included (autoCompleteType and textContentType). However, no such Autofill popup happens.

React Native version:

System: OS: Windows 8 6.2.9200 CPU: (4) x64 Intel(R) Core(TM) i3-3120M CPU @ 2.50GHz Memory: 1.44 GB / 7.61 GB Binaries: Node: 12.18.3 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 22, 26, 27, 28, 29 Build Tools: 26.0.2, 27.0.3, 28.0.3, 29.0.2, 30.0.0 System Images: android-28 | Google APIs Intel x86 Atom Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897 Visual Studio: Not Found Languages: Java: 11.0.2 npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.0 => 0.64.0 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Minimum Needed code snippet

import React, { Component } from 'react';
import { Text, TextInput, TouchableOpacity, View } from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = { email: '', isSecondScreen: false, password: '' };
        this.emailInputRef = React.createRef();
        this.passwordInputRef = React.createRef();
    }

    onEmailChange = value => this.setState({ email: value })

    onPasswordChange = value => this.setState({ password: value })

    onSignUpPress = () => this.setState(prevState => ({ isSecondScreen: !prevState.isSecondScreen }))

    render = () => {
        return (
            <View style={styles.container}>
              {this.state.isSecondScreen ?
                <Text>This is a new screen</Text> :
                <View>

                  <View style={styles.inputContainer}>
                  <TextInput
                      autoCapitalize='none'
                      autoCompleteType='email'
                      keyboardType='email-address'
                      onChangeText={this.onEmailChange}
                      placeholder='Email'
                      textContentType='emailAddress'
                      style={{paddingVertical: 10, paddingHorizontal: 5}}
                      value={this.state.email}
                  />
                  </View>
                  
                  <View style={{ ...styles.inputContainer, marginTop: 20 }}>
                    <TextInput
                        autoCapitalize='none'
                        autoCompleteType='password'
                        onChangeText={this.onPasswordChange}
                        placeholder='Password'
                        secureTextEntry
                        textContentType='newPassword'
                        style={{paddingVertical: 10, paddingHorizontal: 5}}
                        value={this.state.password}
                    />
                  </View>

                  <TouchableOpacity
                    onPress={this.onSignUpPress}
                    style={styles.button}
                  >
                    <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: 'bold' }}>
                      Sign Up
                    </Text>
                  </TouchableOpacity>
                </View>
              }
            </View>
        );
    }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  inputContainer: {
    borderWidth: 2,
    borderColor: '#DDDDDD',
    borderRadius: 5,
    marginHorizontal: 25
  },
  button: {
    alignSelf: 'center',
    backgroundColor: '#4477AA',
    borderRadius: 100,
    marginTop: 20,
    paddingHorizontal: 35,
    paddingVertical: 10
  }
};

Screenshots

Initial screen (with credentials filled):

Second screen (after pressing sign up):

Expected Results

When moving from initial screen to second screen, the system pops up the Autofill modal to save the email/password pair for the specific app.

[aliwaqar9811]

@humble-programmer I'm facing same issue as well. Have you found any solution?

[humble-programmer]

@aliwaqar9811 After upgrading the React Native version to 0.66, the issue seems to have disappeared. I didn't check on enough devices to confidently say it was fully fixed, but it did indeed work as expected on the devices that I tested on.

[aliwaqar9811]

Thanks @humble-programmer after upgrading to React Native 0.66.4 it's working on Android. Have you tested that on ios emulator or will it only work on real devices. Sorry if you don't feel that relevant but I don't have ios device so I'm trying to test on ios emulator but unfortunately it's not showing up even after adding a prop textContentType to username and password.

[humble-programmer]

@aliwaqar9811 good to know the 0.66 upgrade helped you fix it for Android. I had been wondering for months about my case whether it was the upgrade that fixed it, or if I had changed something unintentionally and it ended up working. As for the iOS, I'm not as proficient on it as Android, but from what I know so far, I think it is a bit more unreliable/unpredictable (in general, whether it is React Native or native). It works in some use cases, and doesn't work in other use cases. In my experience so far though, I haven't seen it working.

[DeniferSantiago]

I use react-native 0.67.3 and it still doesn't work

<TextInput
    placeholder="Tu nombre de usuario"
    autoCapitalize="none"
    defaultValue={data.userName}
    style={styles.textInput}
    textContentType="username"
    importantForAutofill="yes"
    onChangeText={onUserNameChange}
    autoComplete="username"
/>

[dlehddnjs]

I also using react-native 0.67.3 but it still doesn't work. How to ask to save credential for autofill service? (like google or Samsung pass)