Components specify the layout of their children using the flexbox algorithm. With flexbox we can specify a layout that expands or shrinks to fill screens of various dimensions. We can seamlessly mix and match these automatic layouts with fixed sizes like
Under the hood, flexbox is implemented with the library Yoga.
To choose the right layout for a component's children, we must make 3 choices:
|Do we want a vertical (|
|How should the content be distributed along the primary axis of our layout? Should it be at the start, the center, the end, or spaced evenly?|
|How should the content be aligned along the secondary axis of our layout? (If the primary axis is |
The following example lets you try all the possible combinations of flexbox properties and layouts.
Want to learn React Native in-depth?
Looking for more help?
Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!