How To Combine Accelerometer Sensor in React Local Utility | through Sanchit | Jan, 2024

expo-sensors gives a spread of APIs that help you faucet into software sensors. Those equipment allow you to measure more than a few facets reminiscent of movement, orientation, force, magnetic fields, ambient gentle, or even monitor the collection of steps taken

Sooner than we start, remember to have a React Local undertaking arrange with Expo. Expo simplifies using software sensors just like the accelerometer.

npx expo set up expo-sensors

import React, { useState, useEffect } from 'react';
import { Textual content, View, Pressable } from 'react-native';
import { Accelerometer } from 'expo-sensors';
import { useNavigation } from '@react-navigation/local'
const SensorScreen = () => {
const navigation = useNavigation()
const [data, setData] = useState({
x: 0,
y: 0,
z: 0,
});
useEffect(() => {
Accelerometer.addListener(accelerometerData => {
setData(accelerometerData);
});
Accelerometer.setUpdateInterval(1000);
go back () => {
Accelerometer.removeAllListeners();
};
}, []);
const navigateProfile = () => {
navigation.substitute('Profile')    
}
go back (
<View taste={{ flex: 1, justifyContent: 'middle', alignItems: 'middle' }}>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C', padding: 25, fontWeight: 'daring' }}>Accelerometer:</Textual content>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C' }}>x: {information.x.toFixed(2)}</Textual content>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C' }}>y: {information.y.toFixed(2)}</Textual content>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C' }}>z: {information.z.toFixed(2)}</Textual content>
<Pressable onPress={navigateProfile}>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C', padding: 25 }}>Cross To Profile</Textual content>
</Pressable>
</View>
);
}
export default SensorScreen

Let’s perceive the code, piece through piece.

Uploading Important Modules

import React, { useState, useEffect } from 'react';
import { Textual content, View, Pressable } from 'react-native';
import { Accelerometer } from 'expo-sensors';

Right here, we import:

• React hooks (useState, useEffect) for state control and lifecycle occasions.
• UI parts from React Local (Textual content, View).
• Accelerometer from expo-sensors for gaining access to the software’s accelerometer sensor.

Developing the SensorScreen Part

const SensorScreen = () => {
const [data, setData] = useState({
x: 0,
y: 0,
z: 0,
});
...
};

On this phase:

• We outline the SensorScreen practical part.
• Initialize the state information to retailer the accelerometer information (x, y, z axis values).

Atmosphere Up the Accelerometer

useEffect(() => {
Accelerometer.addListener(accelerometerData => {
setData(accelerometerData);
});
Accelerometer.setUpdateInterval(1000);
go back () => {
Accelerometer.removeAllListeners();
};
}, []);

On this useEffect hook:

• We upload a listener to the Accelerometer, which updates information every time the sensor detects movement.
• Set the replace period to 1000 milliseconds (1 2nd) for the sensor information.
• It’s essential to take away all listeners when the part is unmounted to forestall reminiscence leaks and function problems. This cleanup guarantees the app doesn’t proceed to eat sources for an element this is now not getting used.

Exhibiting The Information

go back (
<View taste={{ flex: 1, justifyContent: 'middle', alignItems: 'middle' }}>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C', padding: 25, fontWeight: 'daring' }}>Accelerometer:</Textual content>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C' }}>x: {information.x.toFixed(2)}</Textual content>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C' }}>y: {information.y.toFixed(2)}</Textual content>
<Textual content taste={{ fontSize: 18, marginBottom: 10, colour: '#003F5C' }}>z: {information.z.toFixed(2)}</Textual content>
</View>
);

This a part of the code:

• Renders a View containing a number of Textual content parts.
• Presentations the accelerometer information (x, y, and z values) at the display screen, formatted to 2 decimal puts.

Integrating the accelerometer sensor to your React Local app is an easy procedure with Expo. This capability may end up in inventive options, like motion-based controls or job monitoring or pedometer

GitHub: https://github.com/sanchit0496/react_native_scaffolding

Apply Sanchit on LinkedIn For Extra