Controlling Dimensions

The size of a component on the screen is determined by its dimensions, i.e., height and width. In React Native, all dimensions are unitless and represent density-independentComponents are displayed uniformly on all the screens, irrespective of their densities. pixels. For example, we should use height:30 to specify the component’s height, and React Native sets the pixels for us. A component’s dimensions can be defined in one of three ways:

• Fixed dimensions

• Flex dimensions

• Percentage dimensions

Let’s discuss them in detail.

Fixed dimensions

The most common technique to specify a component’s dimensions is to add a fixed width and height to the style. The illustration below summarizes the behavior of the fixed dimensions.

The code ...