How to remove gap between two rows? - reactjs

Question

I am trying to create 6 customized button (3 buttons in each row) using TouchableOpacity. I was able to add the 3 buttons in the first row but when try to add the other three buttons in the next row, for some reason it pushes the the first row up. I want the gap/height between each rows to be at most 10px.
and my other question is, when I try to wrap the customized card with TouchableOpacity, it ignores the width I specify on the StyleSheet.
I am new to react native. So, if this is dumb question to ask, I apologize.
Here is the code I have,
//Card component
import React from "react";
import { StyleSheet, View, TouchableOpacity } from "react-native";
function Card(props) {
return (
<View style={{ ...styles.CardSytle, ...props.style }}>
{props.children}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
CardSytle: {
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 10,
backgroundColor: "white",
padding: 20,
borderRadius: 10,
marginHorizontal: 10,
marginVertical: 10,
},
});
export default Card;
//MainPage
import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import Card from "../components/Card";
const MainPageScreen = (props) => {
return (
<View style={styles.body}>
<View style={styles.cardContainer}>
<Card style={styles.card} />
<Card style={styles.card} />
<Card style={styles.card} />
</View>
<View style={styles.cardContainer}>
<Card style={styles.card} />
<Card style={styles.card} />
<Card style={styles.card} />
</View>
</View>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: "white",
},
cardContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
card: {
width: Dimensions.get("window").width / 3,
maxWidth: "28%",
height: 150,
maxHeight: "28%",
},
});
export default MainPageScreen;
//Here is screenshot of the buttons
[1]: https://i.stack.imgur.com/9z84U.png

Answer 1

You are setting a maxHeight of 28% which is setting the button height to 28% of parent and creates a blank space under the row. So you should remove it.
card: {
width: Dimensions.get('window').width / 3,
maxWidth: '28%',
height: 150,
},
As for the touchable opacity, Rather than wrapping the view you can use it as the main wrapper and style it Like below.
function Card(props) {
return (
<TouchableOpacity style={[styles.CardSytle, props.style]}>
{props.children}
</TouchableOpacity>
);
}