Styles and Flexbox

The former is a way to create layout, styles, and formatting in the elements. We create an object with StyleSheet.create(). For example, these are our Hello World styles:

 1 var styles = StyleSheet.create({
 2   container: {
 3     flex: 1,
 4     justifyContent: 'center',
 5     alignItems: 'center',
 6     backgroundColor: '#F5FCFF',
 7   },
 8   welcome: {
 9     fontSize: 20,
10     textAlign: 'center',
11     margin: 10,
12   },
13   instructions: {
14     textAlign: 'center',
15     color: '#333333',
16     marginBottom: 5,
17   },
18 });

I hope you can guess the meaning of some of the properties, like backgroundColor and fontSize. They are similar to background-color and font-size in CSS, and you already know that React uses camelCase instead of dashes. Other style properties, like flex, are specific to React Native. This is what they mean:

The numbers in the style properties are points, not pixels. The difference is that points can mean 1 or more pixels depending on the screen, so using points liberates developers from writing if/else conditions for various screen formats. Most notably, on old iPhones like the iPhone 3GS 1 point is 1 pixel (1:1). On the other hand, on new iPhones with Retina screens, such as the iPhone 6, 1 point is a 2x2 square of pixels (1:2).

The last statement of the file is akin to ReactDOM.render() from web React development:

1 AppRegistry.registerComponent('hello', () => hello);

It registers our component, hello, in the registry. You can change the name in the fat arrow function (the second argument) to anything else, but refrain from changing the first argument. ES6 fat arrows are covered in chapter 10 and appendix I. Right now, let’s explore the React Native components in more detail.