Introducing React Native styles

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

import { StyleSheet } from 'react-native'; // Exports a "stylesheet" that can be used // by React Native components. The structure is // familiar for CSS authors. const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'ghostwhite', }, box: { width: 100, height: 100, justifyContent: 'center', alignItems: 'center', backgroundColor: 'lightgray', }, ...

Get React and React Native now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.