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 :
Hi,
How i can access only 1 item for example i want to only show the 3rd item in the array.
Thanks
Taha you can show only third item like this : SampleNameArray[2] .Array index starts from 0 so here 2 means 3rd item or array.
thanks a lot finally it works ^_^
Welcome 🙂 .
How can i render an array of objects ?
Cesar you can render the array of object like
{ item.firstName } )
var SampleNameArray = [ {firstName:"John", lastName:"Doe", age:46} ];now to popup the items use this :{ SampleNameArray.map((item, key)=>(
)}
hi, I get the array from an api, but the returned json is too big and in iphone devices fetch command takes no action!
I used promise and also pagination with a recursive function and now I’m able to get the data. when calling this function in componentDidMount I can see that the returned array has the right elements and can be logged with map, but even with .then() I can not access the array. even it can not be logged directly but when I use ‘ ‘+data the array is shown like [object object],[object object],…
would you please help me in this?
how to get item data from array to dropdown
How to set images in array ? and how to display two different images side . by side?could you please help me
Prasad you want to display image in array using HTTP URL ? Please tell me ?
anyone can help me how we can display multiple view using , array for loop in react native
how do i render array one after the order onClicking a button