? List Rendering using map()

? Quick Overview

In React Native, lists are commonly rendered using the JavaScript map() function. It allows you to loop through an array and return UI components dynamically.

? Key Concepts

• map() converts array items into components
• Each item must have a unique key
• Commonly used with View, Text, and FlatList

? Syntax / Theory

The map() function iterates over an array and returns JSX for each element. This is the most basic way to display a list in React Native.

? Code Example(s)

// Rendering a list using map() in React Native
import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

  return (
    <View>
      {fruits.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
}

? Live Output / Explanation

? Interactive Example

Below is a simulation of how map() works dynamically. Add or remove items to see how the list (UI) updates instantly based on the data array.

? Use Cases

• Displaying user lists
• Product catalogs
• Menu items
• Simple static lists