How To Make A Simple ‘Accelerometer’-Based Driving Game with React Native Expo

By Mohammad Kashif Sulaiman

When I discovered React Native Expo’s feature ‘Accelerometer’, I thought it would be fun to develop a racing game using this functionality.

As Bill Gates said: “I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.”

I choose the easiest way to do this job :)

You can follow the step-by-step instructions below to create (and improve upon) your own version of an accelerometer-based racing game with React Native Expo.

Building with React Native? Scaffold and deploy React Native apps with quality-assured templates for free in the Crowdbotics app builder. Check it out.

First, find a GIF of a running road for the background like this:

The next thing you need is a fast and beautiful car image like this:

With those two images, you are fully loaded with all the visual assets you need to develop a driving game app.

Let’s start some coding:

Begin by placing the road GIF image on your screen:

<Image source={require(“./assets/road.gif”)} style={{width: responsiveWidth, height: responsiveHeight * 0.3}}/>

Now place your car on road:

<Image source={require(“./assets/car.png”)} style={{width: 70, height: 50}}/>

Now, all you need to do is to move our car on road. For this, you will import Accelerometer from Expo:

import { Accelerometer} from ‘expo’

Add a listener to Accelerometer in your ‘componentDidMount’ hook like this:

componentDidMount() {
Accelerometer.addListener(item => {this.setState(
{movement: item.x *-100})
})
}

Here, in item.x, on tilting device right, the values goes up-to -0.9.
On tilting device left, values goes up-to 0.9. When your device is straight value will be zero.

By default, the value of ‘item.x’ is positive in points. I multiplied it by ‘-1’ to make it negative because we are going to use position: ‘absolute’ and “left” property in the style which will move our object right on positive value and moves left on the negative value. To solve the points issue, we make it a large number that moves our object, so let’s multiply by ‘100’
(-1*100 = -100).

Now you can set the position of your car according to the movement. Do this by giving style prop to the Image component:

<Image source={require(“./assets/car.png”)}
style={{width: 70, height: 50, flex: 1, position: ‘absolute’,
left: this.state.movement}}
/>

That’s all you need! You’re off and racing.

Take this code for a test drive and show me what you’ve built in the comments.

Thanks for reading!

Crowdbotics helps business build cool things with React and React Native (among other things). If you have project where you need additional developer resources, Crowbotics can help you estimate build time for given project, and provide specialized React amd React Native developers as you need them.

Also, try out the Crowdbotics application builder to instantly scaffold and deploy a node app.