How to position things in React Native?

Quintin Orsmond — Fri, 06 Aug 2021 05:37:09 +0000

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.

A awesome integrated continuous testing tool

Quintin Orsmond — Fri, 17 Jul 2020 21:42:45 +0000

Using tests to stamp out my ideas into functional code has worked well for me. Sometimes I use TDD (Test Driven Development) sometimes I take more of a BDD (Behaviour Driven Development) approach.

I am not going into much detail on test driven development here, there are already great resources for that online. To quickly summarise, TDD is a software development practice where you write a test/behaviour before the code that will make them pass. Once the test passes you clean up the code and start with the next test. Also known as the Red Green Refactor cycle.

To be honest, I used to think TDD was just a good idea in theory, but never had enough time to really use it on my work projects as there were always pressures of deadlines and tight budgets. I slowly began to use TDD on my side projects using tools that continuously watched my test and ran them in the terminal watching for test failures. Then I discovered Wallaby.js, a tool that allowed me to see my test fail in real time.

I use Visual Studio Code as my editor with the Wallaby extension installed. Real time in-line test feedback is shown directly in the IDE.

What I also find very useful is the instant feedback on any console logs to inspect the object right there in the editor.

When opening the code being tested, you can quickly see the affected lines that have failed tests.

This tool has made writing my test so easy and fun and I honestly can not think of working without it.

I don't normally spend money on dev tools. But this is one purchase that's not too hard to justify when you discover how productive you can work with it. They do have a free trial that you can use to kick the tires.

After digging around I found a similar tool for the .net world called NCrunch.

I'm hoping to see more of these type of tooling in the future which can ultimately make testing a first-class citizen in the IDE.

DEV Community: Quintin Orsmond