Sometimes, we want to loop and render elements in React Native.

In this article, we’ll look at how to loop and render elements in React Native.

How to loop and render elements in React Native?

To loop and render elements in React Native, we can use the JavaScript array map method.

For instance, we write:

import * as React from 'react';
import {  View, Text } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Dimensions } from 'react-native';

const arr = [1,2,3,4,5]

export default function App() {

  return (
    <View>
     {arr.map(a=>{
       return <Text key={a}>{a}</Text>
     })}
    </View>
  );
}

to call arr.map with a callback to return the Text component with the entry a as the text.

We set the key prop to a unique value for each entry so that React can identify the rendered components.

Therefore, we see

1
2
3
4
5

rendered.

Conclusion

To loop and render elements in React Native, we can use the JavaScript array map method.