Two cards side by side react native - react-native

Question

I referred to lot of places but still the issue persist, I've a card list here im displaying just four cards, now I want each row to have two cards each, but unable to do so. Here is the code for reference.
<View style={styles.panelBox}>
<TouchableOpacity
activeOpacity={1}
onPress={() => navigation.navigate('ExploreCareersIndex', { pathway_id: pathway.id })}
style={[styles.card]}>
<ImageBackground
resizeMode='cover'
style={styles.cardBody}
imageStyle={styles.imageRadius}
source={{uri: pathway.avatar_url}}>
</ImageBackground>
<Text style={styles.textImageStyle}>{pathway.name}</Text>
</TouchableOpacity>
</View>
and the CSS
panelBox: {
paddingHorizontal: 15,
paddingLeft: 10,
paddingRight: 10,
backgroundColor:'blue',
flexDirection:'row',
flexWrap:'wrap',
flex:1,
flexBasis:2,
},
card: {
backgroundColor: Colors.white,
width: "40%",
height:130,
textAlign: "center",
backgroundColor:'red',
},
cardBody: {
padding: 10,
justifyContent: "space-between",
overflow: "hidden",
shadowColor: Colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
height: 80,
},
imageRadius: {
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
},
cardtitle: {
textAlign: "left",
fontSize: 12,
lineHeight: 16,
color: Colors.white,
fontFamily: primaryFont.fontMedium,
paddingRight: 10,
},
textImageStyle: {
textAlign: 'center',
fontSize: 12.5,
fontFamily: primaryFont.fontMedium,
marginTop: 5,
color: Colors.gray4,
height: '100%',
},
still unsure why it isnt working. If you still need more reference I can provide some screenshot as well.

Answer 1

Since you are trying to display a list of items try to use FlatList or SectionList. Using numColumns Props in React Native FlatList you can easily display multiple columns layout.
Check below sample
import React, { Component } from "react";
import { View, FlatList, StyleSheet, Text, Dimensions } from "react-native";
const ScreenWidth = Dimensions.get("window").width;
const DATA = [
{
id: "1",
title: "1"
},
{
id: "2",
title: "2"
},
{
id: "3",
title: "3"
}
];
export default class Example extends Component {
renderItems = ({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
render() {
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={this.renderItems}
keyExtractor={item => item.id}
numColumns={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
item: {
width: (ScreenWidth - 40) / 2 - 10,
backgroundColor: "#000",
padding: 10,
marginVertical: 10,
marginHorizontal: 10
},
title: {
fontSize: 32,
color: "#fff",
alignSelf: "center"
}
});
If you have any doubts feel free to ask. Hope this will helps you.

Answer 2

Not sure is this what you want, two card in a row. So, in react-native you can just flex:1 for parent, and set width:'100%' for child, and it will auto divided by two.
.grandparent{
display:flex;
flex-direction:column;
}
.parent{
display:flex; // in react-native just flex:1
}
.child{
background-color:#333;
height:100px;
width:100%;
border:1px solid #ccc;
text-align:center;
color:#fff;
font-size:30px;
}
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
<div class="child">4</div>
</div>
</div>

Answer 3

You need to add ScrollView Insid the ScrollView add cards then in ScrollView add property horizontal={true}