There are a few things that I think you can improve on from the last example. Let's fix the styles so that the children of the Flexbox stretch to take advantage of the available space. Remember, in the last example, when you rotated the device from a portrait orientation to a landscape orientation? There was a lot of wasted space. It would be nice to have the components automatically adjust themselves. Here's what the new style module looks like:
import { Platform, StyleSheet, StatusBar } from "react-native";
export default StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
backgroundColor: "ghostwhite",
alignItems: "center",
justifyContent: "space-around",
...Platform.select({
ios: { paddingTop: 20 },
android: { paddingTop: StatusBar.currentHeight }
})
},
box: {
height: 100,
justifyContent: "center",
alignSelf: "stretch"...