I am making a react native health app in which the user can select tags to describe certain symptoms they are facing. I am trying to let the user create their own tags, at the moment the user can enter tags but cannot select them. Is there a way to allow them to select text inputs?
Here is how I have allowed users to create text inputs
addTextInput = (index) => { let textInput = this.state.textInput; textInput.push(<TextInput style={styles.textInput} onChangeText={(text) => this.addValues(text, index)} editable={true} /> ); this.setState({ textInput });}removeTextInput = () => { let textInput = this.state.textInput; let inputData = this.state.inputData; textInput.pop(); inputData.pop(); this.setState({ textInput, inputData });}
and this is what my current tags look like:
https://i.stack.imgur.com/5znWo.jpg
on the picture when the user presses the plus a new tag/TextInput is created, what I want is when the user presses it, it should be able to change color or the like.
here is the code for the plus button:
<View style={{ flexDirection: 'row', flexGrow: '1', flexWrap: 'wrap', width: Responsive.width(300) }}> {this.state.textInput.map((value) => { return value })}<TouchableWithoutFeedback onPress={() => { this.addTextInput(this.state.textInput.length) } }><Image style={{ marginLeft: 8, width: 38, height: 38 }} source={require('../../../assets/plusButton.png')} /></TouchableWithoutFeedback> {/* <Button title='Get Values' onPress={() => this.getValues()} /> */}</View><View style={styles.row}><View style={{ margin: 10, top: Responsive.height(75) }}><Button onPress={() => this.removeTextInput()}>Remove</Button></View></View>