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 :
- Array Declaration.
- Inserting values in Array using Manually method.
- Showing Array Values in Text Component one by one like ListView.
- 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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Alert } from ‘react-native’;
|
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 .
|
1
2
3
4
5
|
SampleFunction=(item)=>{
Alert.alert(item);
}
|
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.
|
1
2
3
4
5
6
7
8
|
render() {
var SampleNameArray = [ “Pankaj”, “Rita”, “Mohan”, “Amit”, “Babulal”, “Sakshi” ];
return (
);
}
|
4. Now we would make a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
var SampleNameArray = [ “Pankaj”, “Rita”, “Mohan”, “Amit”, “Babulal”, “Sakshi” ];
return (
<View style={styles.MainContainer}>
</View>
);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
var SampleNameArray = [ “Pankaj”, “Rita”, “Mohan”, “Amit”, “Babulal”, “Sakshi” ];
return (
<View style={styles.MainContainer}>
{ SampleNameArray.map((item, key)=>(
<Text key={key} style={styles.TextStyle} onPress={ this.SampleFunction.bind(this, item) }> { item } </Text>)
)}
</View>
);
}
|
6. Create Style for Root View and Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
},
TextStyle:{
fontSize : 25,
textAlign: ‘center’
}
});
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Alert } from ‘react-native’;
export default class App extends Component<{}> {
SampleFunction=(item)=>{
Alert.alert(item);
}
render() {
var SampleNameArray = [ “Pankaj”, “Rita”, “Mohan”, “Amit”, “Babulal”, “Sakshi” ];
return (
<View style={styles.MainContainer}>
{ SampleNameArray.map((item, key)=>(
<Text key={key} style={styles.TextStyle} onPress={ this.SampleFunction.bind(this, item) }> { item } </Text>)
)}
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 10
},
TextStyle:{
fontSize : 25,
textAlign: ‘center’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Swipeable CardView like Tinder in iOS Android Example
React Native Send SMS on Button Click From App iOS Android Example Tutorial
React Native Show Progress bar While Loading WebView Android iOS
React Native StatusBar Component Android iOS Example Tutorial
React Native JSON FlatList with Images and Text iOS Android Tutorial
