Expo-Sensors - Subscribing to 2 different sensors only showing one dataset at a time

Expo SDK
1
  1. SDK Version: 40 (I’m pretty sure. Only downloaded it yesterday but don’t know how to check)
  2. Platforms(Android/iOS):

Hi All,

I am very new to programming and expo but I am just tinkering with an idea and learning along the way.

I am trying to show accelerometer and barometer data on the screen at the same time and I have been able to do it but it will only show either the accelerometer or barometer data one at a time and flicks between 0 and the real figures.

I haven’t been able to find anything in my google searches about subscriptions and as I said I’m very new so I probably don’t know the right terms to search for.

Here is my full app.js code

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Platform } from 'react-native';
import {
  Accelerometer,
  Barometer,
} from 'expo-sensors';
import * as Location from 'expo-location';

export default function App() {
  const [data, setData] = useState({
    x: 0,
    y: 0,
    z: 0,
    pressure: 1013,
  }, );
  const [subscription, setSubscription] = useState(null);

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

  const _fast = () => {
    Accelerometer.setUpdateInterval(100);
    Barometer.setUpdateInterval(100);
  };

  const _subscribe = () => {
    setSubscription(
      Accelerometer.addListener(accelerometerData => {
        setData(accelerometerData)
      }),
      Barometer.addListener(barometerData => {
        setData(barometerData)
      })
    );
  };

  const _unsubscribe = () => {
    subscription && subscription.remove();
    setSubscription(null);
  };

  useEffect(() => {
    _subscribe();
    return () => _unsubscribe();
  }, []);

  const { x, y, z, pressure } = data;
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Accelerometer: (in Gs where 1 G = 9.81 m s^-2)</Text>
      <Text style={styles.text}></Text>
      <Text style={styles.text}>
        x: {round(x)} y: {round(y)} z: {round(z)}
      </Text>
      <Text style={styles.text}></Text>
      <Text style={styles.text2}>
        G's = {round(Math.sqrt(x * x + y * y + z * z))}
      </Text>
      <Text style={styles.text}>Barometer</Text>
      <Text style={styles.text}>{round(pressure)}hPa</Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={subscription ? _unsubscribe : _subscribe} style={styles.button}>
          <Text>{subscription ? 'On' : 'Off'}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_slow} style={[styles.button, styles.middleButton]}>
          <Text>Slow</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={_fast} style={styles.button}>
          <Text>Fast</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

function round(n) {
  if (!n) {
    return 0;
  }
  return Math.floor(n * 100) / 100;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  text: {
    textAlign: 'center',
  },
  text2: {
    textAlign: 'left',
    fontSize: 60,
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 30,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },



});

I created that by trying to join together https://docs.expo.io/versions/v40.0.0/sdk/accelerometer/ and https://docs.expo.io/versions/v40.0.0/sdk/barometer/ and in the future I want to add GPS to it and graphs

Thanks!

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.