← React Native learning pathReact Native · Module 3 of 10
Styling and layout
Style with StyleSheet and lay out with Flexbox.
📖 Key ideas
- Styles are JavaScript objects: StyleSheet.create({ box: { padding: 16 } }).
- Properties use camelCase: backgroundColor.
- Layout uses Flexbox; default flexDirection is column.
- Units are density-independent numbers (no px).
- Libraries: NativeWind (Tailwind), styled-components.
💡 Real-life example: Flexbox in React Native is arranging books on a shelf: stack, spread, centre or align them.
StyleSheetAPI to create styles
flexDirectionMain axis: row or column
justifyContentAlign along main axis
alignItemsAlign on cross axis