React Native Add Items To FlatList Dynamically using TextInput on Button Click

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.

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.

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

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.

5. Creating a function named as FlatListItemSeparator(), This function would render a slim horizontal line between each item of FlatList.

6. Creating a function named as GetItem(), Using this function we would show the selected Item value of FlatList on screen.

7. Creating a TextInput, Touchable Opacity and FlatList component inside the render’s return block.

8. Creating Style.

9. Complete source code for App.js File :

Screenshots:

Add Items To FlatList Dynamically

24 Comments

  1. please make post on redux

  2. 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.

  3. I see…maybe I will try again

  4. 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’

  5. i can add only one time, When we clear textinput and add second items it will not display.

  6. not able to add one by one two value..

  7. Please help me.. , how to remove click item flatlist ?

  8. can you give an example of an item delete function based on the project above?

  9. 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 .

  10. 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?

  11. Great tutorial, thanks!
    BTW it’s showing a warning:
    Encountered 2 children with the same key, what should I do?

  12. 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…

Leave a Reply

Your email address will not be published. Required fields are marked *