React Native Create and Show Array Elements in Text using MAP

Array is used to store multiple values in a single object in react native. Array can hold infinite values(According to your requirement) in a single variable. So in this tutorial we would going to Create and Show Array Elements in Text component using MAP function. So let’s get started 🙂 .

Topics cover in this tutorial :

  1. Array Declaration.
  2. Inserting values in Array using Manually method.
  3. Showing Array Values in Text Component one by one like ListView.
  4. Adding onPress-onClick method on Array Item to get its value on click event.

Contents in this project Create and Show Array Elements in Text using MAP in React Native :

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

2. Create a function named as SampleFunction() with item argument inside it. This function is used to show the selected array element on Button onPress .

3. Create a Local Array inside render’s block named as SampleNameArray. Now we would manually insert some values in array. I am inserting my class mates name, You can insert any data according to your requirement.

4. Now we would make a Root View in render’s return block.

5. Finally we would print the Array values in Text Component using MAP function.

item : Represents the each item of array.

key : Represents the Item index value like 0, 1, 2.

6. Create Style for Root View and Text component.

7. Complete source code for App.js File :

Screenshot in Android device :

Show Array ElementsScreenshot in iOS device :

10 Comments

  1. Hi,
    How i can access only 1 item for example i want to only show the 3rd item in the array.
    Thanks

  2. thanks a lot finally it works ^_^

  3. How can i render an array of objects ?

    • Cesar you can render the array of object like
      var SampleNameArray = [ {firstName:"John", lastName:"Doe", age:46} ]; now to popup the items use this :
      { SampleNameArray.map((item, key)=>(
      { item.firstName } )
      )}

  4. hi, I get the array from an api, but the returned json is too big and in iphone devices fetch command takes no action!
    I used promise and also pagination with a recursive function and now I’m able to get the data. when calling this function in componentDidMount I can see that the returned array has the right elements and can be logged with map, but even with .then() I can not access the array. even it can not be logged directly but when I use ‘ ‘+data the array is shown like [object object],[object object],…
    would you please help me in this?

  5. how to get item data from array to dropdown

  6. How to set images in array ? and how to display two different images side . by side?could you please help me

Leave a Reply

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