In this section, you'll learn how to make screen layout sections stretch from top to bottom. To do this, you need a flexible row. Here is what the styles for this screen look like:
import { Platform, StyleSheet, StatusBar } from "react-native";
export default StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
backgroundColor: "ghostwhite",
alignItems: "center",
justifyContent: "space-around",
...Platform.select({
ios: { paddingTop: 20 },
android: { paddingTop: StatusBar.currentHeight }
})
},
box: {
width: 100,
justifyContent: "center",
alignSelf: "stretch",
alignItems: "center",
backgroundColor: "lightgray",
borderWidth: 1,
borderStyle: "dashed",
borderColor: "darkslategray"
},
boxText: {
color: "darkslategray",
fontWeight: "bold"
}
});
Here's the App component...