Code đầy đủ ứng dụng nghe nhạc đơn giản trong ReactNative

File App.tsx

import { Button, StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import TrackPlayer, { State } from 'react-native-track-player';
 
const App = () => {
 
  const setupApp = async ()=>{
    console.log("setup player");

    await TrackPlayer.setupPlayer();
    

    let listTrack = [
      {
        id: '1',
        url: 'https://cdn.pixabay.com/audio/2022/10/18/audio_31c2730e64.mp3',
        title: 'Password Infinity',
        artist: '',
         
      }
    ];

    await TrackPlayer.add(listTrack);

    console.log("Finish setup");
  }

  useEffect(   () => {
    console.log("start render");
    
      setupApp();
   }, []);

  //--- hàm điều khiển
  const PlayMusic = ()=>{
    console.log("play music");

      TrackPlayer.play();
  }
  const PauseMusic = ()=>{
    console.log("pause music");
    
    TrackPlayer.pause();
  }


  return (
    <View>
      <Text>Demo Music</Text>
      <View style={{width: 100,margin: 10}}>
        <Button title='Play' onPress={PlayMusic} />
      </View>
      <View style={{width: 100,margin: 10}}>
        <Button title='Pause' onPress={PauseMusic} />
      </View>
 
    </View>
  )
}

export default App

const styles = StyleSheet.create({})

File index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

import TrackPlayer from 'react-native-track-player';
import { playbackService } from './servicePlay';

AppRegistry.registerComponent(appName, () => App);
TrackPlayer.registerPlaybackService(() => playbackService);
 

File servicePlay.js

import TrackPlayer from 'react-native-track-player';
export async function playbackService() {
    // TODO: Attach remote event handlers
  }

File Manifest.xml trong thư mục android/app/src

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:usesCleartextTraffic="true"
....

Xem hướng dẫn tại bài viết này https://zezo.dev/view/huong-dan-tao-ung-dung-choi-nhac-don-gian-trong-reactnative