FlatList is one of the most usable component in react native, it’s the uppermost version of ListView and used to display a Items of list on mobile screen. In Today’s tutorial we would make a react native application with TextInput, Button and FlatList component. We would enter the values of TextInput inside the FlatList dynamically on button onPress event. So in this tutorial we would going to Add Items To FlatList Dynamically using TextInput on Button Click in react native android iOS application example tutorial.
Contents in this project Add Items To FlatList Dynamically using TextInput on Button Click Android iOS React Native App:
1. Import StyleSheet, FlatList, Text, View, Alert, TouchableOpacity and TextInput component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, FlatList, Text, View, Alert, TouchableOpacity, TextInput } from ‘react-native’;
|
2. Create constructor() in your project’s main class.
this.array : Is our main array in which would simply add some default values for the FlatList.
this.state. arrayHolder : Its the State array. We would use this array to show data into FlatList first we would copy the this.array into this.state. arrayHolder state and using the arrayHolder state we would show the data on FlatList.
this.state.textInput_Holder : It is used to hold the typed data from TextInput component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
constructor(props) {
super(props);
this.array = [{
title: ‘ONE’
},
{
title: ‘TWO’
},
{
title: ‘THREE’
},
{
title: ‘FOUR’
},
{
title: ‘FIVE’
}
],
this.state = {
arrayHolder: [],
textInput_Holder: ”
}
}
|
3. Creating componentDidMount() method in your main class. Now inside this method we would simply copy the this.array into arrayHolder State. Here is three dot is the array destructive operator
|
1
2
3
4
5
|
componentDidMount() {
this.setState({ arrayHolder: [...this.array] })
}
|
4. Creating a function named as joinData() in your class, Inside this function we would first PUSH(Enter) the value coming from TextInput component inside this.array and then we would simply copy the this.array into arrayHolder state.
|
1
2
3
4
5
6
7
|
joinData = () => {
this.array.push({title : this.state.textInput_Holder});
this.setState({ arrayHolder: [...this.array] })
}
|
5. Creating a function named as FlatListItemSeparator(), This function would render a slim horizontal line between each item of FlatList.
|
1
2
3
4
5
6
7
8
9
10
11
|
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
|
6. Creating a function named as GetItem(), Using this function we would show the selected Item value of FlatList on screen.
|
1
2
3
4
5
|
GetItem(item) {
Alert.alert(item);
}
|
7. Creating a TextInput, Touchable Opacity and FlatList component inside the render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value Here”
onChangeText={data => this.setState({ textInput_Holder: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity onPress={this.joinData} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> Add Values To FlatList </Text>
</TouchableOpacity>
<FlatList
data={this.state.arrayHolder}
width=‘100%’
extraData={this.state.arrayHolder}
keyExtractor={(index) => index.toString()}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={({ item }) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.title)} > {item.title} </Text>}
/>
</View>
);
}
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
margin: 2
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
textInputStyle: {
textAlign: ‘center’,
height: 40,
width: ‘90%’,
borderWidth: 1,
borderColor: ‘#4CAF50’,
borderRadius: 7,
marginTop: 12
},
button: {
width: ‘90%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius: 8,
marginTop: 10
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
},
});
|
9. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
import React, { Component } from ‘react’;
import { StyleSheet, FlatList, Text, View, Alert, TouchableOpacity, TextInput } from ‘react-native’;
export default class Myproject extends Component {
constructor(props) {
super(props);
this.array = [{
title: ‘ONE’
},
{
title: ‘TWO’
},
{
title: ‘THREE’
},
{
title: ‘FOUR’
},
{
title: ‘FIVE’
}
],
this.state = {
arrayHolder: [],
textInput_Holder: ”
}
}
componentDidMount() {
this.setState({ arrayHolder: [...this.array] })
}
joinData = () => {
this.array.push({title : this.state.textInput_Holder});
this.setState({ arrayHolder: [...this.array] })
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
GetItem(item) {
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value Here”
onChangeText={data => this.setState({ textInput_Holder: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
/>
<TouchableOpacity onPress={this.joinData} activeOpacity={0.7} style={styles.button} >
<Text style={styles.buttonText}> Add Values To FlatList </Text>
</TouchableOpacity>
<FlatList
data={this.state.arrayHolder}
width=‘100%’
extraData={this.state.arrayHolder}
keyExtractor={(index) => index.toString()}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={({ item }) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.title)} > {item.title} </Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
margin: 2
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
textInputStyle: {
textAlign: ‘center’,
height: 40,
width: ‘90%’,
borderWidth: 1,
borderColor: ‘#4CAF50’,
borderRadius: 7,
marginTop: 12
},
button: {
width: ‘90%’,
height: 40,
padding: 10,
backgroundColor: ‘#4CAF50’,
borderRadius: 8,
marginTop: 10
},
buttonText: {
color: ‘#fff’,
textAlign: ‘center’,
},
});
|
Screenshots:
Also Read :
React Native Add Floating Action Button in Both Android iOS App
React Native Custom Checkbox Component iOS Android Example
React Native Set TextInput maxLength Validation iOS Android Example
Create Transparent Background View in React Native Android iOS
React Native QR Code Scanner App using Camera Android iOS Example
