How to Create Map Function in React Native?

Hi Guys,

In this example, you will learn how to create map function in react native. We will look at example of how to implement map function in react native. I’m going to show you about how to use map function in react native. you can see react native map function example. Let's see bellow example map function example in react native.

The map function is used to show a list of elements from an array. Properly saying, The map() method creates a new array with the results of calling a provided function on every element in the calling array.

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Image, ScrollView } from 'react-native';

const DATA = [
    {
        id: '1',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Divyesh',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '2',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Nikhil',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '3',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Bhavesh',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '5',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Vishal',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '6',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Mehul',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '7',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Dharmik',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '8',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Piyush',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '9',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Savan',
        email: '[email protected]',
        contry: 'India',
    },
    {
        id: '10',
        image: 'https://i1.wp.com/ggrmlawfirm.com/wp-content/uploads/avatar-placeholder.png?fit=256%2C256&ssl=1',
        name: 'Rajesh',
        email: '[email protected]',
        contry: 'India',
    },
];


const App = () => {
    return (
        <View>
            <ScrollView>
                {
                    DATA.map((item) =>
                        <View key={item.id} style={styles.innerContainer}>
                            <Image source={{ uri: item.image }} style={styles.img} />
                            <Text style={styles.item}>Name: { item.name }</Text>
                            <Text style={styles.item}>Email: { item.email }</Text>
                            <Text style={styles.item}>Contry: { item.contry }</Text>
                        </View>
                    )
                }
                <StatusBar/>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    innerContainer: {
        alignItems: 'center',
        padding: 30,
        margin: 2,
        backgroundColor: '#c53920'
    },
    img: {
        width:100,
        height:100,
        borderRadius:60,
    },
    item: {
        color:'white',
        marginTop:10,
        fontSize:18,
    },
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...