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.
here is the code i found in another page but when i click on the plus nothing happen
var textInput = []
let addTextInput = (key) => {
textInput.push(<TextInput key={key} style={{color:'red',borderColor:'red'}}/>);
{ textInput }
}
let orgServiceandWorkHours = (
<View>
<Button title='+' onPress={() =>
addTextInput(textInput.length)} />
{textInput.map((value, index) => {
return value
})}
</View>
)
Heres a full example (https://snack.expo.dev/@heytony01/mature-carrot) and the code below.
export default function App() {
const [numTextInputs,setNumTextInputs] = React.useState(0);
return (
<View style={styles.parent}>
{/* Button */}
<TouchableOpacity onPress={()=>setNumTextInputs(val=>val+1)} style={styles.buttton}>
<Text style={styles.text}> Add TextInput </Text>
</TouchableOpacity>
<ScrollView style={{flex:1}} >
{[...Array(numTextInputs).keys()].map(key=>{
return <TextInput key={key} placeholder="Here Man" style={{width:200,height:100,borderColor:"blue",margin:10,borderWidth:1}}/>
})}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
parent:{flex:1,justifyContent:"center",alignItems:"center"},
textInput:{width:"80%",height:"5%",backgroundColor:"lightgray",margin:20,borderRadius:10,textAlign:"center"},
buttton:{width:"80%",height:"12%",backgroundColor:"lightblue",borderRadius:10,
justifyContent:"center",alignItems:"center"
},
text:{fontSize:30,fontFamily:"bold",color:"black"},
})