facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
117.2k stars 24.1k forks source link

SecureTextEntry prop is not working in android with all the keyboard types. #30148

Open mobhupath opened 3 years ago

mobhupath commented 3 years ago

Issue: Toggling secureTextEntry prop works fine in iOS not in Android, in android for the password text field the initial value for secureTextEntry is set to true, it toggles the first time, but i don't see it toggled next time, this issue is seen in real device, it works fine in Android Emulator though, anyone still facing the same issue? RN Version: 0.59.10

_Originally posted by @pedreviljoen in https://github.com/facebook/react-native/issue_comments/403732197_

timomeara commented 3 years ago

it looks like 0.63.3 re-introduced a number of issues around secureTextEntry that were resolved years ago. i'm dealing with a font issue that comes up when secureTextEntry=true

30123

mobhupath commented 3 years ago

hey @timomeara, i was going through the change log of react native https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0633, i don't see anything related to secureTextEntry prop not working in android or anything similar to this issue.

timomeara commented 3 years ago

hey @timomeara, i was going through the change log of react native https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0633, i don't see anything related to secureTextEntry prop not working in android or anything similar to this issue.

there are quite a few issues around the secureTextEntry prop, keyboard types and font styles i have not tried toggling the secureTextEntry values, so i can't speak to that... my problem was with placeholder styles not working

the title of this issue appears to be a documented known issue https://reactnative.dev/docs/textinput#known-issues

regardless, the history of TextInput and secureTextEntry is long and sordid

23059

22781

22210

7936

6564

6149

5859

5710

5478

4600

4435

3742

mobhupath commented 3 years ago

hey @timomeara, i was going through the change log of react native https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0633, i don't see anything related to secureTextEntry prop not working in android or anything similar to this issue.

there are quite a few issues around the secureTextEntry prop, keyboard types and font styles i have not tried toggling the secureTextEntry values, so i can't speak to that... my problem was with placeholder styles not working

the title of this issue appears to be a documented known issue https://reactnative.dev/docs/textinput#known-issues

regardless, the history of TextInput and secureTextEntry is long and sordid

23059

22781

22210

7936

6564

6149

5859

5710

5478

4600

4435

3742

It won't work even if i use keyboard types other than keyboardType="email-address" or keyboardType="phone-pad"

timomeara commented 3 years ago

hey @timomeara, i was going through the change log of react native https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0633, i don't see anything related to secureTextEntry prop not working in android or anything similar to this issue.

there are quite a few issues around the secureTextEntry prop, keyboard types and font styles i have not tried toggling the secureTextEntry values, so i can't speak to that... my problem was with placeholder styles not working the title of this issue appears to be a documented known issue https://reactnative.dev/docs/textinput#known-issues regardless, the history of TextInput and secureTextEntry is long and sordid

23059

22781

22210

7936

6564

6149

5859

5710

5478

4600

4435

3742

It won't work even if i use keyboard types other than keyboardType="email-address" or keyboardType="phone-pad"

"it won't work..." do you mean toggling the prop value? did you try playing with this? https://reactnative.dev/docs/textinput#keyboardtype visible-password (android only)

Anzormumladze commented 3 years ago

upgrade to 61.0 version

Rafatcb commented 3 years ago

I was having this problem too. Tried to reproduce on a Snack, but it seems to be working there.

So I tried to stop using my customized TextInput and replaced with the default one from react-native, without any styling, and it worked. Then I replaced it by my TextInput and... it kept working.

Maybe it has something to do with fontFamily? I tried to reproduce the problem again but wasn't able to.

Btw, my TextInput is just the default one with some styles, default props, animation and text handling in state.

npx react-native info:

System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz  
    Memory: 1.26 GB / 7.88 GB
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2
      System Images: android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.6858069
    Visual Studio: Not Found
  Languages:
    Java: Not Found
    Python: 2.7.18
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
padil commented 3 years ago

use default, working for me ;)

SawRosetngg commented 3 years ago

secureTextEntry works if you set autoCapitalize={'none'}.

fantasyado commented 3 years ago

secureTextEntry works if you set autoCapitalize={'none'}.

This works for me. But how can you come up with this fix...

marcosnataqs commented 3 years ago

Nothing works for me yet! Someone have another solution for this problem?

onurtsc commented 2 years ago

secureTextEntry works if you set autoCapitalize={'none'}.

This worked on my code!

shrawanfv commented 11 months ago

secureTextEntry works if you set autoCapitalize={'none'}. not working WhatsApp Image 2023-08-08 at 18 48 29

TheRealMikeD commented 8 months ago

I have a sign-up screen with a TextInput for password, and another to confirm the password. They have identical properties. The first TextInput hides the text as expected. The second does not. I have tried a lot of suggestions from this issue, and various StackOverflow issues. None have worked so far. react: 18.2.0 react-native: 0.72.6 expo: 49.0.0

Only fails on Android (works as expected on iOS). Testing on physical device.

timoisalive commented 5 months ago

For me keyboardType="default" worked.

I don't quite understand the difference between the Android only keyboardType="visible-password" and secureTextEntry properties. Wouldn't it be enough to control visibility with the latter only...? 🤷