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:
please make post on redux
Sure Rahul i will soon publish a new post on Redux .
Hi, I love your tutorial and can you please make a tutorial which regard to there is a list of data store in table A of mysql database. When I click a particular data, it can add to table B of mysql database.
Ronaldo you just want to store all the table one data into table two ? This is very easy all you have to do is first show all the data of Table one into FlatList the on the onPress event of Item just simply insert the data into table two using fetch method.
wow, thanks for ur guideline
Welcome 🙂 .
I am sorry, there is one more question I face, which is user must login in order to use the app. When user login, the user can click the item and when he or she click the add button, it will add all the product details to table B from table A which include product details a well as the user id which corresponding to the user account log in, do you know how to get the user id?
Ronald you just have to save the ID into a var after login and on the product details page use that ID.
I see…maybe I will try again
how to make a screen which will take input from user, a number. And on clicking a button, display the number in word. For example-> if input is 7863 then display ‘seven eight six three’
Swati First you have to make a TextInput which will get input from user after that you have to split the complete number use the switch case to match each number with entered number and store the result into a variable. To learn about how to use switch case in react native read my this tutorial this would help you : https://reactnativecode.com/switch-case-statement-in-react-native/
i can add only one time, When we clear textinput and add second items it will not display.
not able to add one by one two value..
Please help me.. , how to remove click item flatlist ?
Rafi you can use the any array item remove method to remove items.
can you give an example of an item delete function based on the project above?
Sure Rafi i will post a tutorial within a day or 2 explaining the project.
This is adding the record but after refreshing it is disappearing. Now what to do??? please reply
This is disappearing after refreshing becase i am not using permanent storage. If you store all the data on server or locally then it will not disappearing bro .
thank you for the fantastic tutorial, however I got a warning:
Encountered children with the same key.
May I have some advice on how to fix this?
Bruce i have just re-test the code and it is not showing any error please can you share me compete error.
Great tutorial, thanks!
BTW it’s showing a warning:
Encountered 2 children with the same key, what should I do?
Hi Brother ,I am getting error at line 47(textInput_Holder)
Property ‘textInput_Holder’ does not exist on type ‘Readonly
please can you help me…
Saad did you create textInput_Holder in state ?
I got this message on the bottom of simulator screen. How can we get rid of it?
Dismiss All
Warning: Encountered two children with the same key
[object Object]. …hi, thanks for the work!! i wanted to ask what can i do if i want to delete the text in the input when i click add.
in your example we put “SIX” we click on add we see the item “SIX” added the our list of items but the world six is still in the input, is there anyway to delete it when we click on add
Thanks
Bilel you want to delete the same string ? So the same data will not insert in the list, Am I right ?
how to convert this code into functional component