Using Device Motion Sensors in React Native
Treat device sensors as a data stream. Instead of polling, subscribe to an observable that emits readings for acceleration or rotation. This is for building compasses, shake detection, or AR views.
Why it exists
Mobile apps often need to respond to the physical world. Hardware sensors provide raw data about a device's motion, orientation, and environment, but developers need a consistent, cross-platform API to access this data without writing separate native code for iOS and Android.
The mental model
Think of device sensors not as something you query, but as a continuous stream of events you subscribe to. A library like react-native-sensors wraps these hardware events in RxJS Observables. You subscribe to a sensor (e.g., the gyroscope) and your app receives a flow of data objects, like {x, y, z, timestamp}, whenever the device's state changes.
How it works
Sensor libraries provide a JavaScript bridge to native device APIs. When you use a sensor like accelerometer, the library sets up a listener on the native side. This listener forwards data over the React Native bridge to your JavaScript code, wrapped in an Observable. You use methods like .subscribe() to react to new data and must call .unsubscribe() in a cleanup function to stop listening and prevent resource leaks.
When to use it
Use device sensors for features directly tied to the device's physical state. Three common places this shows up: first, detecting a "shake" gesture with the Accelerometer; second, creating a 360-degree photo viewer with the Gyroscope; third, building a compass with the Magnetometer. Some libraries also expose a Barometer for estimating altitude changes.
When not to use it
Avoid using sensors for non-essential UI flair, as they constantly consume battery. Sensor accuracy and availability vary significantly between devices, so do not build core functionality that relies on a sensor that might not exist on a user's phone. Always design a fallback experience.
One canonical example
A parallax image effect. You subscribe to the gyroscope's observable. As the device tilts, the gyroscope emits rotation values. You use these values to update the transform style of an image, making it appear to move in the opposite direction of the tilt. This creates a sense of depth. Critically, the subscription must be cleaned up when the component unmounts to stop the sensor and avoid battery drain.
Interview question
When integrating device motion sensors like the accelerometer into a React Native application, what is the recommended approach for handling sensor data?
- a.Directly invoking native platform-specific sensor APIs from JavaScript.
- b.Making a single API call to retrieve a batch of recent sensor data.
- c.Subscribing to an observable that emits new sensor readings as they occur.Correct
- d.Periodically querying the sensor's current state using a timer or interval.
Why? this is the answer
The card emphasizes treating device sensors as a continuous stream of events that you subscribe to, rather than something you query. This aligns with the observable pattern where data is emitted as it becomes available, which is option C. Polling (option D) is explicitly contrasted with this recommended approach.
Just read this? Test yourself on what you have been reading.
Read the original → react-native-sensors.github.io
- #react-native
- #sensors
- #mobile
- #rxjs
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles