I am trying to put the elements of a 2 since what is a data .map and I can not put a divider DIV with a flexDirection: "row", I need to make a wrap and they are accommodated but doing it is not working correctly.
<View
style={styles.container_cards}
>
{
data.map((elements, index) => {
return(
<CardTwoRows elements={elements}/>
)
})
}
</View>
const styles = StyleSheet.create({
container_cards: {
width: "100%",
height: "100%",
marginTop: verticalScale(14),
flexWrap: "wrap",
},
})
My CardTwoRows, it basically contains this
<View style={styles.container}>
.........
</View>
const styles = StyleSheet.create({
container: {
width: "49%",
height: verticalScale(220),
borderRadius: scale(6),
marginRight: "2%",
},
})
This is a sample of how it looks, I need to show 2 then a space between the lines and 2 cards again
CodePudding user response:
You can use a flatlist like this.
A working demo as well as the code below
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
const list = [0, 1, 2, 3, 4, 5, 6, 7];
export default function App() {
return (
<View style={styles.container}>
<FlatList
data={list}
numColumns={2}
keyExtractor={(item)=> item}
renderItem={({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
height: 100,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#212121',
margin: 5,
borderRadius: 10,
},
text: {
fontSize: 40,
fontWeight: '600',
color: 'white',
},
});