Moving Your Phone — Accelerometers in React Native
When you turn your phone sideways, the screen flips to accommodate the “landscape” perspective. This is super convenient when taking photos, or recording and watching videos. It’s a feature we’ve taken for granted on our smartphones for over a decade. Many apps also allow you to shake your phone as a shortcut for some commands, and iOS even has a “shake to undo typing” function built in.
There are more subtle motion effects as well, like “perspective zoom/motion effect” moving your phone’s wallpaper based on the angle you hold it at, and some games using the phone’s position like a controller input. Compass and map apps are able to know exactly where your phone is facing, and connect that to the larger world.
Your phone knows what angle it’s being held at, with a very high degree of accuracy. How does it do this? With a tiny but complex little chip called an Accelerometer.
An accelerometer is a device that measures… you guessed it, acceleration. Through some kind of sensors, it monitors the forces of acceleration due to gravity and motion along with their direction, and quantifies them. The motion being applied to the sensor allows the device to calculate how fast it is moving and detect vibrations. Changes in the force and direction of gravity allow the device to know which way is “down,” and make precise readings about the angle it’s being held in space.
Most modern mobile devices are equipped with Capacitative accelerometers, built using Micro-Electrical Mechanical System (MEMS) fabrication technology. These MEMS chips are tiny, cheap to make, and easy to add to devices, which is why they are the most prevalent type of accelerometer being used today.
Capacitative accelerometers consist of a sensor surrounded by tiny movable microstuctures. The sensor keeps track of the capacitance between these structures. When force is applied to the device, the microstructures move, and the electric charge and potential between them change proportionately. The sensor detects these changes in capacitance and converts them into voltages, which the device uses to determine the direction and degree of force being applied.
Keeping track of the movement and position of the phone is a big part of modern phone operating systems, and these values are designed to be easily accessible to native applications. iOS’s “CMMotionManager” and Android’s “Sensor Service” classes provide powerful APIs for working with incredibly precise motion data.
If you’re building mobile apps using React Native, there is no built in way to access this info, so you would have to build out separate native code with these APIs based on the user’s phone OS, which is quite time consuming and annoying.
Luckily, the folks over at Expo working to create wonderful streamlined managed universal workflows have created a tool that you can use with both Andriod and iOs — Expo Sensor. You don’t even need to be working with expo specifically, you can just require it as a dependency in whatever react native workflow you may already be using!
Expo-sensor takes the various environmental sensors common to modern smartphones, and turns them into one easy to use universal API for your react native app to work with all phones’ sensors right out of the box.
Expo-sensor’s Accelerometer lets you read data from the user’s device accelerometer. You just import { Accelerometer } from 'expo-sensors'; and read the data with a Accelerometer.addListener(). You provide the addListener with a callback function, and it is provided an object as an argument, containing x, y, and z values that measure the current acceleration along the respective axis. The listener actually returns a subscription to all continuous updates recorded on the accelerometer, and a built in .remove() method to use when it’s time to unsubscribe.With these motion recordings, your app can react to any movement you want!
Here’s a snippet I edited from the documentation showing a basic use case for setting up the Accelerometer:
It just sets up a subscription to the Accelerometer listener and sets the resulting readings to a state variable, then prints them out to the user. Simply printing out the numbers isn’t particularly useful, but I’m sure you can see how easy it is to get detailed readings here and use them for more elaborate purposes.
Hopefully this post shed some light on how your phone can detect its motion, and how you can use that info as a developer to add some really cool features to your apps!
https://developer.android.com/guide/topics/sensors/sensors_overview
