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

[todoranalex]

"react-native": "0.61.4"
"react-native-screens: "2.0.0-alpha.5"

It seems that the library blocks the native autofill suggestions view. Also, there is no save password dialog after a successful login. (This dialog is auto popped-up by the Android framework).

<TextInput
              placeholder={'Username'}
              autoCompleteType={'email'}
 />
  <TextInput
              placeholder={'Password'}
              autoCompleteType={'password'}
              secureTextEntry={true}
/> 

Setting those props should be enough to trigger the autofill mechanism.

What we tried and did not work:

• Update to a library version after the PR from #205 was merged.
• Set the TextInput width to 99% on first render and then to 100%, as suggested
• Set the TextInput editable prop to false on first render and then on true, as suggested

[WoLewicki]

@todoranalex can you repro the issue in the newest version?

[ovy9086]

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

[WoLewicki]

Can you provide a repo/snack with the minimal configuration needed to repro the issue?

[WoLewicki]

I am closing it due to no response in more than 30 days. Feel free to comment to reopen it.

[mstrk]

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.

[WoLewicki]

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

[mstrk]

@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.

[ovy9086]

@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

[mstrk]

Hi @ovy9086 thanks for the repo. I've tested it in the same android device I have the problem and like the snack I tried to reproduce the issue, this repo also works fine :s

I get the autocomplete and save password popups. So I’m really confused now.

EDIT: btw I changed some things on your repo - textContentType='emailAddress' and textContentType='password'
I believe you need these 2 to have password autofill on android.

[todoranalex]

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.

[ovy9086]

@mstrk @todoranalex yeah sorry for the confusions. I have left screens off in my repo. updated it now so it's enabled by default 🙈

[WoLewicki]

Ok, I am reopening it then.

[mstrk]

@ovy9086 @todoranalex absolutely right! I didn’t noticed the false argument, I normally comment the function, wasn’t aware that we can pass arguments sorry.

Tested again and yes now I can’t see any of the popups.

EDIT: double checked the snack I did and it was enabled, so with expo everything works fine.

[bjjeong]

Still occurring in [email protected] and [email protected]

[kmagiera]

Thanks @ovy9086 for providing a repro, however I can't seem to be able to reproduce the problem there. When running your repro app on Pixel 2 with [email protected] I'm getting "Contents can't be autofilled" message regardless of whether screens are enabled or not.

Next, I tried to remove react-navigation out of the equation and put the text fields from your app to one of out examples here: https://github.com/software-mansion/react-native-screens/blob/master/Example/nativeStack.js – after doing that I could use autofill without any problems.

You commented later that the autofil does not work regardless of screens on/off option. I assume this means that the problem could be on the React-Navigation side and not because of react-native-screens. I'll let @WoLewicki double check that but it appears that the provided repro does not seem to showcase the issue for us.

[todoranalex]

@kmagiera I just tested @ovy9086 's repo on a PIXEL 2. With screens turned on, I get 'Contents can't be autofilled', and with screens turned OFF I'm able to autofill and also I get the Save Password pop-up after 'logging' in.

[ovy9086]

@kmagiera sorry for the confusions, re-tested this repo on Pixel 3A and :

Autofill Text Input :

• enableScreens(true) 👉 Toast 'Contents can't be autofilled' 🔴
• enableScreens(false) 👉 I am able to autofill the user and password as expected ✅

Autofill Save suggestion:

• enableScreens(true) 👉 Save password pop-up after login not shown 🤷 🔴
• enableScreens(false) 👉 Save password pop-up after login not shown 🤷 🔴

[kmagiera]

Thanks for checking again, and sorry for the confusion. Previously I tried to pull your App.js into the screens Example app where I saw the behavior I descried earlier.

I can confirm that I see the same outcome as you when running the app from your repo. So this likely means we have some discrepancy between the dependencies or the project config that is causing different behavior.

On a flip side, I also tried using ScreenContainer and ScreenStack directly on your project from github by replacing your App.js with the nativeStack.js example and the autofil works there. This means that this is likely some issue related to the way react-navigation use screens rather than something specific to screens library.

[RupamShaw]

Its still autofill not working

[aperomingo]

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.

[WoLewicki]

Are the TextInputs nested in a ScrollView component (does not need to be direct nesting)? I tested it a bit and it looks like having a ScrollView as a parent makes the autofill not work correctly. Can someone elaborate on this?

[todoranalex]

For me it's not working even if the text inputs are outside of a scrollview. (Pixel 2)

[WoLewicki]

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?

[limaAniceto]

@WoLewicki Appreciate you giving that example and the screens lib work you've done 🙏

We're facing this issue as well with our bump on react-native-screens (v2.18.1) and react-navigation (v5)

We used your example above and both forms (the one inside the scrollView and the one outside of it) weren't autofillable.

The image below is how we integrated it, and you can see the Toast Contents can't be auto-filled

If you'd like us to try other cases, we're happy to do so

[WoLewicki]

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.