Dynamically Add Values in String Array List in React Native on button click

The array’s inbuilt function ArrayName.push(“Put Your Value Here”) is used to programmatically add values in string array. So in this tutorial we would going to create a react native app with TextInput and Button component. Now we would get the TextInput value on button click and store-insert the value in String array using .push() function in android iOS react native application.

Contents in this project Dynamically Add Values in String Array List in React Native on Button Click:

1. Import StyleSheet, View, Text, Button, Alert and TextInput component in your project.

2. Create a String array named as SampleArray[] just above your class to make this array available globally in all below classes. We would also insert 2 values in array.

3. Create constructor() in your project’s class. Now we would create a State named as Holder. This state is used to store the TextInput value and then using this state we would insert value in Array.

4. Create a function named as AddItemsToArray() . Inside this function we would Add items to array using State. We would also convert the State value to string. After successfully insertion we would convert the whole array into String and show inside the Alert to make sure that value has been successfully added.

5. Create a Root View in render’s return block.

6. Create a TextInput  and Button component in Root View. Now we would apply the onChangeText={} prop on TextInput to store the TextInput typed value inside Holder State. We would also call the  AddItemsToArray() function on Button onPress event.

7. Create Style for View.

8. Complete source code for App.js File :

Screenshots in Android device :

String Array List Screenshots in iOS device :

2 Comments

  1. How we can access values from dynamically created Text Input. Like flat list creates 3 text inputs and then on click of button we validate which one is added and which one not. How to manage multiple state array.

Leave a Reply

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