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, ""));
};
Related
in my react-native App for the text input I want to enable/disable the done button on the keyboard dynamically. tried with enablesReturnKeyAutomatically but no use because these allowing to disable the done button only when there is no text in the input. here I want to enable/disable dynamically. can anyone give me some suggestions to resolve it. any help is much appreciated, Thanks in advance.
import React from "react";
import { SafeAreaView, StyleSheet, TextInput,Button,Keyboard } from "react-native";
const UselessTextInput = () => {
const [text, onChangeText] = React.useState("Useless Text");
const [number, onChangeNumber] = React.useState(null);
const [done,setDone]=React.useState(false)
return (
<SafeAreaView>
<TextInput
style={styles.input}
enablesReturnKeyAutomatically={done}
onChangeText={onChangeNumber}
value={number}
placeholder="useless placeholder"
/>
<Button title={'Toggle Done'} onPress={()=>{Keyboard.dismiss();setDone(!done)}}/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default UselessTextInput;
You can't, not reliably. The keyboard in Android is a separate app (actually one of any number of apps, as they can be replaced by the OEM or the user). It decides what keys are shown, and what each key does. You can give it hints, but nothing can force it to obey those hints. If the keyboard app decides it wants to show a return key, it will. And most keyboard apps show a return key if they aren't explicitly told to display an action key via the hints (such as Done, Next, Search, etc). I don't know of any that would just make it a non-functional or disappearing key.
The Android keyboard interface really doesn't work well for dynamically changing the key while the keyboard is already up. Some keyboards may work with it, but many won't. Many don't as an explicit choice unless the focused text view changes. There's some good reasons for this from a keyboard developer's point of view.
Basically if you're looking for some really specific behavior out of the keyboard, you're probably not going to get it. Or you'll find some way to make it work on the keyboard on your test device, but it will fail on others. And doing it in React Native will be even harder, because their method of doing keyboard stuff doesn't map well to how Android actually does keyboard stuff.
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)
}}/>
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()
I'm having a problem with TextInput cursor when reveal or hide password value, when the user touch the reveal password button the cursor move to the beginning on Android, iOS works as expected.
This is the function of reveal password:
displayPass(){
this.setState({
hiddenPass: !this.state.hiddenPass
});
}
And this is the TextInput
<TextInput onChangeText = {(pass) => this.setState({pass})}
secureTextEntry = {this.state.hiddenPass} />
And this is the button:
<TouchableOpacity onPress = {this.displayPass.bind(this)}>
<Text style = {styles.textReveal}>{this.state.hiddenPass ? "Reveal Password" : "Hide Password"}</Text>
</TouchableOpacity>
DISCLAIMER: For me, it was impossible to fix this under Expo 32. Playing with cursor position, focus/blur and setNativeProps did not solve it.
If you need a password input with hide&reveal functionality, your best options are:
Add react-native-hide-show-password-input package: https://www.npmjs.com/package/react-native-hide-show-password-input
Update expo to version 33. You can follow this instructions: https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c (you will find the exact lists of dependencies to be updated and their compatible versions).
After the upgrade, no extra logic will be needed, just use the TextInput component. After clicking the "show/hide password" icon, you will see that the cursor stays in the correct position.
I use react native for Android, and I want to edit bunch of TextInput with the "next" option like here (ios version):
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
I tried:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={(event) => {
this.refs.SecondInput.focus();
}}
/>
<TextInput
ref='SecondInput'
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
But the keyboard is close and open and that's annoying.
from https://stackoverflow.com/a/4999372/1456487 i understand that in native android apps i would use:
android:imeOptions="actionNext"
Is there any way to do this?
This ability introduced in react-native .22 .
https://github.com/facebook/react-native/commit/ab12189f87d8e7fd84a4f1b92fa97e8894e984c7