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

Follow these step-by-step instructions to create (and improve upon) your own version of an accelerometer-based racing game with React Native Expo.

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!

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

Developer? Try out the Crowdbotics App Builder to quickly scaffold and deploy apps with a variety of popular frameworks.

Busy or non-technical? Join hundreds of happy teams building software with Crowdbotics PMs and expert developers. Scope timeline and cost with Crowdbotics Managed App Development for free.