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

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:
Here what I get:
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}
/>

Unfortunately, visible-password type only works when the input has the secureTextEntry flag.
Check the guide https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/ recomended by the react-native documentation.

<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

React Material UI: Textfield maxLength not working in Android

I am using React Material UI and want to implement max length for a TextField component.
I tried to set max length in inputProps as below -
<TextField
id="name"
label="Name"
inputProps={{ maxLength: 5 }}
/>
This works in desktop browsers as expected, but doesn't seem to work in mobile devices browsers, expecially in most Android mobiles with Chrome latest version.
Not sure about IOS, as not tested in that environment.
Please refer the stackblitz here for reference.
To replicate, please open the above stackblitz in a mobile device browser prefebaly in Chrome.
I can go with regex, but I think setting up max length attribute to a field seems very clean and semantic.
Please let know if there is any way.
If your input filed type='number' then it will not work.
You can try this solution. I think it will work.
<TextField
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>

How to get ONLY numeric keyboard in React-Native?

My goal is to get ONLY numeric keyboard without punctuation. number-pad is not working properly on every device and it also allows to enter symbols "-, _." that is not what I want. I noticed that when secureTextEntry is set to true on TextInput the keyboard is just the one I want, but I can't use it like this because my text is getting masked. So I wonder is there a way to use that keyboard without masking the text? Maybe a hack in the native code exists?
The screen of desired keyboard
NUMBER-PAD IS NOT WORKING ON EVERY DEVICE!
THIS IS NUMBER-PAD ON HONOR 8X
You can try by doing like this-
keyboardType={Platform.OS === 'android' ? "numeric" : "number-pad"}
and then in a method call from onChangeText do this:
**const trimNumber = number.replace(/[^0-9]/g, "");
this.setState({
trimNumber
});**
and it is the value prop of TextInput
value={this.state.trimNumber}
By this user wont be able to give any punctuation, if any, we are restricting to enter.
You may try below :
keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
and for more : click here
As per the docs ,
You can achieve this by doing :
keyboardType={Platform.OS === 'ios'? "number-pad":"numeric"}
Hope it helps . feel free for doubts
To show numeric pad in IOS same a pic in an original question. And use the returnKeyType at the same time.
keyboardType={Platform.OS === 'android' ? "numeric" : "numbers-and-punctuation"}
Try
<Input keyboardType= 'phone-pad'/>
it worked for me.
or for both android & ios or something else
<Input keyboardType= {Platform.OS === 'android' ? 'phone-pad' : (Platform.OS ==='ios'?'number-pad' :'numbers-and-punctuation')} />
you can check the documentation here react-native keyboardType
This keyboard only available for secureText secureTextEntry={true}
Code
<Input keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
secureTextEntry={true} />

React Native 55.4: contextMenuHidden does not hide menu on Android - Disable Options on React-Native Text Input

I'm using a recently added (in v0.55.4) prop to TextInput called contextMenuHidden. When I add this prop to a TextInput component it seems to disable copy and paste for iOS but not for Android.
Has anyone else experienced this? Is there another step that needs to happen to get this to disable copy and paste on android?
<TextInput
style={...}
onChangeText={...}
value={...}
contextMenuHidden={true}
/>
for ios
<TextInput contextMenuHidden={true}
for Android
<View removeClippedSubviews={true}>
<TextInput contextMenuHidden={true} />
</View>

reactNative TextInput number-pad not showing properly on android

Im using
TextInput
with
keyboardType = "number-pad"
On iOS it works fine, but on Android it shows normal keyboard, how do I make android show the number-pad keyboard, and hide the "suggest" bar
On the left the iOS showing correctly, on the right the android emulator showing wrong keyboard.
<TextInput
ref="second"
style={this.state.pos > 0 ? styles.textInputStyle :
styles.textInputNormalStyle}
keyboardType = "number-pad"
maxLength={1}
value={this.state.secondVal}
onKeyPress={(event) => {this.onChange(1, event.nativeEvent.key); }}
/>
As per the docs, you need to supply keyboardType as phone-pad.
number-pad is only for IOS
For hiding the bar try autoCorrect={false}
Edit
As per the latest docs number-pad has been added for cross-platform support
for me that keyboardType='number-pad' isn't working on Android yet even though the doc says it's available cross-platform! (which is quite weird)
so my solution was just validating the value before setting it as the input value
const onChangeText = (text) => {
setInputValue(text.replace(/\D/g, ""));
};

Android Webview (Phonegap): Disable Autocorrect, Autocapitalize and autocomplete doesn't work

i have a problem with my loginpage which is loaded in a Webview on Android (Phonegap).
i used the attributes autocorrect="off" autocomplete="off" autocapitalize="off" for my input fields and form tag but it doesn't work. the device shows simmilar words and the content goes up and down when i type a letter or number.
have anybody an idea how i can fix this problem?
cheers
i have the same problem and after googling for hours , finally i got the solution
used the following attributes
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
I tested it on android 4.2 and its working
Turn off predictive text for password field on websites
I don't think these attributes apply to Android. They are iPhone specific. The autocorrect options are configured via the main Settings in Android.
You should try to use a cordovasoftkeyboard plugin and show it on input text focus, hide it on blur. This avoid a lot of weird behaviors for me. However this will always show the basic soft keyboard (not the number soft, email soft etc...)
$(document).on({
blur : function(){
if(OS = "and")
cordova.plugins.SoftKeyboard.hide();
},
focus : function(e){
if(OS = "and"){
e.preventDefault();
cordova.plugins.SoftKeyboard.show();
if(Windows.currentWindow == null){
$('html, body').stop().animate({//permet de scroller l'input en haut
scrollTop: ($(this).offset().top)-80//header
}, 800);
}
return false;
}
}
}, ':input[type="text"],[type="number"],[type="email"]');
https://github.com/phonostar/PhoneGap-SoftKeyboard
I just discovered it!, you only have to add into your input this: name="password" and that solves it.

Categories

Resources