Home > other >  React Native - keyboard visible-password android doesn't show numbers
React Native - keyboard visible-password android doesn't show numbers

Time:06-21

I want the same keyboard password for a normal input

keyboardType="visible-password" only works in android, and that is ok to me, but when I try to apply this keyboard to a normal input, it doesn´t show the keyboard I want, with numbers at the top. Here what I wish:

keyboard

Here what I get:

bad keyboard

And here some code. Thank you if you can help me

<TextInput
        text={getRutInputValue(text)}
        label={label}
        textValid={isCheckRut}
        textError={textError}
        maxLength={RUT_MAX_LENGTH}
        onChangeTextValid={onChangeTextValid}
        onChangeText={setRutInputValue}
        keyboardType={Platform.OS === 'android' ? 'visible-password' : 'numbers-and-punctuation'}
        autoComplete="off"
        accessibilityLabel={accessibilityLabel}
    />

CodePudding user response:

Unfortunately, visible-password type only works when the input has the secureTextEntry flag.

enter image description here

Check the guide https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/ recomended by the react-native documentation.

CodePudding user response:

<TextInput
    text={getRutInputValue(text)}
    label={label}
    textValid={isCheckRut}
    textError={textError}
    maxLength={RUT_MAX_LENGTH}
    onChangeTextValid={onChangeTextValid}
    onChangeText={setRutInputValue}
    secureTextEntry={this.state.password}
    keyboardType={Platform.OS === 'android' ? 'visible-password' : 'numbers-and-punctuation'}
    autoComplete="off"
    accessibilityLabel={accessibilityLabel}
/>

Above code worked for me. Here I am setting this.state.password on change. In documentation of react-native it has mentioned that to get visible-password we need to set secureTextEntry in the TextInput.

Sharing my reference link as well : https://mdmoin07.medium.com/react-native-hide-show-password-input-d4be4d0f70aa

  • Related