A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
You will normally use a combination of
justifyContent to achieve the right layout.
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with
row, and the
flexparameter only supporting a single number.
flexDirection to a component's
style determines the primary axis of its layout. Should the children be organized horizontally (
row) or vertically (
column)? The default is
justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are
alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is
row, then the secondary is
column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are
stretchto have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting
alignItems: stretchdoes nothing until the
width: 50is removed from the children.
We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.
We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to learn how to handle text input with the TextInput component.
You can edit the content above on GitHub and send us a pull request!