We Keep Coding

How to save TextInput with it's defaultValue if the user hasn't changed anything?

Okay so I hope this is easy, but I can't find anything about that on Google.
I have a details screen for a (cooking)receipe in my app. With the tap of a button the user can set a state isEditing, which then converts a heading into a text input. That heading displays {receipe.title} and I use the same value for the default value prop on the text input.
Once the user taps the edit button again, isEditing will be set to false and a update function will update the receipe in my Firebase database.
{!isEditing ? (
<Text style={styles.headingLarge}>{receipes.title}</Text>
):(
<TextInput
placeholder='Titel'
autoFocus={true}
defaultValue={receipes.title}
style={styles.headingLarge}
onChangeText={text => {
setPresentTitle(text);
}}/>
)}
It's all working, as long as the user actually changes something in the input. But the issue is that if a user doesn't change anything, onChangeText is never called and the database is updated with an empty string as it's title.
Is there a way to call the onChangeText when setting the defaultValue for this input (or another hack to set the setPresentTitle)?

Hey you can check this snack out, ive made it for you
This is the snack : https://snack.expo.dev/#gaurav1995/fascinated-donut
Hope it helps. feel free for doubts
import React,{ useState ,useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View ,TextInput ,Button } from 'react-native';
export default function App() {
const receipes = {
title:"Hey there"
}
const [isEditing, setEd] = useState(false)
const [text,setPresentTitle] = useState(receipes.title)
const toggleEdit = () => {
setEd(!isEditing)
}
useEffect(() => {
//update to firebase
//setFirebase(text)
},[text])
return (
<View>
{!isEditing ? (
<Text style={styles.headingLarge}>{text}</Text>
):(
<TextInput
placeholder='Titel'
autoFocus={true}
value={text}
style={styles.headingLarge}
onChangeText={text => {
setPresentTitle(text);
}}/>
)}
<Button title="Toggle Edit" onPress={toggleEdit} containerStyle={{marginTop:20}} />
</View>
)
}
const styles = StyleSheet.create({
container:{
flex:1,
padding:40
},
headingLarge:{
fontSize:40,
marginBottom:20
}
})

Render if prop changes in React Native Function

is it possible, in a React Native Function, to render the "return" at changes?
What I try:
I have a Function - this Function gets an specific array out of another Function - on Button Press I generate a new Index - now what I want is to re-render the View to display the array element with the new Index:
const generateNewIndex = function (item) {
return Math.floor(Math.random() * item.length);
};
const PositionItem = ({ arr, position, navigation }) => {
let { name, beschreibung, arten, rooms, isStarred } = position;
let testArray = arr;
let i = 0;
return (
<View style={styles.posContainer}>
<View style={styles.titles}>
<Text style={styles.title}>{name}</Text>
<Text style={styles.subtitle}>{beschreibung}</Text>
<Text style={styles.title}>{testArray[i].name}</Text>
</View>
<View style={styles.buttonsContainer}>
<StyledButton
type="primary"
content={"Next Random Position"}
onPress={() => {
console.warn("Pressed");
i = generateNewIndex(testArray);
}}
/>
</View>
</View>
);
};
export default PositionItem;
Thanks in advance!

I have found a way which is Working.
If anyone wonders in the Future what I did:
add a Use State component:
const [count, setCount] = useState(0);
onPress on Button increase the Count:
onPress={() => {
i = generateNewIndex(array);
setCount((prevCount) => prevCount + 1);
}}

Display only one element at a time in react with .map()

So basically I'm creating a quiz component, and I need to loop through all the questions, but display only one question at a time, and after the question is answered, display another one.
How could I do that? I would normally use for loop, but it is not recommended, how can I achieve the same outcome with .map(), or any other function?
This is basically what I want to happen:
for(let i = 0; i < quiz.questions.length(); i++) {
return (
<Content>
<View style={styles.gutter}>
<View style={styles.container}>
<View style={styles.content}>
<Text>{quiz.questions[i].question}</Text>
</View>
<Button
primary
label={quiz.answers.option1}
onPress={() => {
quiz.answers.option1 === quiz.questions[i].rightAnswer
? continue // would continue work here as expected?
: console.log("Wrong");
}}></Button>
<Button
primary
label={quiz.answers.option2}
onPress={() => {
quiz.answers.option2 === quiz.questions[i].rightAnswer
? continue // would continue work here as expected?
: console.log("Wrong");
}}></Button>
<Button
primary
label={quiz.answers.option3}
onPress={() => {
quiz.answers.option3 === quiz.questions[i].rightAnswer
? continue // would continue work here as expected?
: console.log("Wrong");
}}></Button>
</View>
</View>
</Content>
);
}

You should create a functional component with useState hook:
import React, { useState } from 'react';
function Quiz() {
const [index, setIndex] = useState(1);
const current = quiz.questions[index];
return (
<Content>
<View style={styles.gutter}>
<View style={styles.container}>
<View style={styles.content}>
<Text>{current.question}</Text>
</View>
<Button
primary
label={quiz.answers.option1}
onPress={() => {
if (quiz.answers.option1 === current.rightAnswer) {
setIndex(index + 1);
} else {
console.log('Wrong');
}
}}
/>
<Button
primary
label={quiz.answers.option2}
onPress={() => {
if (quiz.answers.option2 === current.rightAnswer) {
setIndex(index + 1);
} else {
console.log('Wrong');
}
}}
/>
<Button
primary
label={quiz.answers.option3}
onPress={() => {
if (quiz.answers.option3 === current.rightAnswer) {
setIndex(index + 1);
} else {
console.log('Wrong');
}
}}
/>
</View>
</View>
</Content>
);
}

If you want to show only one answer you should write a code like this:
I think you wanted to load one item already and you got undefined error message, so that's why you are asking your question
Let's assume you are getting your data via props of redux(it can be anything like regular state)
Render(){
<div>
{this.props.mydata &&
this.props.mydata.quiz[0] &&
this.props.mydata.quiz[0].question
}
</div>
}
This code checks your data, whenever the data loaded you can use it and you won't get any error. And you need to make it whenever your player answered right it goes +1 in array.
I hope you got the idea and works for you

React Native: In an array of Text Inputs which are looped then displayed, how to get nth element and modify those elements separately?

In this module I am trying to create a survey module similar to the one in twitter.
at first, color of text input borders are grey and when I focus (click) the text input, only one of them (clicked one) must be blue. Same idea when I type a text, they all shouldn't get the same value. I should be able to get each text input value that I created by clicking plus icon, as a String
Should I use a flatlist or a listview rather than a for loop ?
React-Native Listview, press row and change that row style
I also tried to solve it according to this example.
I change this example a little bit, I was able to change border color of clicked one. but still, I couldn't get the values...
Any solution suggestion ? Thank you.
screenshot 1
screenshot 2
This is my code;
changeInputBorderColor = () => {
const newinputBorderColor = cloneDeep(this.state.inputBorderColor);
newinputBorderColor.bar = '#04A5F5';
this.setState({inputBorderColor: {bar: newinputBorderColor.bar}});
};
changeInputBorderColor2 = () => {
this.setState({
inputBorderColor: {
bar: 'grey'
}
})
};
incrementInputCount = () => {
if (this.state.inputCounter < 5) {
this.setState(prevState => {
return {inputCounter: prevState.inputCounter + 1}
});
console.log(this.state.inputCounter);
}
else {
this.setState(prevState => {
return {inputCounter: prevState.inputCounter}
});
alert("Maximum soru sayısına ulaştınız");
}
};
render() {
let surveyOptions = [];
for (let i = 0; i < this.state.inputCounter; i++) {
console.log(this.state.inputCounter);
surveyOptions.push(
<View key={i}>
<View>
<TextInput
style={[styles._surveyTextInput, {borderColor: this.state.inputBorderColor.bar}]}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
onFocus={this.changeInputBorderColor}
onBlur={this.changeInputBorderColor2}
placeholder={"Secenek " + (i + 1)}
/>
</View>
</View>
)
}
return (
<View style={styles._surveyMainContainer}>
<View style={{flex: 0.8}}>
{surveyOptions}
<TouchableOpacity style={{position: 'absolute', right: 5, top: 5}}>
<Ionicons name={"ios-close-circle"}
size={30}
color={'black'}
/>
</TouchableOpacity>
<TouchableOpacity style={{position: 'absolute', right: 5, top: 45}}
onPress={this.incrementInputCount}>
<Ionicons name={"ios-add-circle"}
size={30}
color={'blue'}
/>
</TouchableOpacity>
</View>
<View style={{flex: 0.2}}>
<View
style={styles.renderSeparator}
/>
<Text style={{fontWeight: 'bold', margin: 5}}>Anket süresi</Text>
</View>
</View>
);
}

You can do it with a .map however you have to set it up correctly so that each TextInput has its own value in state. Currently what you are doing is setting the same value in state for each TextInput this results in every TextInput having the same value. Clearly not what you want.
Create an initial array in state (textArray) that has all values as empty strings, this will be used to store the values from each TextInput.
Set the focusedIndex to be null in state
Create a function that uses the previous state value to update the current state.
Create a function to handle the changing of the box color, it will just compare the TextInput index with the current focusedIndex
Iterate over the textArray and create the TextInput components. Make sure each TextInput has its own value in state.
Make sure we set the value of the focusedIndex in the onFocus and onBlur in the TextInput. When it blurs we should set the value to null so that it removes the border color when the keyboard is dismissed.
So we could do something like the following
export default class App extends React.Component {
constructor(props) {
super(props);
// construct an array with the number of textInputs we require,
// each value an empty string
// set this array in state
// set the focusedIndex to null
let textArray = Array(6).fill('');
this.state = {
textArray: textArray,
focusedIndex: null
}
}
// this function will handle setting of the state when each TextInput changes
onChangeText = (text, index) => {
// as there are going to be a lot of setState calls
// we need access the prevState before we set the next state.
this.setState(prevState => {
prevState.textArray[index] = text
return {
textArray: prevState.textArray
}
}, () => console.log(this.state.textArray))
}
// handle the border color
handleBorderColor = (index) => {
return index === this.state.focusedIndex ? 'red' : 'grey'
}
render() {
// here we map the items in the `this.state.textArray`
// notice that each TextInput is give a specific value in state
// that will stop the overlap
return (
<View style={styles.container}>
{this.state.textArray.map((text, index) => {
return <TextInput
style={{height: 40, marginVertical: 10, borderColor: this.handleBorderColor(index), borderWidth: 1}}
onChangeText={text => this.onChangeText(text, index)}
value={this.state.textArray[index]}
placeholder={`placeholder for ${index}`}
onFocus={() => this.setState({focusedIndex: index})}
onBlur={() => this.setState({focusedIndex: null})}
/>
})}
</View>
);
}
}
If you then want to access a specific value for a TextInput you can do so like this
let value = this.state.textArray[index]; // where the index is the value you want
Here is an example snack showing the code working
https://snack.expo.io/#andypandy/map-multiple-textinputs
It is definitely worthwhile looking at the following articles about state, as I have used these properties in this example.
https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0
https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296
https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6

How to autofocus next TextInput on react-native

I'm trying to create a passcode protected screen. The screen will uses 4 numeric input as the passcode.
The way I'm doing this is create a TextInput Component and call it 4 times in my main screen.
The problem I'm having is the TextInputs will not focus on the next one as I type the value of the previous TextInput.
I'm using refs for all PasscodeTextInput component (I've been informed that it is a legacy method but I do not know any other way, alas).
Tried this method(without creating my own component), no luck too.
METHOD
index.ios.js
import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';
export default class ProgressBar extends Component {
render() {
const { centerEverything, container, passcodeContainer, textInputStyle} = styles;
return (
<View style={[centerEverything, container]}>
<View style={[passcodeContainer]}>
<PasscodeTextInput
autoFocus={true}
ref="passcode1"
onSubmitEditing={(event) => { this.refs.passcode2.focus() }} />
<PasscodeTextInput
ref="passcode2"
onSubmitEditing={(event) => { this.refs.passcode3.focus() }} />
<PasscodeTextInput
ref="passcode3"
onSubmitEditing={(event) => { this.refs.passcode4.focus() }}/>
<PasscodeTextInput
ref="passcode4" />
</View>
</View>
);
}
}
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
backgroundColor: '#E7DDD3',
},
passcodeContainer: {
flexDirection: 'row',
},
}
AppRegistry.registerComponent('ProgressBar', () => ProgressBar);
PasscodeTextInput.js
import React from 'react';
import {
View,
Text,
TextInput,
Dimensions
} from 'react-native';
const deviceWidth = require('Dimensions').get('window').width;
const deviceHeight = require('Dimensions').get('window').height;
const PasscodeTextInput = ({ ref, autoFocus, onSubmitEditing, onChangeText, value}) => {
const { inputStyle, underlineStyle } = styles;
return(
<View>
<TextInput
ref={ref}
autoFocus={autoFocus}
onSubmitEditing={onSubmitEditing}
style={[inputStyle]}
maxLength={1}
keyboardType="numeric"
placeholderTextColor="#212121"
secureTextEntry={true}
onChangeText={onChangeText}
value={value}
/>
<View style={underlineStyle} />
</View>
);
}
const styles = {
inputStyle: {
height: 80,
width: 60,
fontSize: 50,
color: '#212121',
fontSize: 40,
padding: 18,
margin: 10,
marginBottom: 0
},
underlineStyle: {
width: 60,
height: 4,
backgroundColor: '#202020',
marginLeft: 10
}
}
export { PasscodeTextInput };
Update 1
index.ios.js
import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';
export default class ProgressBar extends Component {
constructor() {
super()
this.state = {
autoFocus1: true,
autoFocus2: false,
autoFocus3: false,
autoFocus4: false,
}
}
onTextChanged(t) { //callback for immediate state change
if (t == 2) { this.setState({ autoFocus1: false, autoFocus2: true }, () => { console.log(this.state) }) }
if (t == 3) { this.setState({ autoFocus2: false, autoFocus3: true }, () => { console.log(this.state) }) }
if (t == 4) { this.setState({ autoFocus3: false, autoFocus4: true }, () => { console.log(this.state) }) }
}
render() {
const { centerEverything, container, passcodeContainer, testShit, textInputStyle } = styles;
return (
<View style={[centerEverything, container]}>
<View style={[passcodeContainer]}>
<PasscodeTextInput
autoFocus={this.state.autoFocus1}
onChangeText={() => this.onTextChanged(2)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus2}
onChangeText={() => this.onTextChanged(3)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus3}
onChangeText={() => this.onTextChanged(4)} />
<PasscodeTextInput
autoFocus={this.state.autoFocus4} />
</View>
</View>
);
}
}
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
container: {
flex: 1,
backgroundColor: '#E7DDD3',
},
passcodeContainer: {
flexDirection: 'row',
},
}
AppRegistry.registerComponent('ProgressBar', () => ProgressBar);

There is a defaultProp for TextInput where one can focus after component mounted.
autoFocus
If true, focuses the input on componentDidMount, the default value is false. for more information please read the related Docs.
UPDATE
After componentDidUpdate it won't work properly. In that case, one can use ref to focus programmatically.

You cannot forward the ref to <TextInput> using that way because ref is one of the special props. Thus, calling this.refs.passcode2 will return you <PasscodeTextInput> instead.
Try change to the following to get the ref from <TextInput>.
PasscodeTextInput.js
const PasscodeTextInput = ({ inputRef, ... }) => {
...
return (
<View>
<TextInput
ref={(r) => { inputRef && inputRef(r) }}
...
/>
</View>
...
);
}
Then, assign the inputRef from <PasscodeTextInput> to a variable and use focus() to switch focus (it is not deprecated as of RN 0.41.2).
index.ios.js
return (
<PasscodeTextInput
autoFocus={true}
onChangeText={(event) => { event && this.passcode2.focus() }} />
<PasscodeTextInput
inputRef={(r) => { this.passcode2 = r }}
onChangeText={(event) => { event && this.passcode3.focus() }} />
<PasscodeTextInput
inputRef={(r) => { this.passcode3 = r }}
onChangeText={(event) => { event && this.passcode4.focus() }} />
<PasscodeTextInput
inputRef={(r) => { this.passcode4 = r }} />
);
P.S: event && this.passcode2.focus() prevents focus is switched when trying to clear the old passcode and enter a new one.

we handled this style of screen with a different approach.
Rather than manage 4 individual TextInputs and handle the navigation of focus across each one (and then back again when the user deletes a character), we have a single TextInput on screen but is invisible (ie. 0px x 0px) wide which has the focus, maxLength and keyboard configuration, etc.
This TextInput takes input from the user but can't actually been seen, as each character is typed in we render the entered text as a series simple View/Text elements, styled much similar to your screen above.
This approach worked well for us with no need to manage what the 'next' or 'previous' TextInput to focus next to.

You can use focus method onChangeText as Jason stated, in addition to that adding maxLength={1} can make you jump to the next input immediately without checking what's added. (just noticed its deprecated, but still this is how I solved my problem, and should do fine until v0.36, and this link explains how you should update the deprecated function).
<TextInput
ref="first"
style={styles.inputMini}
maxLength={1}
keyboardType="numeric"
returnKeyType='next'
blurOnSubmit={false}
placeholderTextColor="gray"
onChangeText={(val) => {
this.refs['second'].focus()
}}
/>
<TextInput
ref="second"
style={styles.inputMini}
maxLength={1}
keyboardType="numeric"
returnKeyType='next'
blurOnSubmit={false}
placeholderTextColor="gray"
onChangeText={(val) => {
this.refs['third'].focus()
}}
/>
...
Please notice that my use of refs are deprecated too, but I've just copied the code since I can guarantee you that was working back then (hopefully works now too).
Finally, the main issue with this type of implementation is, once you try to remove a number with backspace your focus will jump to next one, causing serious UX issues. However, you can listen for backspace key entry and perform something different instead of focusing to next input. So I'll leave a link here for you to further investigate if you choose to use this type of implementation.
Hacky Solution to Previously Described Issue: If you check what's entered in onChangeText prop before doing anything, you can jump to next input if the value is a number, else (that's a backspace), jump back. (Just came up with this idea, I haven't tried it.)

I think the issue is that onSubmitEditing is when you hit the "return" or "enter" key on the regular keyboard... there is not one of those buttons on the keypad.
Assuming you want each input to only have one character, you could look at the onChangeText and then check if text has length 1 and call focus if the length is indeed 1.

<TextInput
ref={input => {
this.nameOrId = input;
}}
/>
<TouchableOpacity
onPress={()=>{
this.nameOrId.focus()
}}
>
<Text>Click</Text>
</TouchableOpacity>

I solve with this code:
const VerifyCode: React.FC = ({ pass, onFinish }) => {
const inputsRef = useRef<Input[] | null[]>([]);
const [active, setActive] = useState<number>(0);
const onKeyPress = ({ nativeEvent }:
NativeSyntheticEvent<TextInputKeyPressEventData>) => {
if (nativeEvent.key === "Backspace") {
if (active !== 0) {
inputsRef.current[active - 1]?.focus();
return setActive(active - 1);
}
} else {
inputsRef.current[active + 1]?.focus();
return setActive(active + 1);
}
return null;
};
return (
<View style={styles.container}>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 0}
ref={(r) => {
inputsRef.current[0] = r;
}}
/>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 1}
ref={(r) => {
inputsRef.current[1] = r;
}}
/>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 2}
ref={(r) => {
inputsRef.current[2] = r;
}}
/>
<StyledInput
onKeyPress={onKeyPress}
autoFocus={active === 3}
ref={(r) => {
inputsRef.current[3] = r;
}}
/>
</View>
);
};
export default VerifyCode;
I put one ref in all the inputs, and when the onKeyPress fire, the function verify if have to go back or go to next input

Solved it by removing autoFocus={true} and setting timeout.
I have a popup as a functional component and using "current.focus()" with Refs like this:
const Popup = ({ placeholder, autoFocus, showStatus, }) => { const inputRef = useRef(null); useEffect(() => {
Platform.OS === 'ios'
? inputRef.current.focus()
: setTimeout(() => inputRef.current.focus(), 40); }, [showStatus]); return (
<View style={styles.inputContainer}>
<TextInput
style={styles.inputText}
defaultValue={placeholder}
ref={inputRef}
/>
</View> };