There are basically 3 types of looping technologies present in JavaScript to execute a code multiple times with some changes the the loop is best way. In react native we use map() looping function instead of For loop, while loop and do while loop. Map is a JavaScript function used for looping control statements. So in this tutorial we would going to Add Items to ScrollView using Loop Method in iOS Android react native app example tutorial. We would render Views dynamically using Map in render’s return block. So let’s get Started .
Contents in this project Add Items to ScrollView using Loop Method in iOS Android React Native App:
1. Import StyleSheet, View, Text, ScrollView, Platform and Alert component in your project.
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, ScrollView, Platform, Alert } from ‘react-native’;
|
2. Create constructor() in your project, Now we would going to make a this array name as this.Array_Items and stored 12 months name inside this array. We would going to print these months inside ScrollView using Map function dynamically.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
constructor()
{
super();
this.Array_Items = [
‘January’,
‘February’,
‘March’,
‘April’,
‘May’,
‘June’,
‘July’,
‘August’,
‘September’,
‘October’,
‘November’,
‘December’
];
}
|
3. Create a Main View in render’s return block.
1
2
3
4
5
6
7
8
9
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
)
}
|
4. Create ScrollView component inside Root View.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render()
{
return(
<View style = { styles.MainContainer }>
<ScrollView>
</ScrollView>
</View>
)
}
|
5. Now we would going to implement .Map() function inside the ScrollView and dynamically print the Array elements on screen using Text Component.
The Map() function calls a Call back function for each array item until they are finished. Here item represents each item of array and key is used to identify each item individually.
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
|
render()
{
return(
<View style = { styles.MainContainer }>
<ScrollView>
{
this.Array_Items.map(( item, key ) =>
(
<View key = { key } style = { styles.item }>
<Text style = { styles.item_text_style } onPress={()=>{Alert.alert(item.toString())}}>{ item }</Text>
<View style = { styles.item_separator }/>
</View>
))
}
</ScrollView>
</View>
)
}
|
6. Create Style.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0
},
item_text_style:
{
fontSize: 20,
color: ‘#000’,
padding: 10
},
item_separator:
{
height: 1,
width: ‘100%’,
backgroundColor: ‘#263238’,
}
});
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, ScrollView, Platform, Alert } from ‘react-native’;
export default class MyApp extends Component
{
constructor()
{
super();
this.Array_Items = [
‘January’,
‘February’,
‘March’,
‘April’,
‘May’,
‘June’,
‘July’,
‘August’,
‘September’,
‘October’,
‘November’,
‘December’
];
}
render()
{
return(
<View style = { styles.MainContainer }>
<ScrollView>
{
this.Array_Items.map(( item, key ) =>
(
<View key = { key } style = { styles.item }>
<Text style = { styles.item_text_style } onPress={()=>{Alert.alert(item.toString())}}>{ item }</Text>
<View style = { styles.item_separator }/>
</View>
))
}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0
},
item_text_style:
{
fontSize: 20,
color: ‘#000’,
padding: 10
},
item_separator:
{
height: 1,
width: ‘100%’,
backgroundColor: ‘#263238’,
}
});
|
Screenshot in Android device: