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

Leave a Reply

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