react-native-track-player | fully fledged audio module created for music apps | Audio Utils library

Could not determine the dependencies of task ':app:mergeDebugAssets'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
   > Could not resolve com.facebook.react:react-native:+.
     Required by:
         project :app
         project :app > project :react-native-fs
         project :app > project :react-native-community_async-storage
         project :app > project :react-native-community_datetimepicker
         project :app > project :react-native-community_slider
         project :app > project :react-native-firebase_analytics
         project :app > project :react-native-firebase_app
         project :app > project :react-native-firebase_storage
         project :app > project :react-native-audio
         project :app > project :react-native-document-picker
         project :app > project :react-native-file-selector
         project :app > project :react-native-get-random-values
         project :app > project :react-native-image-crop-picker
         project :app > project :react-native-navigation
         project :app > project :react-native-scan-barcode
         project :app > project :react-native-track-player
         project :app > project :react-native-vector-icons
         project :app > project :react-native-video
      > Failed to list versions for com.facebook.react:react-native.
         > Unable to load Maven meta-data from http://dl.bintray.com/lukaville/maven/com/facebook/react/react-native/maven-metadata.xml.
            > Could not get resource 'http://dl.bintray.com/lukaville/maven/com/facebook/react/react-native/maven-metadata.xml'.
               > Could not GET 'http://dl.bintray.com/lukaville/maven/com/facebook/react/react-native/maven-metadata.xml'. Received status code 502 from server: Bad Gateway

buildscript {
    ext {
        RNNKotlinVersion = "1.3.61"
        buildToolsVersion = "28.0.3"
        minSdkVersion = 19
        compileSdkVersion = 28
        targetSdkVersion = 28
        RNNKotlinStdlib = "kotlin-stdlib-jdk8"
    }
    repositories {
        google()
        jcenter()
        mavenLocal()
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
        classpath("com.android.tools.build:gradle:3.5.2")
        classpath 'com.google.gms:google-services:4.3.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

ERROR  TypeError: null is not an object (evaluating 'TrackPlayer.RATING_HEART')
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

07-23 09:41:24.052 24644 24644 E AndroidRuntime: FATAL EXCEPTION: main
07-23 09:41:24.052 24644 24644 E AndroidRuntime: Process: com.myapp, PID: 24644
07-23 09:41:24.052 24644 24644 E AndroidRuntime: java.lang.NoSuchMethodError: No virtual method setAudioAttributes(Lcom/google/android/exoplayer2/audio/AudioAttributes;)V in class Lcom/google/android/exoplayer2/SimpleExoPlayer; or its super classes (declaration of 'com.google.android.exoplayer2.SimpleExoPlayer' appears in /data/app/~~JZaWLKING3kOoM2Xhy3b8g==/com.myapp-ZiTzxTcb_NCKba7M-tUmIw==/base.apk!classes2.dex)

dependencies {
    implementation('com.google.android.exoplayer:exoplayer:2.13.2') {
        exclude group: 'com.android.support'
    }
}

def safeExtGet(prop, fallback) {
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
}

dependencies {
    def exoPlayerVersion = safeExtGet("exoPlayerVersion", '2.11.4')
    implementation "com.google.android.exoplayer:exoplayer-core:${exoPlayerVersion}"
}

import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import TrackPlayer from "react-native-track-player";

import Player from "../components/Player";
import playlistData from "../data/playlist.json";
import localTrack from "../resources/pure.m4a";

export default function LandingScreen() {
  const playbackState = TrackPlayer.usePlaybackState();

  useEffect(() => {
    TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
      stopWithApp: false,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
        TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
        TrackPlayer.CAPABILITY_STOP
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ]
    });
  }, []);

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add(playlistData);
      await TrackPlayer.add({
        id: "local-track",
        url: localTrack,
        title: "Pure (Demo)",
        artist: "David Chavez",
        artwork: "https://picsum.photos/200"
      });
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

  return (
    
      
        We'll be inserting a playlist into the library loaded from
        `playlist.json`. We'll also be using the `ProgressComponent` which
        allows us to track playback time.
      
      
      {getStateName(playbackState)}
    
  );
}

LandingScreen.navigationOptions = {
  title: "Playlist Example"
};

function getStateName(state) {
  switch (state) {
    case TrackPlayer.STATE_NONE:
      return "None";
    case TrackPlayer.STATE_PLAYING:
      return "Playing";
    case TrackPlayer.STATE_PAUSED:
      return "Paused";
    case TrackPlayer.STATE_STOPPED:
      return "Stopped";
    case TrackPlayer.STATE_BUFFERING:
      return "Buffering";
  }
}

async function skipToNext() {
  try {
    await TrackPlayer.skipToNext();
  } catch (_) {}
}

async function skipToPrevious() {
  try {
    await TrackPlayer.skipToPrevious();
  } catch (_) {}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  description: {
    width: "80%",
    marginTop: 20,
    textAlign: "center"
  },
  player: {
    marginTop: 40
  },
  state: {
    marginTop: 20
  }
});

import React, { Component, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Player from './Player'
import TrackPlayer from 'react-native-track-player';

// const playbackState = TrackPlayer.usePlaybackState();  // I don't know how to manage this.

export default class MusicPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      full: true,
      clicked: '',
    };
  }

  componentWillMount() {
    TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions({
      stopWithApp: false,
      capabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE,
        TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
        TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
        TrackPlayer.CAPABILITY_STOP
      ],
      compactCapabilities: [
        TrackPlayer.CAPABILITY_PLAY,
        TrackPlayer.CAPABILITY_PAUSE
      ]
    });
  }

  async togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add(playlistData);
      await TrackPlayer.add({
        id: "local-track",
        url: 'http://192.168.22.27:8000/' + this.props.navigation.getParam('clickedSource'),
        title: "Pure (Demo)",
        artist: "David Chavez",
        artwork: "https://picsum.photos/200"
      });
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

  async skipToNext() {
    try {
      await TrackPlayer.skipToNext();
    } catch (_) { }
  }

  async skipToPrevious() {
    try {
      await TrackPlayer.skipToPrevious();
    } catch (_) { }
  }

  render() {
    return (
      
        this.skipToNext()}
          style={styles.player}
          onPrevious={()=>this.skipToPrevious()}
          onTogglePlayback={()=>this.togglePlayback()}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  player: {
    marginTop: 40
  },
});