How to do a loop for cards - reactjs

Question

how do i do a loop for 10 cards? Cant find any solution anywhere.
I need it to output cards with some info which ill specify later. I am new to React Native and got no idea what Im doing. It worked when ive written return into the loop, but it returned just one card (better than none I guess).
import * as React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
export default function Primary({ navigation })
{
return(
<ScrollView style=
{{
flex: 1,
}}>
<View>
<Text style={{ fontSize: 26, fontWeight: 'bold' }}>
Hlavni
</Text>
<Text>Ahojda</Text>
</View>
<Text>Swag</Text>
<KartyLoop/>
</ScrollView>
);
}
const KartyLoop = () => {
var swag[];
for (i=0; i<5; i++)
{
<View>
<Card style={{borderRadius: 25}}>
<CardTitle
title="This is a title"
subtitle="This is subtitle"
/>
<CardContent text="Your device will reboot in few seconds once successful, be patient meanwhile" />
<CardAction
separator={true}
inColumn={false}>
<CardButton
onPress={() => {}}
title="Push"
color="blue"
/>
<CardButton
onPress={() => {}}
title="Later"
color="blue"
/>
</CardAction>
</Card>
</View>
}
return();
}

Answer 1

When rendering a list of components in react native, you need to put them in some sort of list.
Try wrapping the code inside your <View> with <Flatlist>
Docs: https://reactnative.dev/docs/flatlist
Full example from docs:
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;