Layout

    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 width: 100.

    Under the hood, flexbox is implemented with the library Yoga.

    Properties

    To choose the right layout for a component's children, we must make 3 choices:

    PropertyDefaultOptionsDescription
    flexDirectioncolumnrow, columnDo we want a vertical (column) or horizontal (row) layout? This choice determines the orientation of the primary axis of our layout.
    justifyContentflex-startflex-start, center, flex-end, space-around, space-betweenHow 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?
    alignItemsstretchflex-start, center, flex-end, stretchHow should the content be aligned along the secondary axis of our layout? (If the primary axis is row, then the secondary axis is column, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill?

    Example

    The following example lets you try all the possible combinations of flexbox properties and layouts.

    Previous:
    View
    Next:
    Text
    Contents
    1. Properties
    2. Example

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Check it out!

    Community Resources

    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!