How to position things in React Native?
Tags: reactnative
Published: 2021-08-06 05:37:09

---
title: How to position things in React Native?
published: true
description: Have no idea how to position elements in React Native? In this guide, we'll look at how to utilise Flexbox to quickly position things.
tags: #reactnative
cover_image: https://res.cloudinary.com/dtizt6sft/image/upload/b_auto,c_pad,h_700,w_1700/v1626776947/positioning_In_React_Native_p3ifpg.png
canonical_url: https://www.bitstoliveby.com/posts/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.

```jsx
<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>  

```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdr0sp5xco6vc29tgjvz.png)

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.

```jsx
<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.

```jsx
<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>

```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny1f9ravkeiyudba09p9.png)

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

```jsx
<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>

```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfjmft9ita4d1ewq260t.png)

### 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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skd4i5e422kev9fd3sra.png)

### 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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4053qht2e8bprt8la9dm.png)

### Lets position things

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

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

```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppfe09minxyqdyli7agv.png)

Theres alot more to flexbox check out  [https://flexboxfroggy.com/](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.