Introducing React Native styles

It's time to implement your first React Native app, beyond the boilerplate that's generated by create-react-native-app. I want to make sure that you feel comfortable using React Native style sheets before you start implementing Flexbox layouts in the next section. Here's what a React Native style sheet looks like:

import { Platform, StyleSheet, StatusBar } from "react-native";

export default StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: "center",
 alignItems: "center",
 backgroundColor: "ghostwhite",
 ...Platform.select({
 ios: { paddingTop: 20 },
 android: { paddingTop: StatusBar.currentHeight }
 })
 },

 box: {
 width: 100,
 height: 100,
 justifyContent: "center",
 alignItems: "center",
 backgroundColor: "lightgray"
 },

 boxText: {
 color: "darkslategray",
 fontWeight: "bold"
 }
});
 

This is a JavaScript module, not a CSS module. If you want to declare React...