react-native-screens: Android - TextInput Autofill not working

I had the same issue on Android devices and accidentaly realized that it works as expected when I use state to mount the TextInput right after mouting the screen component.

example:

const Screen = ()=> {

  const [shown, setShown] = useState(false)
  useEffect(()=> {
    setShown(true)
  }, [])

  return (
    <View>
      {shown ? (
        <>
          <TextInput
             autoCompleteType='email'
             importantForAutofill='yes'
             //...rest
           />
           <TextInput
             autoCompleteType='password'
             importantForAutofill='yes'
             secureTextEntry={true}
             //...rest
           />
         <>
       ) : null}
    </View>
  )

}

I’m using "react-native-screens": "~3.0.0" and react-navigation v5 with expo sdk 41 (React Native 0.63). Also I have called enableScreen(true) and the TextInput is inside the ScrollView.

I have no idea why it solves the issue but at least it’s working for me right now. I hope this helps on the other versions.

I have suffered a lot to implement this in iOS successfully:

• Create account (password suggestion and later saved in the KeyChain)
• Login (choice of username and password of your KeyChain).

However, in Android there is little information and I think that it is not very successful:

• The information about the React Native TextInput only tells you to implement the property autoCompleteType = {'password'} and importantForAutofill = {'yes' }.
• Then on the other hand, on Android https://developer.android.com/guide/topics/text/autofill-services they tell you about “Permissions and manifest declarations” .
• Also, this collides with react-native-screens and its enableScreens method, which has not worked for me with either true or false.

I don’t know what to do, these kinds of problems that always happen with React Native make me desperate. Normally you have more problems and it is more complicated with iOS, but in this case I think not, in my case.

I tested @ovy9086 's repo on a Pixel 2 and the autofill framework works fine for me with screens turned OFF. If screens is turned ON, then I can’t autofill the input field and also no pop-up to save your password is shown. But I also saw the following:

turn screens ON. Open App -> Try to autofill email -> you get ‘Content’s can’t be autofilled’. Put App in OVERVIEW (or background) -> Resume -> Try to autofill again email -> Now you see the autofill suggestions on the email / passwords fields.

Then, I tried to put the app in overview exactly after pressing the Login button, and then resume it while it transitions to the next screen, and I could see for like 0.5 seconds the Password Save Pop-up, then it disappeared.

So, most likely, the screens library somehow cuts off those elements…

Also, @mstrk did you test with screens turned on or off? 😄 Most likely they were turned OFF.

I couldn’t find anything that can cause the issue and I am a bit helpless on how to resolve it. I will gladly accept the examples of the cases where this works and where it doesn’t to have better knowledge of the problem. It seems weird that it doesn’t work for you in both cases. Are you using some other components above the screen shown? My example consisted of only the code shown above.

I think this is still occurs. Is there any solution?

This issue seems to be haunting us… I’ve tried all the mentioned workarounds but nothing worked for me. I am using React Native Paper’s textinput and Formik.

Although, I’ve tested those workarounds with plain react native’s textinput as well.

I am on expo sdk 44, react navigation v6 ,react native screens 3.1+

@limaAniceto yeah it might be the proper explanation. So it seems like there is nothing we can do on the side of react-native-screens other than suggest this workaround unfortunately.

@WoLewicki here’s a repo project for this : https://github.com/ovy9086/rn-autofill-bug

It’s a bit weird but now it seems that the ‘Save password’ pop-up doesn’t show at all when using react-nav-5 , no matter if screens is enabled or not.

But still, the context menu to autofill the inputs, is not working when screens are enabled.

As you can see in the screenshots, when screens are enabled, I get a toast ‘Contents can’t be auto-filled’ . When screens are disabled, the autofill context menu is shown.

https://imgur.com/a/nuxYb8y

yes. this is still happening with RN 0.62 , and screens 2.4.0

@kkafar i don’t think that the workaround is good enough, it doesn’t work well in our case. I also noticed that in some devices ( specifically devices who run Android 11 and below) there are no issues at all (maybe it will give you a clue about the cause of this bug) The fix probably worked on old devices, but it doesn’t work on newer ones. Please reopen the case. You can see that for others it worked only at the first time

Same configuration and same issue I am facing with expo sdk 44.

I had the same issue on Android devices and accidentaly realized that it works as expected when I use state to mount the TextInput right after mouting the screen component.

example:

const Screen = ()=> {

  const [shown, setShown] = useState(false)
  useEffect(()=> {
    setShown(true)
  }, [])

  return (
    <View>
      {shown ? (
        <>
          <TextInput
             autoCompleteType='email'
             importantForAutofill='yes'
             //...rest
           />
           <TextInput
             autoCompleteType='password'
             importantForAutofill='yes'
             secureTextEntry={true}
             //...rest
           />
         <>
       ) : null}
    </View>
  )

}

I’m using "react-native-screens": "~3.0.0" and react-navigation v5 with expo sdk 41 (React Native 0.63). Also I have called enableScreen(true) and the TextInput is inside the ScrollView.

I have no idea why it solves the issue but at least it’s working for me right now. I hope this helps on the other versions.

This works for me I have

  "react-native": "~0.63.4",
  "expo": "~41.0.1",
   "react-navigation": "^4.4.0",

issue1: but new issue came just after logout or session expires returning back to login screen not showing autofill… It only shows once going of to another app and return back to login then autofill contents shows.

issue2: And another issue . on new username password its not popup for save userId and password in autofillservice

Could you check such an example?

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  TextInput,
  StatusBar,
  View,
  Text,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {enableScreens} from 'react-native-screens';

enableScreens(false);

const LoginScreen = (props) => {
  return (
    <>
      <TextInput
        style={{fontSize: 20}}
        autoCompleteType={'username'}
        importantForAutofill={'yes'}
        placeholder={'Username'}
      />
      <TextInput
        style={{fontSize: 20}}
        autoCompleteType={'password'}
        importantForAutofill={'yes'}
        placeholder={'Password'}
        secureTextEntry={true}
      />
      <TouchableOpacity
        onPress={() => props.navigation.replace('Home')}
        style={{
          height: 60,
          backgroundColor: 'red',
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>LOGIN</Text>
      </TouchableOpacity>
      <ScrollView>
        <TextInput
          style={{fontSize: 20}}
          autoCompleteType={'username'}
          importantForAutofill={'yes'}
          placeholder={'Username'}
        />
        <TextInput
          style={{fontSize: 20}}
          autoCompleteType={'password'}
          importantForAutofill={'yes'}
          placeholder={'Password'}
          secureTextEntry={true}
        />
      </ScrollView>
    </>
  );
};

const HomeScreen = (props) => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>
        Hello. Welcome. You should now be prompted to save your credentials.
      </Text>
      <TouchableOpacity
        onPress={() => props.navigation.replace('Login')}
        style={{
          height: 60,
          backgroundColor: 'red',
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
};

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  body: {
    backgroundColor: Colors.white,
  },
});

In my case, when I have the enableScreens(true), the TextInputs above the Login button have Autofill available, and the ones under the Login button do not (these have a ScrollView above them). If I have the enableScreens(false), Autofill works in both options. Can someone check if it is only specific to my setup or is it like this for you too?

Ok, I am reopening it then.

@WoLewicki I was trying to reproduce it in a snack and I can’t 🤔

In the project with the issue I don’t use expo btw. I’ll try find some time to create a repo to test it without expo.

@mstrk can you provide a repo/snack with minimal configuration needed to reproduce the issue?

Hi @WoLewicki I can confirm that by using enableScreens, the issues described by the OP happen in a real device. If one do not call enableScreens the native secondary popups (which is the case of pick saved password) do appear. I did not tested in the emulator tho.