A component's height and width determine its size on the screen.
The simplest way to set the dimensions of a component is by adding a fixed
height to style. All dimensions in React Native are unitless, and represent density-independent pixels.
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use
flex: 1, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the
flex given, the higher the ratio of space a component will take compared to its siblings.
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed
flex, the parent will have dimensions of 0 and the
flexchildren will not be visible.
After you can control a component's size, the next step is to learn how to lay it out on the screen.
You can edit the content above on GitHub and send us a pull request!