Mapping in React Native

Map Method with ScrollView Component in React Native

September 21, 2020

 What is Map ?

Map is a collection of key and value pairs, similar to Object. The main difference between a Map and an Object is that Map allows key on any type either primitive or an object. Let’s learn how to create a Map and do operations on it.

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

    var abc =[
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
      {
        CourseName:"reactjs",
        CourseDescription:'react js is a javascript library, single page application',
      },
    ]

    export default function App() {
      return (
       <View>
        <Text style={{fonrSize:"50px"}}>Map function with React Native</Text>
        <ScrollView>
          {
            abc.map((item)=><Text style={styles.item}>{item.CourseName}</Text>)
          }
        </ScrollView>
       </View>
      );
    }

    var styles=StyleSheet.create({
     item:{

        fontSize:18,
        width:150,
        padding:20,
        color:'black',
        backgroudnColor:'gray',
        borderWidth:1,
        margin:10,
      }
    })