How to Show Map Function in React Native?

Nov 25, 2022 . Admin

In this example, We will use map function in react native.you can display an array to use map function 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.

Step 1: Download Project

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

expo init ExampleApp

Step 2: App.js

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

import React from 'react';
import {View, Text} from 'react-native';

const Home = () => {
  const array = [
    {
      key: '1',
      title: 'title 1',
      subtitle: 'subtitle 1',
    },
    {
      key: '2',
      title: 'title 2',
      subtitle: 'subtitle 2',
    },
    {
      key: '3',
      title: 'title 3',
      subtitle: 'subtitle 3',
    },
  ];

  const list = () => {
    return array.map((element) => {
      return (
        
          {element.title}
          {element.subtitle}
        
      );
    });
  };

  return {list()};
};

export default Home;

Step 3: Run Project

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