iOS Strong Password Autofill is not Showing on Confirm Password

Question

The iOS automatically fills the first password field but not on the second. How to make password and confirm password fields autofilled like in apps out there?

Update: It seems that system treats Signup form like a Login form, so it autofills first password field. Also, when I navigate back to login screen, system prompts whether I want to save password in keychain or not, which is unexpected.

Update: I'm using stack navigation (screens: Login and Signup). Turns out after I type name or email in signup form, it autofills strong password to password field of Login screen and first password field of Signup screen. Any way to tell system that those are different forms? (Like using different <form> in web programming).

Login Screen

export default class Login extends Component {
    Login() {

    }

    render() {
        return (
            <IndexBackground>
                <IndexBox>
                    <IndexLogo />
                    <IndexTextInput placeholder="Name" />
                    <IndexTextInput placeholder="Password" secureTextEntry={true}/>
                    <IndexButton title="Log in" onPress={this.Login} />
                    <IndexText text="Forgot Password?" style={styles.textForgot} />
                    <IndexText text="Don't have an account?" style={styles.textSignUp}>
                        <Text style={styles.textLink} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text>
                    </IndexText>
                </IndexBox>
            </IndexBackground>
        )
    }
}

SignUp Screen

export default class SignUp extends Component {
    user = {
        email: '',
        name: '',
        pass: '',
        confirmpass: ''
    };

    setUser = (key, value) => {
        this.user[key] = value;
        console.log(this.user);
    }

    signUp() {

    }

    render() {
        return (
            <IndexBackground>
                <IndexBox>
                    <IndexLogo />
                    <IndexTextInput placeholder="Email" onTextChanged={(value) => this.setUser('email', value)} />
                    <IndexTextInput placeholder="Name" onTextChanged={(value) => this.setUser('name', value)} />
                    <IndexTextInput placeholder="Password" secureTextEntry={true} onTextChanged={(value) => this.setUser('pass', value)} />
                    <IndexTextInput placeholder="Confirm Password" secureTextEntry={true} onTextChanged={(value) => this.setUser('confirmpass', value)} />
                    <IndexButton title="Sign up" onPress={this.signUp} />
                    <IndexText text="Have an account?" style={styles.textSignUp}>
                        <Text style={styles.textLink} onPress={() => this.props.navigation.navigate('Login')}> Log in</Text>
                    </IndexText>
                </IndexBox>
            </IndexBackground>
        )
    }
}

NavLogin

const routeConfigs = {
    Login: { screen: Login },
    SignUp: { screen: SignUp }
}

const navConfigs = {
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

const NavLogin = createStackNavigator(routeConfigs, navConfigs);
const ContainerLogin = createAppContainer(NavLogin);

export default ContainerLogin;

Answer 1

Have the same bug with createStackNavigator and IOS strong passwords.

I think this happens because stack navigator does not unmount inactive components and IOS can interact with them. I added subscription to onFocus event (withNavigationFocus) for login form and render empty login form for unfocused state (when signup is active):

import { withNavigationFocus } from 'react-navigation';
...
class Login extends Component {
    Login() {

    }    
    render() {
        if (!this.props.isFocused) return null;
        return (
            <IndexBackground>
                ...
            </IndexBackground>
        )
    }
}
export default withNavigationFocus(Login);