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

 by   DoubleSymmetry Java Version: v2.0.1 License: Apache-2.0

kandi X-RAY | react-native-track-player Summary

react-native-track-player is a Java library typically used in Audio, Audio Utils applications. react-native-track-player has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. However react-native-track-player build file is not available. You can download it from GitHub.
A fully fledged audio module created for music apps. Provides audio playback, external media controls, chromecast support, background mode and more!
    Support
      Quality
        Security
          License
            Reuse
            Support
              Quality
                Security
                  License
                    Reuse

                      kandi-support Support

                        summary
                        react-native-track-player has a medium active ecosystem.
                        summary
                        It has 2272 star(s) with 748 fork(s). There are 49 watchers for this library.
                        summary
                        It had no major release in the last 12 months.
                        summary
                        There are 72 open issues and 1061 have been closed. On average issues are closed in 149 days. There are 26 open pull requests and 0 closed requests.
                        summary
                        It has a neutral sentiment in the developer community.
                        summary
                        The latest version of react-native-track-player is v2.0.1
                        This Library - Support
                          Best in #Audio Utils
                            Average in #Audio Utils
                            This Library - Support
                              Best in #Audio Utils
                                Average in #Audio Utils

                                  kandi-Quality Quality

                                    summary
                                    react-native-track-player has 0 bugs and 0 code smells.
                                    This Library - Quality
                                      Best in #Audio Utils
                                        Average in #Audio Utils
                                        This Library - Quality
                                          Best in #Audio Utils
                                            Average in #Audio Utils

                                              kandi-Security Security

                                                summary
                                                react-native-track-player has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
                                                summary
                                                react-native-track-player code analysis shows 0 unresolved vulnerabilities.
                                                summary
                                                There are 0 security hotspots that need review.
                                                This Library - Security
                                                  Best in #Audio Utils
                                                    Average in #Audio Utils
                                                    This Library - Security
                                                      Best in #Audio Utils
                                                        Average in #Audio Utils

                                                          kandi-License License

                                                            summary
                                                            react-native-track-player is licensed under the Apache-2.0 License. This license is Permissive.
                                                            summary
                                                            Permissive licenses have the least restrictions, and you can use them in most projects.
                                                            This Library - License
                                                              Best in #Audio Utils
                                                                Average in #Audio Utils
                                                                This Library - License
                                                                  Best in #Audio Utils
                                                                    Average in #Audio Utils

                                                                      kandi-Reuse Reuse

                                                                        summary
                                                                        react-native-track-player releases are available to install and integrate.
                                                                        summary
                                                                        react-native-track-player has no build file. You will be need to create the build yourself to build the component from source.
                                                                        summary
                                                                        Installation instructions are not available. Examples and code snippets are available.
                                                                        summary
                                                                        It has 2357 lines of code, 213 functions and 35 files.
                                                                        summary
                                                                        It has high code complexity. Code complexity directly impacts maintainability of the code.
                                                                        This Library - Reuse
                                                                          Best in #Audio Utils
                                                                            Average in #Audio Utils
                                                                            This Library - Reuse
                                                                              Best in #Audio Utils
                                                                                Average in #Audio Utils
                                                                                  Top functions reviewed by kandi - BETA
                                                                                  kandi has reviewed react-native-track-player and discovered the below as its top functions. This is intended to give you an instant insight into react-native-track-player implemented functionality, and help decide if they suit your requirements.
                                                                                  • Creates a media source .
                                                                                    • Updates the playback state .
                                                                                      • Returns the default capabilities .
                                                                                        • Get a Uri from a resource .
                                                                                          • Handle ID3 data .
                                                                                            • Called when audio focus has changed .
                                                                                              • Remove a single media source .
                                                                                                • Called when a position is discontinuous .
                                                                                                  • Starts the service .
                                                                                                    • Initialize Flipper
                                                                                                      Get all kandi verified functions for this library.
                                                                                                      Get all kandi verified functions for this library.

                                                                                                      react-native-track-player Key Features

                                                                                                      Lightweight - Optimized to use the least amount of resources according to your needs
                                                                                                      Feels native - As everything is built together, it follows the same design principles as real music apps do
                                                                                                      Multi-platform - Supports Android, iOS and Windows
                                                                                                      Media Controls support - Provides events for controlling the app from a Bluetooth device, the lock screen, a notification, a smartwatch or even a car
                                                                                                      Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
                                                                                                      Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
                                                                                                      Caching support - Cache media files to play them again without an internet connection
                                                                                                      Background support - Keep playing audio even after the app is in background
                                                                                                      Fully Customizable - Even the notification icons are customizable!
                                                                                                      Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them

                                                                                                      react-native-track-player Examples and Code Snippets

                                                                                                      No Code Snippets are available at this moment for react-native-track-player.
                                                                                                      Community Discussions

                                                                                                      Trending Discussions on react-native-track-player

                                                                                                      How to customize React native track player notification bar
                                                                                                      chevron right
                                                                                                      React native buld failed with the following message Failed to list versions for com.facebook.react:react-native
                                                                                                      chevron right
                                                                                                      TypeError: null is not an object (evaluating 'TrackPlayer.RATING_HEART') && Module AppRegistry is not a registered callable module
                                                                                                      chevron right
                                                                                                      Is it possible to have two different versions of a same library coexist?
                                                                                                      chevron right
                                                                                                      How to convert functional component into class component?
                                                                                                      chevron right

                                                                                                      QUESTION

                                                                                                      How to customize React native track player notification bar
                                                                                                      Asked 2022-Feb-11 at 12:38

                                                                                                      I am using react-native-track-player to create a music app. Can I customize the notification area, and lock screen player?

                                                                                                      What I need to do is changing the background color and add custom theming to the notification area and lock screen play options. Can someone please let me know how to do it please?

                                                                                                      Following is the code I have used to enable track player options. How can I modified it to do above tasks? Or is there any other method to perform customization. Thank you so much.

                                                                                                      const setUpTrackPlayer = async () => {
                                                                                                        try {
                                                                                                          await TrackPlayer.setupPlayer();
                                                                                                          await TrackPlayer.add(audioClipsArray); 
                                                                                                          await TrackPlayer.updateOptions({
                                                                                                            stopWithApp: true, 
                                                                                                            capabilities: [
                                                                                                              Capability.Play,
                                                                                                              Capability.Pause,
                                                                                                              Capability.SkipToNext,
                                                                                                              Capability.SkipToPrevious,
                                                                                                              Capability.Stop,
                                                                                                            ],
                                                                                                            compactCapabilities: [
                                                                                                              Capability.Play,
                                                                                                              Capability.Pause,
                                                                                                              Capability.SkipToNext,
                                                                                                              Capability.SkipToPrevious,
                                                                                                            ],
                                                                                                            notificationCapabilities: [
                                                                                                              Capability.Play,
                                                                                                              Capability.Pause,
                                                                                                              Capability.SkipToNext,
                                                                                                              Capability.SkipToPrevious,
                                                                                                            ],
                                                                                                          });
                                                                                                        } catch (e) {
                                                                                                          console.log(e);
                                                                                                        }
                                                                                                      };

                                                                                                      ANSWER

                                                                                                      Answered 2022-Feb-09 at 21:26

                                                                                                      You cannot do it from javascript at least for now, because this module is not providing any methods to customize that. To do that you need to change native files in order to get make it customized. You can also take a look at https://github.com/invertase/notifee and see if you can make it work together with track player.

                                                                                                      Source https://stackoverflow.com/questions/71050984

                                                                                                      QUESTION

                                                                                                      React native buld failed with the following message Failed to list versions for com.facebook.react:react-native
                                                                                                      Asked 2022-Jan-16 at 14:55

                                                                                                      I am using ReactNative version 0.62.2 and when i try to run the application using the command

                                                                                                      react-native run-android the build gets failed with the following error message

                                                                                                      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
                                                                                                      

                                                                                                      Not sure why it fails now because earlier it builds properly

                                                                                                      Build.gradle

                                                                                                      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
                                                                                                          }
                                                                                                      }
                                                                                                      

                                                                                                      ANSWER

                                                                                                      Answered 2021-Dec-26 at 08:42

                                                                                                      Bintray service is down and the only way to fix this is to migrate to React Native 0.65, where this repo is no longer used.

                                                                                                      Source https://stackoverflow.com/questions/70452454

                                                                                                      QUESTION

                                                                                                      TypeError: null is not an object (evaluating 'TrackPlayer.RATING_HEART') && Module AppRegistry is not a registered callable module
                                                                                                      Asked 2021-Sep-17 at 10:13

                                                                                                      For the past 1.5 days or so, I tried to get react-native-track-player working and I just can't make it happen. No matter what I try I always end up running into the same error block:

                                                                                                      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.
                                                                                                      

                                                                                                      I set it up both with react-native expo and 'normal' react-native (according to react-native docu) both with JS and TS. And for all variants of that I tried:

                                                                                                      • Deleting/reinstalling node-modules
                                                                                                      • npm cache verify (as described here),react-native start --reset-cache (from here) and some other cache reset/deletion things.
                                                                                                      • I've copied the example from their GitHub repo.
                                                                                                      • I updated and/or reinstalled pretty much every library (incl. node)

                                                                                                      All of those efforts ended in the exact same error.

                                                                                                      So ye, I literally don't know what to do anymore. I'm a beginner at both react-native and app dev in general. So to be honest, it's very likely the mistake I'm making is super stupid/simple. But I just can't find it. I would be more than grateful for any advise.

                                                                                                      EDIT - Dependency error: 

                                                                                                      EDIT 2: Solution - react-native removed jcenter between v0.64 v0.65 which was root of all my problems, check my answer below for details.

                                                                                                      ANSWER

                                                                                                      Answered 2021-Sep-12 at 12:05

                                                                                                      Unfortunately by Looking the Documentation of react-native-track-player , This package doesn't support expo Expo and Expokit support

                                                                                                      How I manage to run the Example Project from Package Steps:
                                                                                                      • Cloned react-native-track-player

                                                                                                      • Separate out the example project from package

                                                                                                      • Remove postinstall from package.json's scripts

                                                                                                      • add package in dependencies "react-native-track-player": "^2.0.1",

                                                                                                      • yarn install or npm install

                                                                                                      • yarn android or npm run android

                                                                                                      Result

                                                                                                      Source https://stackoverflow.com/questions/69150457

                                                                                                      QUESTION

                                                                                                      Is it possible to have two different versions of a same library coexist?
                                                                                                      Asked 2021-Jul-23 at 09:19

                                                                                                      I'm developing a react-native application which plays both audio and video files. So I'm using two javascript dependencies: react-native-track-player and react-native-video.

                                                                                                      Individually, they work fine. Together though...

                                                                                                      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)
                                                                                                      

                                                                                                      After some research, it seems to come from a version mismatch, as they both rely on exoplayer.

                                                                                                      • react-native-video:
                                                                                                      dependencies {
                                                                                                          implementation('com.google.android.exoplayer:exoplayer:2.13.2') {
                                                                                                              exclude group: 'com.android.support'
                                                                                                          }
                                                                                                      }
                                                                                                      
                                                                                                      • react-native-track-player:
                                                                                                      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}"
                                                                                                      }
                                                                                                      

                                                                                                      react-native-track-player seems to fall back to 2.11.4: if I hard-code the version number instead of calling safeExtGet, I can observe the same crash.

                                                                                                      The weird thing is that there are no errors (or warnings!) at build time. When looking at the react-native-track-player android code using Android Studio, setAudioAttributes is a valid method (at least no errors are reported by the IDE).

                                                                                                      My questions are:

                                                                                                      1. Is it possible to have two different versions of a same library coexist, and have the Java code being properly linked to whichever version is used in the library? (in this case: exoplayer)
                                                                                                      2. If it is possible, could the behavior I'm observing come from some settings in these projects' build.gradle files?
                                                                                                      3. If it's not possible, what's the default behavior? "Keep the higher version silently"?

                                                                                                      Thanks in advance.

                                                                                                      ANSWER

                                                                                                      Answered 2021-Jul-23 at 09:19

                                                                                                      After discussing the issue with some people, it appears that it's impossible to have two different versions of a same library. It seems to be a limitation of the JVM, with Maven, Gradle, and Sbt all having different behaviors when confronted with the issue.

                                                                                                      What most surprises me is that Gradle silently override the lower-version dependency with the higher one without notifying me, which results in a different runtime API, and thus crashes.

                                                                                                      I fixed the issue by bumping my react-native-track-player exoplayer dependency version to 2.13.2, and just had to do minor changes in the source code.

                                                                                                      Source https://stackoverflow.com/questions/68496246

                                                                                                      QUESTION

                                                                                                      How to convert functional component into class component?
                                                                                                      Asked 2020-Apr-22 at 07:41

                                                                                                      This is the functional component sample that I want to use.

                                                                                                      (https://github.com/react-native-kit/react-native-track-player/blob/dev/example/react/screens/PlaylistScreen.js)

                                                                                                      How to convert this into class component?

                                                                                                      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
                                                                                                        }
                                                                                                      });
                                                                                                      

                                                                                                      I tried as following. But it gives me error.

                                                                                                      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
                                                                                                        },
                                                                                                      });
                                                                                                      

                                                                                                      How can I convert this into class component?

                                                                                                      ANSWER

                                                                                                      Answered 2020-Apr-22 at 07:41

                                                                                                      usePlaybackState is a react hook, but it appears there exists a getState function that returns a promise. You don't want to store this state object as it likely will become stale very fast, so no need to use this.playbackState at all. You'll just need to await it each time you need to access the current player state.

                                                                                                      const playbackState = await TrackPlayer.getState(); // <-- get player state
                                                                                                      if (playbackState === TrackPlayer.STATE_PAUSED) {
                                                                                                        await TrackPlayer.play();
                                                                                                      } else {
                                                                                                        await TrackPlayer.pause();
                                                                                                      }
                                                                                                      

                                                                                                      Full code

                                                                                                      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';
                                                                                                      
                                                                                                      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 {
                                                                                                            const playbackState = await TrackPlayer.getState(); // <-- get player state
                                                                                                            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()}
                                                                                                              />
                                                                                                            
                                                                                                          );
                                                                                                        }
                                                                                                      }
                                                                                                      

                                                                                                      Source https://stackoverflow.com/questions/61359365

                                                                                                      Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                                                                                                      Vulnerabilities

                                                                                                      No vulnerabilities reported

                                                                                                      Install react-native-track-player

                                                                                                      You can download it from GitHub.
                                                                                                      You can use react-native-track-player like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the react-native-track-player component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .

                                                                                                      Support

                                                                                                      You can find us as part of the React Native Folks Discord in the #react-native-track-player channel.
                                                                                                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                                      Find more libraries
                                                                                                      Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                                      Save this library and start creating your kit
                                                                                                      CLONE
                                                                                                    • HTTPS

                                                                                                      https://github.com/DoubleSymmetry/react-native-track-player.git

                                                                                                    • CLI

                                                                                                      gh repo clone DoubleSymmetry/react-native-track-player

                                                                                                    • sshUrl

                                                                                                      git@github.com:DoubleSymmetry/react-native-track-player.git

                                                                                                    • Share this Page

                                                                                                      share link

                                                                                                      Explore Related Topics

                                                                                                      Reuse Pre-built Kits with react-native-track-player

                                                                                                      Consider Popular Audio Utils Libraries

                                                                                                      howler.js

                                                                                                      by goldfire

                                                                                                      fingerprintjs

                                                                                                      by fingerprintjs

                                                                                                      Tone.js

                                                                                                      by Tonejs

                                                                                                      AudioKit

                                                                                                      by AudioKit

                                                                                                      sonic-pi

                                                                                                      by sonic-pi-net

                                                                                                      Try Top Libraries by DoubleSymmetry

                                                                                                      cocoapods-patch

                                                                                                      by DoubleSymmetryRuby

                                                                                                      XNavigation

                                                                                                      by DoubleSymmetrySwift

                                                                                                      lynx

                                                                                                      by DoubleSymmetryKotlin

                                                                                                      KotlinAudio

                                                                                                      by DoubleSymmetryKotlin

                                                                                                      ReaktivePager

                                                                                                      by DoubleSymmetryKotlin

                                                                                                      Compare Audio Utils Libraries with Highest Support

                                                                                                      MuseScore

                                                                                                      by musescore

                                                                                                      lmms

                                                                                                      by LMMS

                                                                                                      howler.js

                                                                                                      by goldfire

                                                                                                      librosa

                                                                                                      by librosa

                                                                                                      supercollider

                                                                                                      by supercollider

                                                                                                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                                      Find more libraries
                                                                                                      Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                                      Save this library and start creating your kit