4-Layout.md

Chapter 4 - Styling and Layout

Styling

• We just use JavaScript objects
• Names written camelCased (backgroundColor instead of background-color)
• You could use a normal object but use StyleSheet.create
• You can have mulitple objects in the array of styles <Text style={[styles.bigblue, styles.red]}>Some text</Text>
• Limited inheritance for <Text />

// the text with "highlight" will have both the styles from text and highlight
<Text style={styles.text}>Some text <Text style={styles.highlight} > that needs highlighting.</Text> </Text>

Layout

• Use Flexbox for layout
• flexDirection, alignItems, and justifyContent

Resources

• Styling in React Native
• Flexbox
• Layout Properties

Exercises

Here is a wee exercise :-) How many can you do?