[Android][TextInput] Bug when combine secureTextEntry + keyboardType props

React Native version:

System:
    OS: Linux 4.15 Linux Mint 19.1 (Tessa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 5.34 GB / 15.51 GB
    Shell: 2.7.1 - /usr/bin/fish
  Binaries:
    Node: 10.16.3 - /usr/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.11.3 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    create-react-native-web-app: 0.1.14
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2

Steps To Reproduce

Just use secureTextEntry + keyboardType

<TextInput secureTextEntry keyboardType="email-address"/>
<TextInput secureTextEntry keyboardType="phone-pad"/>

Now you will see that on Android when keyboardType is email-address or phone-pad value visible for users.

Describe what you expected to happen:

Should work the same as iOS

Snack & code example:

https://snack.expo.io/@retyui/2793f1

Links

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:10 (2 by maintainers)

Top GitHub Comments

2reactions

fabriziobertoglio1987commented, Jul 10, 2020

This is a limitation of the Android Sdk

They use TYPE_CLASS_PHONE which supports no variations or flags.

while INPUT_TYPE_KEYBOARD_NUMBER_PAD supports flag TYPE_NUMBER_VARIATION_PASSWORD

https://github.com/facebook/react-native/blob/34ff9b7259e77f271c156bd75b837d4890ba9c81/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L747-L764

You need to handle this with react-native Platform

0reactions

retyuicommented, Nov 20, 2022

any progress?

Top Results From Across the Web

react native secureTextEntry not working on android

I was able to fix this by removing the keyboardType={'default'} code from my input component. Even though the problem is fixed i would...

react-native-codegen | Yarn - Package Manager

... with numeric keyboard types not respecting the secureTextEntry prop ... Fix a bug where the keyboard, once set as email, won't change...

com.facebook.react.views.textinput.ReactTextInputManager ...

ViewProps ; import com.facebook.react.uimanager.annotations. ... REACT_CLASS = "AndroidTextInput"; private static final int[] SPACING_TYPES = { Spacing.

TextInput - React Native

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, ...

secureTextEntry | Apple Developer Documentation

See Also. Managing the keyboard behavior. enablesReturnKeyAutomatically. A Boolean value that indicates whether the system automatically enables the Return key ...