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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Alert, ScrollView, Platform, TouchableOpacity } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
constructor() {
super();
this.tmpArray = [
{ name: “Pankaj”, age: 10, class: “M.C.A” },
{ name: “Rita”, age: 11, class: “B.C.A” },
{ name: “Mohan”, age: 12, class: “M.C.A” },
{ name: “Amit”, age: 13, class: “M.C.A” },
{ name: “Babulal”, age: 14, class: “B.TECH” },
{ name: “Mohit”, age: 15, class: “B.C.A” },
{ name: “Amit”, age: 16, class: “B.C.A” },
{ name: “Ramkishan”, age: 17, class: “B.C.A” },
{ name: “Gopal”, age: 18, class: “B.C.A” },
{ name: “Jogesh”, age: 19, class: “B.C.A” },
{ name: “Yogesh”, age: 20, class: “B.C.A” }
];
}
|
3. Creating a function named as showArrayItem() in your class. This function is used to show the selected item from Array .
|
1
2
3
4
5
|
showArrayItem = (item) => {
Alert.alert(item);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer}>
<ScrollView>
</ScrollView>
</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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
render() {
return (
<View style={styles.MainContainer}>
<ScrollView>
{
this.tmpArray.map((item, key) => (
<TouchableOpacity key={key} onPress={this.showArrayItem.bind(this, item.name)}>
<Text style={styles.TextStyle} > Name = {item.name} </Text>
<Text style={styles.TextStyle} > Age = {item.age} </Text>
<Text style={styles.TextStyle} > Class = {item.class} </Text>
<View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#000’ }} />
</TouchableOpacity>
))
}
</ScrollView>
</View>
);
}
|
6. Creating style .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 2,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
},
TextStyle: {
fontSize: 20,
color: ‘#000’,
textAlign: ‘left’
}
});
|
7. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Alert, ScrollView, Platform, TouchableOpacity } from ‘react-native’;
export default class App extends Component<{}> {
constructor() {
super();
this.tmpArray = [
{ name: “Pankaj”, age: 10, class: “M.C.A” },
{ name: “Rita”, age: 11, class: “B.C.A” },
{ name: “Mohan”, age: 12, class: “M.C.A” },
{ name: “Amit”, age: 13, class: “M.C.A” },
{ name: “Babulal”, age: 14, class: “B.TECH” },
{ name: “Mohit”, age: 15, class: “B.C.A” },
{ name: “Amit”, age: 16, class: “B.C.A” },
{ name: “Ramkishan”, age: 17, class: “B.C.A” },
{ name: “Gopal”, age: 18, class: “B.C.A” },
{ name: “Jogesh”, age: 19, class: “B.C.A” },
{ name: “Yogesh”, age: 20, class: “B.C.A” }
];
}
showArrayItem = (item) => {
Alert.alert(item);
}
render() {
return (
<View style={styles.MainContainer}>
<ScrollView>
{
this.tmpArray.map((item, key) => (
<TouchableOpacity key={key} onPress={this.showArrayItem.bind(this, item.name)}>
<Text style={styles.TextStyle} > Name = {item.name} </Text>
<Text style={styles.TextStyle} > Age = {item.age} </Text>
<Text style={styles.TextStyle} > Class = {item.class} </Text>
<View style={{ width: ‘100%’, height: 1, backgroundColor: ‘#000’ }} />
</TouchableOpacity>
))
}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 2,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
},
TextStyle: {
fontSize: 20,
color: ‘#000’,
textAlign: ‘left’
}
});
|
Screenshots:
Also Read :
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native Show Image Icon Inside Activity Header Title Bar in React Navigation
React Native Add Background Animation on ScrollView Scroll Event
React Native Create Multi Language Localization Support App iOS Android
React Navigation Latest Version 5.x in React Native Example Tutorial
