Controlling Dimensions

Learn how to specify and control the dimensions of components in React Native.

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.

Get hands-on with 1200+ tech skills courses.