I have an issue in my app with TextInput for a bank card numbers digit (error because user not type all number 16 digits).
So I would like to cut CB number on 4 TextInputs and focus automatically on next field after filled the 4 digits. (as already seen it in the web app)
But when I focused the next field, the current became empty, even if the state is correctly set.
Do you have an idea about how can I do that or is it impossible ?
ie. see the onChangeText on this example (exp date actually) :
<TextInput
ref='card_exp_date_mm'
style={[styles.inputTxt, {width: 30, flex: 0}]}
value={this.state.cardExpDateMonth}
keyboardType='numbers-and-punctuation'
placeholder='MM'
returnKeyType='next'
clearTextOnFocus={false}
autoCorrect={false}
placeholderTextColor={Constants.placeholderTextColor}
maxLength={2}
enablesReturnKeyAutomatically={true}
blurOnSubmit={false}
onChangeText={text => {
this.setState({cardExpDateMonth: text})
//console.log('onChangeText', this.refs.card_exp_date_mm)
if(text && text.length == 2){
this.refs.card_exp_date_aa.focus();
}
}}
onSubmitEditing={()=>this.refs.card_exp_date_aa.focus()}/>
you could do something like in this example:
this.refs[nextField].focus()
You should really check this example out, it covers what you are searching for.
Related
I want to limit TextInput to full number and the value must be less than 50. I'm leveraging OnChangeText event to intercept the input value and filter it accordingly. It kind of works but the issue is, it briefly displays the text before erasing it. This is an excerpt of my code -
const [userInputValue, setuserInputValue] = useState('');
let onChangeTextInput = (value) => {
const numericRegex = /^([0-9])+$/
if(numericRegex.test(value) && Number(value) <= 50) {
setuserInputValue(value)
}
}
return (
<TextInput
placeholder='Type full number less than 50'
onChangeText={newValue => onChangeTextInput(newValue)}
value={ userInputValue }
textAlign='center'
keyboardType='numeric'
style={{
width: 250,
marginVertical: 10
}}
/>
When I searched online, I found this issue was reported as bug for react-native 0.54.3 and supposedly fixed in 0.57.1 (Bug Report). I'm on 0.70.5. I'm wondering if there's any work around for this problem.
System - iOS
React-native - 0.70.5
I have a TextInput field that when a user is editing, they have the option to cancel. The goal is to revert the TextInput value back to the original value before the user started editing, however, even though the previous value is stored and the screen is re-rendering, the text on the screen stays however the user left it. I'm assuming I'm just misunderstanding how the TextInput component works.
This is the input in question:
<TextInput
style={styles.workoutheader}
editable={editableWorkout == workout.id}
onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{workout.name}
</TextInput>
and this is the cancel button:
<TouchableOpacity
style={styles.workoutheadericon}
onPress={() => {
console.log('Reverting to: ' + prevWorkoutName, prevWorkoutType, prevWorkoutWeight, prevWorkoutReps);
setWorkoutName(prevWorkoutName);
setWorkoutType(prevWorkoutType);
setWorkoutWeight(prevWorkoutWeight);
setWorkoutReps(prevWorkoutReps);
setEditableWorkout('');
setIsEditing(!isEditing);
setActionCounter(actionCounter + 1);
}}
>
{workout.name} is coming from a firestore database, but I don't think that's related.
I don't think the variable workout gets updated when you call setWorkoutName, try replacing {workout.name} with workoutName or whatever variable name you used where you declared your useState function that created the setWorkoutName setter function, e.g.
const [workoutName, setWorkoutName] = useState(workout.name)
return (
<TextInput
style={styles.workoutheader}
editable={editableWorkout == workout.id}
onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{/* should be `workoutName` here, not `workout.name` */ workoutName}
</TextInput>
)
SOLUTION
I needed to target the workout being edited with
editableWorkout == workout.id ? workoutName : workout.name} which let me differentiate between the workouts using Leon Si's answer.
I have a field where I only want the length to be 3 numbers long max. I am using Yup, however, it only notifies the user of the error, it doesn't stop the user from entering a number longer than desired.
To fix this I created a function that slices the input value. This looks like it works, it keeps the length in the form field to what I want, however, when I click submit the value for the field is the unsliced version.
Here is my code...
<TextInput
style={styles.text}
value={_checkLength(values.number, 3)}
onChangeText={handleChange('number')}
onBlur={() => setFieldTouched('number')}
placeholder="Number"
/>
My _checkLength function is simple...
_checkLength = (value, length) => {
return value.slice(0, length)
}
Why is this not working?
Leaving this answer so people can see how to use setFieldValue, but #Carlos had the correct and obvious answer. That is to simply use maxLength={num}
Credit to #MohammedAshfaq . His answer is correct but I wanted to provide exact code that needs to be updated. The answer was to run setFieldValue by putting it in the onChangeText field. I had to pass in the value and then run my function using that passed in value. Now, when I submit it submits the proper value returned from the _checkLength function.
<TextInput
style={styles.text}
value={values.number}
onChangeText={(value) => setFieldValue('number', _checkLength(value, 3))}
onBlur={() => setFieldTouched('number')}
placeholder="Uniform Number"
/>
I need to verify that the text is less than 11 characters
how I did this?
(sorry about my english)
To check that the length of input text < 11 is pretty simple. You can do it like this:
<TextInput
onChangeText={(text) => {
if (text.length < 11) {
this.setState({text});
} else {
this.setState({errorMessage: 'Text input must be less than 11'});
}
}}
value={this.state.text}
/>
What you also need to consider is how you want to present this information to the user. (i.e. some sort of error message to notify them of this problem, so they know what is happening)
For reference, please consider reading the documentation: https://facebook.github.io/react-native/docs/textinput.html
React-native documentation is generally excellent. Just go through the Components list and read up on these things.
I simply want to call a function with the text of a TextInput once editing of the text is done. Something like below
<TextInput onSubmitEnding={(text) => submitText(text)}>
But obviously the text is not passed as argument to onSubmitEnding, . onChangeText has it. But I really want the text after the user is done editing. So whats the simplest means to do this,
1º onSubmitEnding is not a valid event, the correct one is onSubmitEditing.
2º You can get the input value using event.nativeEvent.text
Your code should look like this
<TextInput onSubmitEnding={(event) => this.submitText(event.nativeEvent.text)}>
I'm not forcing you to certain pattern, but you should have your TextInput's value in a state. Then:
...
this.state = {
textInputValue: ''
}
...
submitText() {
console.log(this.state.textInputValue)
}
...
<TextInput
value={this.state.textInputValue}
onChangeText={(text) => this.setState({textInputValue: text})}
onSubmitEditing={() => this.submitText()} />
is completely valid. Here's a live example: https://rnplay.org/apps/wirurQ