I want to add more components after clicking on the button. Can you share code or an idea so that I can implement? As the image shows, every time when user click on the add button, one row / component will be added.
2 Answers
I think you may be asking like adding task in todo app. My answer is as follows. In the beginning, there is an array as data with three items as I stored in the state of the component and those 3 items are displaying in the screen. Then I use a modal to take the input from the user and store that input as newInput in the state of the component. Then I used a button to add that newInput to the data in handleModalClick function. Then the newInput value is added to the data array. The all the elements in the data array are displaying on the screen.
import React, { Component } from "react";
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
TextInput,
Button,
Modal,
TouchableHighlight,
Alert,
TouchableOpacity
} from "react-native";
import Constants from "expo-constants";
import uuid from "uuid/v1";
import { Ionicons } from "@expo/vector-icons";
export class Test extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
id: 1,
title: "First Item"
},
{
id: 2,
title: "Second Item"
},
{
id: 3,
title: "Third Item"
}
],
modalVisible: false,
newInput: ""
};
}
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
handleModalClick = () => {
this.setState(
{
data: [...this.state.data, { id: uuid(), title: this.state.newInput }]
},
this.setState({
newInput: ""
})
);
};
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
)}
keyExtractor={item => item.id}
/>
<View style={{ marginTop: 22 }}>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={{ marginTop: 22 }}>
<View>
<TextInput
placeholder="ENTER"
onChangeText={text => {
this.setState({
newInput: text
});
}}
value={this.state.newInput}
/>
<Button title="click" onPress={this.handleModalClick} />
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}
>
<Ionicons name="md-close-circle" size={50} color="red" />
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableOpacity
onPress={() => {
this.setModalVisible(true);
}}
>
<Ionicons name="md-add-circle" size={100} color="violet" />
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight
},
item: {
backgroundColor: "#f9c2ff",
padding: 10,
marginVertical: 8,
marginHorizontal: 16
},
title: {
fontSize: 18
},
input: {
borderWidth: 2
}
});
export default Test;Related