How to position things in React Native?

You just got started with React Native and the biggest problem seems to be a very simple thing:

Positioning

“When I align items and justify content on text inputs or view components they never actually centre and go in random places”

Starting with the View

The View component is a container that enables layout using FlexBox and is the most basic component for creating our UI. The View is essentially the div of React Native.

You can easily see where your views are being laid out if you add a border to them and make them different colours.

<View style={{flex: 1, borderWidth: 10, borderColor: 'red'}}>
   <View style={{flex: 1, borderWidth: 10, borderColor: 'green'}}>
     <View style={{flex: 1, borderWidth: 10, borderColor: 'blue'}}>
     </View>
   </View>
   <View style={{flex: 1, borderWidth: 10, borderColor: 'orange'}}></View>
 </View>

Now that we know where our views are at let’s start to position things.

Positioning basics

With React Native, we have Flexbox support, which works similarly to CSS with a few differences on the defaults.

Knowing your way around Flexbox will help a lot in positioning things easily.

Some of RN’s Flexbox’s important properties:

Flex

All container elements such as the View in React Native are Flex containers by default.

To define how the children of a container will fill over the available space along the main axis set the flex property.

The flex property of each element will be used to divide the space.

<View style={{ flex: 1}}>
   <View style={{ flex: 1 }}>A</View>
   <View style={{ flex: 2 }}>B</View>
   <View style={{ flex: 3 }}>C</View>
</View>

1+2+3 = 6

When we add them up, we get six, which indicates that view A will get one-sixth of the space, view B will get two-sixths of the space, and view C will get three-sixths of the space.

Flex direction

Defaults to column where the children of the container will be stacked on top of each other (top to bottom) on the y-axis.

<View style={{ flex: 1, flexDirection: 'column'}}>
  <View style={{ flex: 1, borderWidth: 10, borderColor: 'red'}}/>
  <View style={{ flex: 2, borderWidth: 10, borderColor: 'orange' }}/>
  <View style={{ flex: 3, borderWidth: 10, borderColor: 'green' }}/>
</View>

Changing the direction to row will arrange the children on the x-axis side by side (left to right).

<View style={{ flex: 1, flexDirection: 'row'}}>
  <View style={{ flex: 1, borderWidth: 10, borderColor: 'red'}}/>
  <View style={{ flex: 2, borderWidth: 10, borderColor: 'orange' }}/>
  <View style={{ flex: 3, borderWidth: 10, borderColor: 'green' }}/>
</View>

Justify content

To align the children within the x-axis (main axis) in the container set the justifyContent property. The default is flex-start that will align the children to the start of the containers main axis.

Here’s a quick visual on the available options:

Align items

To align the children within the y-axis (cross axis) in the container set the alignItems property. The default is stretch that will match the height of the container’s cross-axis. One thing to note is that stretch will have no effect when a width is specified on the children.

Here’s a quick visual on the available options:

Lets position things

Now let’s see how to align that text input to the centre.

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
   <TextInput
     style={{height: 40, borderWidth: 1}}
     value="Text Input"
   />
</View>

Theres alot more to flexbox check out https://flexboxfroggy.com/ practice by positioning the froggy using the flexbox algorithm..

I hope this quick guide helped you in positioning things easier in React Native.