How to dynamically add a text input in React Native - react-native

Question

How can I add a text input in React Native with the click of a button? For example, I would press the "+" button and it would add a text input at the bottom of the View.
EDITED:
Here is my code (deleted all the irrelevant stuff). Not working for some reason. Clicking the button doesn't do anything.
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button,
TouchableHighlight, TouchableOpacity, ScrollView, findNodeHandle,
DatePickerIOS} from 'react-native';
import TextInputState from 'react-native/lib/TextInputState'
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {textInput: [],
date: new Date(),
}
}
addTextInput = (key) => {
let textInput = this.state.textInput;
textInput.push(<TextInput key={key} />);
this.setState({ textInput })
}
render(){
return(
<View>
<Button title='+' onPress={() =>
this.addTextInput(this.state.textInput.length)} />
{this.state.textInput.map((value, index) => {
return value
})}
</View>
)
}
}

Answer 1

this is an example for that :
import React, { Component } from 'react';
import { AppRegistry, View, Text, Button, TextInput} from 'react-native';
class App extends Component {
constructor(props){
super(props);
this.state = {
textInput : []
}
}
addTextInput = (key) => {
let textInput = this.state.textInput;
textInput.push(<TextInput key={key} />);
this.setState({ textInput })
}
render(){
return(
<View>
<Button title='+' onPress={() => this.addTextInput(this.state.textInput.length)} />
{this.state.textInput.map((value, index) => {
return value
})}
</View>
)
}
}
maybe that can help you :)

Answer 2

I have a solution that begins with a single text input. It has an "add" button that adds another text input just below the first. That new input keeps the "add" button, and all previous inputs above change to a "remove" button, with which, of course, the user can remove the corresponding view. I could only get it to work by handling state in a React Redux store, and so the code is spread out between too many different files to post here, but anyone interested can view it on GitHub or Snack.
I know this is an old post, but this is a problem I wish was answered when I first came here.

Answer 3

Here is example of dynamic add remove input
let obj = { text: '' }
this.state = {
attributeForm: [{ [1]: obj }],
duplicateAttributes: [1]
}
addAtributeRow() {
const { duplicateAttributes, attributeForm } = this.state;
let pushNumber = 1;
if (duplicateAttributes.length > 0) {
let max = Math.max(...duplicateAttributes);
pushNumber = max + 1
}
let arr = duplicateAttributes;
arr.push(pushNumber)
let obj = { text: '' }
this.setState({
attributeForm: [...attributeForm, { [pushNumber]: obj }]
})
this.setState({
duplicateAttributes: arr
})
}
deleteAttributeRow(number) {
const { duplicateAttributes, attributeForm } = this.state;
const index = duplicateAttributes.indexOf(number);
if (index > -1) {
duplicateAttributes.splice(index, 1);
let findedIndex;
for (let i = 0; i < attributeForm.length; i++) {
// var index = Object.keys(attributeForm[i]).indexOf(index);
if (Object.keys(attributeForm[i])[0] == number) {
findedIndex = i;
}
}
if (findedIndex > -1) {
attributeForm.splice(findedIndex, 1);
}
}
this.setState({
attributeForm: attributeForm,
duplicateAttributes: duplicateAttributes
})
}
render() {
const {attributeForm} = this.state;
{
duplicateAttributes.length > 0 && duplicateAttributes.map((item, index) =>
<View >
<Item style={GStyle.borderStyle} >
<Textarea placeholder="Text"
style={[GStyle.placeholder.text, { width: wp('90%') }]}
keyboardType="default"
autoCorrect={true}
autoCapitalize={'words'}
rowSpan={4}
value={attributeForm[index][item]['text']}
placeholderTextColor={GStyle.placeholder.color}
onChangeText={(text) => this.addAttributes(item, text, 'text')}
returnKeyLabel='done'
/>
</Item>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: wp('30%') }}>
{
<Button full rounded onPress={() => { this.deleteAttributeRow(item) }} >
<Icon name="minus" type="FontAwesome5" style={{ fontSize: wp('4%') }} />
</Button>
}
</View>
</View>
}
<Button full rounded onPress={() => { this.addAtributeRow() }} >
<Icon name="plus" type="FontAwesome5" style={{ fontSize: wp('4%') }} />
</Button>
}

Answer 4

If you want to do this with Hooks or Functional component then here is
the link of Expo
https://snack.expo.dev/#muhammadabdullahrishi/add-input
I have included how to add and delete Text Input
with hooks