Autofill not showing up

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® Core™ 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.

[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)