Как обнаружить покадровую анимацию в React-Native

Question

Я пытаюсь создать небольшое приложение в React Native, которое делает следующее:

1. Воспроизведение звука при встряхивании телефона;
2. Прекращает звук, когда телефон перестает трястись.

В настоящее время у меня есть следующий код, который обрабатывает событие встряхивания:

Импорт:

      import * as React from 'react';
import {Text, View, Image, Dimensions} from 'react-native';
import {Grid, Col, Row} from 'react-native-easy-grid';
import Sound from 'react-native-sound';
import {accelerometer} from 'react-native-sensors';
import {map, filter} from 'rxjs/operators';

Я использую компонент класса, который содержит следующие методы:

        constructor(props) {
    super(props);

    Sound.setCategory('Playback');

    this.mnezo = new Sound('mnezo.mp3', Sound.MAIN_BUNDLE, err => {
      if (err) {
        console.log('Failed to load sound.', err);
        return;
      }

      console.log('sound duration:' + this.mnezo.getDuration());
    });

    this.state = {
      accelerometerData: {},
      isPlaying: false,
    };
  }

  componentDidMount() {
    this.__subscribe();
  }
  componentWillUnmount() {
    this.__unsubscribe();
  }

  __subscribe = () => {
    const SHAKE_THRESHOLD = 26;
    const MIN_TIME_BETWEEN_SHAKES_MILLISECS = 1000;
    this.lastShakeTime = 0;

    this.accelerometerSubscription = accelerometer
      .pipe(
        map(
          ({x, y, z}) =>
            Math.sqrt(
              Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2),
            ) /* - SensorManager.GRAVITY_EARTH */,
        ),
        filter(acceleration => acceleration > SHAKE_THRESHOLD),
      )
      .subscribe(acceleration => {
        const curTime = new Date().getTime();

        console.log(acceleration < 30);

        if (acceleration < 30) {
          this.mnezo.stop();
          this.setState({isPlaying: false});
        }

        if (acceleration > 30) {
          if (!this.state.isPlaying) {
            this.mnezo.play(success => {
              if (success) {
                console.log('palying.');
              } else {
                console.log('play failed.');
              }
            });
          }

          this.setState({isPlaying: true});
        }

        if (curTime - this.lastShakeTime > MIN_TIME_BETWEEN_SHAKES_MILLISECS) {
          this.lastShakeTime = curTime;
          console.log('Shaken device! acceleration: ', acceleration);
        }
      });
  };

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

Я пытаюсь определить, превышает ли ускорение значения, чтобы запустить и остановить звук. Однако при изменении направления встряхивания (скажем, с восходящего на нисходящее) значение ускорения резко падает, и звук прекращается почти сразу после начала воспроизведения.

Любое предложение, как решить эту проблему? Правильно ли я решаю эту проблему или мне следует искать другие альтернативы?

Я также пробовал реагировать на родное встряхивание и реагировать на родное встряхивание, но мне не удалось остановить звук.

Я также должен упомянуть, что я только начинаю изучать React Native.