React Native Position Absolute

Summary: in this tutorial, you will learn how to place components in the flexbox layout using relative and absolute positions.

Relative positioning

React native uses the flexbox layout to arrange the components on the screen. By default, the position property of each component is relative:

{ 
   position: 'relative'
}Code language: JavaScript (javascript)

The { position: 'relative ' } means the component is positioned relatively to its original position within the flexbox layout.

React Native allows you to use the top, right, bottom and left properties to position a component relative to its original position.

For example, the following shows a big green box and a small yellow box: