React Native Get Object Value From Array and Show on Screen one by one

Array is used to hold single type of multiple values in all of programming languages but using the array of objects we can easily hold multiple types of value into a single array object. In this tutorial we would going to make a array with multiple object values and Get Object Value From Array and Show on Screen one by one. It will look like a ListView but instead of using the ListView we are using the Text component with ScrollView. We would use the Array.MAP function to extract data from Array objects. So let’s get started 🙂 .

Contents in this project Get Object Value From Array and Show on Screen one by one in React Native Android iOS App Example:

1. Import StyleSheet, Text, View, Alert, ScrollView, Platform and TouchableOpacity component in your react native project.

2. Creating constructor() in your project and inside the constructor we would make a Array named as tmpArray and store multiple type of object values in it. As you can see in below array there are multiple types of values name, age and class.

3. Creating a function named as showArrayItem() in your class. This function is used to show the selected item from Array .

4. Creating a Root Parent View in render’s return block. Inside the View we would make a ScrollView component. This would enable the Vertical scrolling in your view.

5. Inside the Scroll View component we would make a Curly Brackets {} block and call the Array.MAP function inside it. This function would pop up each array element for us. We are rapping all the three Text component and a View horizontal line component into Touchable opacity component.

6. Creating style .

7. Complete source code for App.js File :

Screenshots:

Get Object Value From Array

4 Comments

  1. Well explained! I really was looking into this. You saved my day. Thanks

  2. I want to Show one item at a time like i want to show only pankaj’s detail , swipe left or right for change another person’s detail , what should I do ?

    • Ritik on the application start time you want to display only one Item at a time then when you swipe left or right it will update the item ? Am I right ?

Leave a Reply

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