I am creating an app that uses the deviceMotion.rotation method. After a few days of debugging, I have traced the issue to call to the deviceMotion.addlListener call which appears to returning “undefined” when I attempt to access it’s data (alpha, beta, gamma) through the useState function. The actual error is:
“TypeError: Cannot read property ‘alpha’ of undefined” in the terminal
or
“Render Error Cannot read property ‘alpha’ of undefined” in the emulator.
I created the minimized version (code below) of what I am doing based on Expo documentation template for other device sensors (there’s no examples provided for deviceMotion which itself is another issue).
This code works appropriately in the following conditions:
npx expo start - then pressing “a” to send it to my android emulator
All IOS builds work correctly including Expo and EAS builds
This code gets the error and crashes in the following conditions:
Local Builds:
expo run:android
npx expo export
EAS Build:
eas build -p android --profile preview
eas build --platform android
I am at a loss as to why in the EAS build the deviceMotion is returning “undefined.” I am fairly new to React-Native and Expo, so this is about as far as I can go now. I have read the documentation and run through a new project setup from scratch a few times.
In your post, please share:
managed workflow
- Your
eas-cliversion 9.6.3 - What you have tried so far
npx expo install --check
App.js>>>
import React, { useState, useEffect } from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
import { DeviceMotion } from ‘expo-sensors’;
export default function App() {
const [{ alpha, beta, gamma }, setData] = useState({
“alpha”: 0,
“beta”: 0,
“gamma”: 0
});
const _slow = () => DeviceMotion.setUpdateInterval(1000);
const _subscribe = () => {
DeviceMotion.addListener(({rotation}) => {
setData(rotation);
});
_slow();
};
const _unsubscribe = () => {
DeviceMotion.removeAllListeners();
};
useEffect(() => {
_subscribe();
return () => _unsubscribe();
}, );
return (
DeviceMotion Test:
A: {alpha}
B: {beta}
g: {gamma}
Placehold for Button
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
paddingHorizontal: 10,
},
text: {
textAlign: ‘center’,
},
buttonContainer: {
flexDirection: ‘row’,
alignItems: ‘stretch’,
marginTop: 15,
},
button: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#eee’,
padding: 10,
},
middleButton: {
borderLeftWidth: 1,
borderRightWidth: 1,
borderColor: ‘#ccc’,
},
});