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.
Related
I insert dropdown list component from extra file
"<Option_Gender />""import Option_Gender from "../components/OptionBar/Option_Gender";"
like this.
I only know to return value for TextInput:
<TextInput
placeholder = "Name:"
value = {name}
onChangeText = {(text) => setName(text)}
style = {styles.BlockStyle}
placeholderTextColor= 'grey'
/>
But I don't know how to return value for this optionbar...
I have tried to return value in the Option_Gender file directly but it seems will cause a conflict...
I can only solve it by directly copying the code in Option_Gender to this page...Hope to have it this way because it puts the option function in a separate file.
I need to process the new character inputted in TextInput field, update the state, and then show the updated state in the TextInput using Value. I am able to do so but the text kind of flickers every time I update it.
In my opinion, this is due to the time it takes to process and then render it again.
Is there a way around to stop this from happening as this is turning out to be a bad user experience?
Edit:
What I am trying to achieve :-
const [input, setInput] = useState("")
const inputHandler = async(text) => {
let check = await isRTL();
if(check)
text = text.substring(text.length-1,text.length) + text.substring(0,text.length-1);
setInput(text);
}
return (
<TextInput value = {input} onChangeText={inputHandler} {...props} style = {{...props.style, textAlign: myDirection().start}} >
{props.children}
</TextInput>
)
I think I am not understanding the documentation correctly.
The documentation says: that is takes a Function that return a position: Number, or a stepStatus: which takes a String to render custom content inside step
My goal is to render a check mark instead of a number as it is by default.
I tried to return a string of 'test' and it does not work.
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
renderStepIndicator={() => {
this.renderStepIndicator();
}}
labels={labels}
/>
and this is the function that return a string
renderStepIndicator() {
return 'test';
}
I am not sure what I am missing here. also I want to return an icon of checkmark. I have seen people doin git but I am not sure how if this only takes a string or an integer.
Here this function returns two parameters step position and step status. You can use this function like this,
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
renderStepIndicator={(stepPosition,stepStatus) => {
this.renderStepIndicator(stepPosition,stepStatus);
}}
labels={labels}
/>
And the render function is like,
renderStepIndicator(stepPosition, stepStatus) {
return <Icon name={"check"} size={20} color={stepStatus === 'finished' ? "green" : "gray"} /> ;
}
This function render check icon. If you step was complete it show green check otherwise gray check.
For more details you can check this example,
https://github.com/24ark/react-native-step-indicator/blob/master/example/src/HorizontalStepIndicator.tsx
The above solution does not work for me so tried some changes and after some time I got this working solution if some are still facing this issue try using this code.
1. Put this code in your StepIndicator props
renderStepIndicator={({ position, stepStatus }) =>
renderStepIndicatorRender(position, stepStatus)
}
2. Create a function to render the icon
const renderStepIndicatorRender = (stepPosition, stepStatus) => {
return stepStatus === "finished" ? (
<Icon name="check" size={12} color="#fff" />
) : (
<Text>{stepPosition}</Text>
);
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 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