Develop Reference

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

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

I want to clear the text input by providing a clear button. While iOS has support for this, I did not find any solution for android

I am totally new to React Native. I have a textinput area, I want users to clear the text they have entered completely by clicking on a button. React native provides clearButtonMode, but that is only for iOS. Looking for a solution on android devices. Here is my textinput..
<View style={editProfileStyle.textinputView}>
<TextInput
underlineColorAndroid={"rgba(0,0,0,0)"}
style={editProfileStyle.textInput}
placeholder="Enter your Name"
value={this.state.name}
onChangeText={name => this.setState({ name: name })}
/>
</View>

You have two option :
You can simply change the state.name to empty string (ie : this.setState({name : ''})
Based on RN docs , You can use clear() , You have first need to get reference to your TextInput <TextInput ref={input => { this.textInput = input }} />
and then when you need to clear you text use : this.textInput.clear()

toLowerCase on TextInput value is creating duplicate text if capital letter created

This one's an interesting one.
I created a TextInput that takes a value, then lower cases it, adds it to state, and sets it as the default value. On my android physical device, if you force a capital letter ( autocapitalize is set to none), and then quickly tap other letters, it will duplicate and add extra text.
Is there a way to avoid this?
Here's a snack https://snack.expo.io/Hk1reKHJ4
Run it on your android or on the simulator, tap the upper case button on the keyboard, tap a few other letters, tap the upper case again, tap a few other letters, and you should set this error.
Thanks!
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
text: ''
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={ styles.inputContainer }
defaultValue={ this.state.text }
autoCapitalize="none"
onChangeText={ value => this.setState({
text: value.trim().toLowerCase()
})}
/>
</View>
);
}
}

add these three lines inside TextInput, it should fix the problem, original answer source
autoCapitalize="none"
secureTextEntry={true}
keyboardType={"visible-password"}
see my this answer for example

Unfortunately this is an issue that has been open for a couple of years with no solution, you can check this thread, no one found a solution. There is a temporary workaround until the React Native team fixes this bug as it seems to be taking too long, check it out here.

The autoCapitalize prop worked for me.
autoCapitalize="none"

I do not agree with the selected answer. The link provided in it worked for me.
secureTextEntry={Platform.OS === 'ios' ? false : true}
keyboardType={Platform.OS === 'ios' ? null : 'visible-password'}
autoCapitalize="characters"
https://github.com/facebook/react-native/issues/11068#issuecomment-586346549

I made this hack:
https://snack.expo.dev/#bzozoo/duplications-at-upper-or-lowercase-async-problem-solution
Unfortunately, it is quite a compromise solution.
Input is apparently slower due to the asynchronous function

I found a solution for this issue
add toLowercase() when you posting data
axios.post("api/login", { emailid: emailid.trim().toLowerCase()})

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.