React Native Audio Player

Question

Я пытаюсь реализовать для моего приложения аудиоплеер в реагировать родной. Цель этого проигрывателя - воспроизвести некоторые аудиокассеты, извлеченные из файла JSON. На данный момент мне удается сделать пользовательский интерфейс для него, но без функциональности.

Проведя небольшое исследование, я обнаружил, что мне нужен пакет Reaction-native-track-player, чтобы он работал. Однако я действительно борюсь с пониманием документации. Если бы кто-нибудь мог дать мне подсказку, было бы здорово.

Я прикреплю код для игрока:

import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  View,
  Image,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import {Slider} from 'react-native';
import Moment from 'moment';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';

import {
  faCoffee,
  faArrowCircleLeft,
  faArrowAltCircleRight,
  faAngleDoubleRight,
  faAngleDoubleLeft,
  faStar,
  faArrowCircleRight,
  faArrowRight,
  faForward,
  faPlay,
  faBackward,
} from '@fortawesome/free-solid-svg-icons';

export default class App extends React.Component<Props> {
  state = {
    trackLength: 300,
    timeElapsed: '0:00',
    timeRemaining: '5:00',
  };

  changeTime = (seconds) => {
    this.setState({timeElapsed: Moment.utc(seconds * 1000).format('m:ss')});
    this.setState({
      timeRemaining: Moment.utc(
        (this.state.trackLength - seconds) * 1000,
      ).format('m:ss'),
    });
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{alignItems: 'center'}}>
          <View style={{alignItems: 'center', marginTop: 24}}>
            <Text style={[styles.textLight, {fontSize: 12}]}>PLAYLIST</Text>
            <Text
              style={[
                styles.text,
                {fontSize: 15, fontWeight: '500', marginTop: 8},
              ]}>
              Meditation
            </Text>
          </View>

          <View style={styles.coverContainer}>
            <Image
              source={require('../../../assets/coverArt.jpg')}
              style={styles.cover}
            />
          </View>

          <View style={{alignItems: 'center', marginTop: 32}}>
            <Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
              Exhale
            </Text>
            <Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>
              Cap Mare
            </Text>
          </View>
        </View>

        <View style={{margin: 32}}>
          <Slider
            minimumValue={0}
            maximumValue={this.state.trackLength}
            trackStyle={styles.track}
            thumbStyle={styles.thumb}
            minimumTrackTintColor="#93A8B3"
            onValueChange={(seconds) => this.changeTime(seconds)}
          />
          <View
            style={{
              marginTop: -12,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            <Text style={[styles.textLight, styles.timeStamp]}>
              {this.state.timeElapsed}
            </Text>
            <Text style={[styles.textLight, styles.timeStamp]}>
              {this.state.timeRemaining}
            </Text>
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 16,
          }}>
          <TouchableOpacity>
            <FontAwesomeIcon icon={faBackward} size={32} color="#93A8B3" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.playButtonContainer}>
            <FontAwesomeIcon
              name="play"
              icon={faPlay}
              size={32}
              color="#3D425C"
            />
          </TouchableOpacity>
          <TouchableOpacity>
            <FontAwesomeIcon icon={faForward} size={32} color="#93A8B3" />
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EAEAEC',
  },
  textLight: {
    color: '#B6B7BF',
  },
  text: {
    color: '#8E97A6',
  },
  textDark: {
    color: '#3D425C',
  },
  coverContainer: {
    marginTop: 32,
    width: 250,
    height: 250,
    shadowColor: '#5D3F6A',
    shadowOffset: {height: 15},
    shadowRadius: 8,
    shadowOpacity: 0.3,
  },
  cover: {
    width: 250,
    height: 250,
    borderRadius: 125,
  },
  track: {
    height: 2,
    borderRadius: 1,
    backgroundColor: '#FFF',
  },
  thumb: {
    width: 8,
    height: 8,
    backgroundColor: '#3D425C',
  },
  timeStamp: {
    fontSize: 11,
    fontWeight: '500',
  },
  playButtonContainer: {
    backgroundColor: '#FFF',
    borderColor: 'rgba(93, 63, 106, 0.2)',
    borderWidth: 16,
    width: 128,
    height: 128,
    borderRadius: 64,
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 32,
    shadowColor: '#5D3F6A',
    shadowRadius: 30,
    shadowOpacity: 0.5,
  },
});

Любая помощь приветствуется.