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()})
Related
I am trying to fix a problem we are having with the keyboard on android. Due to react-native-gifted-chat, we have to use android:windowSoftInputMode="adjustResize" instead of adjustPan. The problem is, that the chat breaks without adjustResize and all the other stuff (e.g. some textfields in a form) break without adjustPan. I also tried adjustResize|adjustPan, adjustPan|adjustResize and tried to use KeyboardAvoidingView on the Form components, but nothing seems to work. Here is how it looks like when using adjustResize without any KeyboardAvoidingView. It creates some not-clickable grey area above the keyboard. Note that there is no way around adjustResize due to the chat...
Thanks in advance!
For anyone struggling with the same:
The package react-native-set-soft-input-mode allows you to change the softInputMode, e.g. for the chat, the following works fine:
useEffect(() => {
if (Platform.OS === 'android') {
SoftInputMode.set(SoftInputMode.ADJUST_RESIZE);
}
return () => {
if (Platform.OS === 'android') {
SoftInputMode.set(SoftInputMode.ADJUST_PAN);
}
};
}, []);
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} />
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()
This is on android with react-native v0.55.4.
<TextInput
value="should always be this value"
/>
When I am typing inside this TextInput, the text will briefly update with whatever new text I enter, before going back to showing "should always be this value".
For example, if I type 'X', the text will briefly update to "should always be this valueX", before returning back to "should always be this value", creating a jitter inside the TextInput.
edit: the docs addressed this issue: https://facebook.github.io/react-native/docs/textinput#value
Based on just that short codesnippet, you need to set value to a state property.
constructor(props) {
super(props);
this.state = {
textInput: 'Should always be this value'
}
}
And your text input
<TextInput
value={this.state.textInput}
onChangeText={text => this.setState({ textInput: text }) }
/>
Here is some docs
Hi I'm new in react native and I'm working on a sample chat app.Currently I'm facing a basic problem of navigation. Any help is appreciated.
I need to navigate from chat list to chat screen on click. Im using android emulator using Android studio. For this I wrote the script. But Im getting error when I click on a right_arrow having onPress function defined in the following code,
onContactPress = (item) =>{
Alert.alert();
}
renderFlatListItem({item}) {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.onContactPress(item)} >
<Image style={styles.rightArrow}
source={require('../../images/right_arrow.png')}/>
</TouchableOpacity>
</View>
)
}
and the the error is
undefined is not an object (evaluating '_this3.onContactPress()')
What I'm doing wrong here? Is there a way to pass the contact details of the selected person to the next screen? Please help me out.
This is in a React Class o functional component ?
In case of the 2nd call simply onContactPress without this, if your case is the first maybe you have a babel issue.
ok try this solution
change your onContactPress
from
onContactPress = (item) =>{
Alert.alert();
}
to
onContactPress({item}) {
Alert.alert();
}
because fat arrow functions should be defined outside the class
You probably have solved the issue by now. I'm new to React-Native myself and I came across your question after facing the same issue and I realized that the answer was in front of me all along.
Error Prone Script
I have a component with a state that contains an array of names created using the constructor method.
Ideally, when rendered this is the layout I was expecting on my Android device A list of User names and from there since I have assigned a key attribute and the value of the name's array index, when a user name is clicked I wanted to console.log(i), (i) being the index provided as a argument to the getValue() function in the onPress={} event listener.
But instead this is what I was getting the TypeError: undefined is not an object (evaluating 'this.getValues') error.
I tried reading docs, I googled, I looked at previously working codes, I did everything and nothing worked.
Nothing worked until I changed my renderName method from this
getValues(i){
console.log(i);
}
renderName(){
return this.state.names.map(function(name,i){
return (
<View>
<TouchableHighlight
key={i}
style={styles.viewName}
onPress={() => this.getValues(i)}>
<Text style={styles.name}>{name}</Text>
</TouchableHighlight>
</View>
)
})
}
To this
getValues(i){
console.log(i);
}
renderName(){
return this.state.names.map((name,i) => {
return (
<View>
<TouchableHighlight
key={i}
style={styles.viewName}
onPress={() => this.getValues(i)}>
<Text style={styles.name}>{name}</Text>
</TouchableHighlight>
</View>
)
})
}
The only difference is that I used a fat arrow function this.state.names.map((name,i) => { instead of the normal one this.state.names.map(function(name,i){
After making that change the results are what I was expecting Clicking a user name output the index associated with the name in the array
This may not solve your problem but I'll state it anyway through the following points
I caused my problem by trying to be too familiar with a Library I've basically just started learning.
Not every new error should make us panic, that's when we start asking bunch of questions rather than being calm enough to realize that the cause of the error is in front of us.
Experimenting with code is a good thing while you are learning but make sure that the code works as the tutorial instructs and that you fully understand it before you start making changes and playing around with it.
According to me you might be using Functional Component and in functional component you can call methods directly without using this. Just add const keyword outside the method and call without this keyword.
OnPress takes a function, instead, you're sending an encapsulated function.
Try this
onContactPress = (item) =>{
Alert.alert();
}
renderFlatListItem({item}) {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.onContactPress(item)} >
<Image style={styles.rightArrow}
source={require('../../images/right_arrow.png')}/>
</TouchableOpacity>
</View>
)
}