Asyncstorage in Accelerometers

How to / Third Party Tooling
1

I am new to Expo and ReactNative, so this might be really straightforward for some people. I have taken the basic accelerometer template and edited it’s view slightly. Now I am trying to get the accelerometer data to be saved and stored using asynch storage, but I have no idea how to implement this into my code, as I am finding the tutorial on expo very confusing.
My code so far is :

import React from ‘react’;
import { StyleSheet, Text, TouchableOpacity, View, Image, AsyncStorage } from ‘react-native’;
import { Accelerometer } from ‘expo-sensors’;
import ReactDataSheet from ‘react-datasheet’;

_storeData = async () => {
try {
await AsyncStorage.setItem(‘@MySuperStore:key’, ‘I like to save it.’);
} catch (error) {
// Error saving data
}
_retrieveData = async () => {
try {
const value = await AsyncStorage.getItem(‘TASKS’);
if (value !== null) {
// We have data!!
console.log(value);
}
} catch (error) {
// Error retrieving data
}
};
};
export default class AccelerometerSensor extends React.Component {
state = {
accelerometerData: {},
};

componentDidMount() {
this._toggle();
}

componentWillUnmount() {
this._unsubscribe();
}

_toggle = () => {
if (this._subscription) {
this._unsubscribe();
} else {
this._subscribe();
}
};

_slow = () => {
Accelerometer.setUpdateInterval(1000);
};

_fast = () => {
Accelerometer.setUpdateInterval(16);
};

_subscribe = () => {
this._subscription = Accelerometer.addListener(accelerometerData => {
this.setState({ accelerometerData });
});
};

_unsubscribe = () => {
this._subscription && this._subscription.remove();
this._subscription = null;
};

render() {
let { x, y, z } = this.state.accelerometerData;
return (


Accelerometer

<Image
style ={{width: 250, height: 250, backgroundColor: ‘#add8e6’, flexDirection: ‘center’, alignItems: ‘center’, justifyContent:‘center’}}
source = { require (‘./accelerometer.png’)}
/>

    <View style={styles.sensor}>
    <Text style={styles.setFontSizeTwo}> x: {round(x)} 
      </Text> 
      <Text style={styles.setFontSizeTwo}> y: {round(y)}
      </Text> 
   <Text style={styles.setFontSizeTwo}> z:{round(z)} 
      </Text>
      </View>
  
  
    <View style={styles.buttonContainer}>
      <TouchableOpacity onPress={this._toggle} style={styles.button}>
        <Text style={styles.setFontSizeTwo}>Slow</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this._toggle} style={styles.middleButton}>
        <Text style={styles.setFontSizeTwo}>Toggle</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this._fast} style={styles.button}>
        <Text style={styles.setFontSizeTwo}>Fast</Text>
      </TouchableOpacity>
    </View>
    </View>
  
 
  );

}
}

function round(n) {
if (!n) {
return 0;
}

return Math.floor(n * 100) / 100;
}

const styles = StyleSheet.create({
buttonContainer: {
flexDirection: ‘row’,
flex: 2,
alignItems: ‘stretch’,
marginTop: 10,
paddingTop: 10,
paddingBottom: 130,
},
setFontSizeOne: {
fontSize: 50,
},
setFontSizeTwo: {
fontSize: 38,
fontStyle: ‘italic’,
},
setFontSizeThree: {
fontSize: 20
},
button: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#eee’,
padding: 10,
borderColor: ‘#00316e’,
borderLeftWidth: 3,
borderRightWidth: 3,
borderTopWidth: 3,
borderBottomWidth: 3,

},
middleButton: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#eee’,
padding: 10,
borderColor: ‘#00316e’,
borderTopWidth: 3,
borderBottomWidth: 3,
},
title: {
flex: 1,
marginTop: 40,
justifyContent: ‘center’,
alignContent:‘center’,
backgroundColor: ‘#add8e6’,
paddingLeft: 10,
height: 20,
},
sensor: {
flexDirection: ‘row’,
flex: 1.5,
justifyContent: ‘space-between’,
backgroundColor: ‘#add8e6’,
paddingTop: 40,

},
sensorvalues: {
flexDirection: ‘row’,
justifyContent: ‘space-between’,
backgroundColor: ‘#122934’,

},
container: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#add8e6’,

},
});