Enable background controls for iOS

src/components/App.tsx

@@ -14,6 +14,15 @@ export default class App extends Component<State> {
 
     async componentDidMount() {
         await TrackPlayer.setupPlayer();
+        await TrackPlayer.updateOptions({
+            capabilities: [
+                TrackPlayer.CAPABILITY_PLAY,
+                TrackPlayer.CAPABILITY_PAUSE,
+                TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
+                TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
+                TrackPlayer.CAPABILITY_STOP,
+            ]
+        });
         this.setState({ isReady: true });
     }
     

src/screens/Player/components/MediaControls.tsx

@@ -23,10 +23,12 @@ const Container = styled.View`
 const Buttons = styled.View`
     flex-direction: row;
     align-items: center;
+    justify-content: space-between;
+    width: 100%;
 `;
 
 const Button = styled.View`
-    margin: 20px;
+    margin: 20px 40px;
 `;
 
 export default function MediaControls() {

src/screens/Player/components/NowPlaying.tsx

@@ -18,16 +18,11 @@ const Artwork = styled.Image`
 export default function NowPlaying() {
     const track = useCurrentTrack();
 
-    // GUARD: Don't render anything if nothing is playing
-    if (!track) {
-        return null;
-    }
-
     return (
         <View style={{ alignItems: 'center' }}>
-            <Artwork style={{ flex: 1 }} source={{ uri: track.artwork }} />
-            <Text style={{ fontWeight: 'bold', fontSize: 24, marginBottom: 12 }} >{track.artist}</Text>
-            <Text style={{ fontSize: 18, marginBottom: 12, textAlign: 'center', paddingLeft: 20, paddingRight: 20 }}>{track.title}</Text>
+            <Artwork style={{ flex: 1 }} source={{ uri: track?.artwork }} />
+            <Text style={{ fontWeight: 'bold', fontSize: 24, marginBottom: 12 }} >{track?.artist}</Text>
+            <Text style={{ fontSize: 18, marginBottom: 12, textAlign: 'center', paddingLeft: 20, paddingRight: 20 }}>{track?.title}</Text>
         </View>
     );
 }

src/utility/PlaybackService.ts

@@ -0,0 +1,32 @@
+/**
+* This is the code that will run tied to the player.
+*
+* The code here might keep running in the background.
+*
+* You should put everything here that should be tied to the playback but not the UI
+* such as processing media buttons or analytics
+*/
+
+import TrackPlayer from 'react-native-track-player';
+
+export default async function() {
+    TrackPlayer.addEventListener('remote-play', () => {
+        TrackPlayer.play();
+    });
+    
+    TrackPlayer.addEventListener('remote-pause', () => {
+        TrackPlayer.pause();
+    });
+    
+    TrackPlayer.addEventListener('remote-next', () => {
+        TrackPlayer.skipToNext();
+    });
+    
+    TrackPlayer.addEventListener('remote-previous', () => {
+        TrackPlayer.skipToPrevious();
+    });
+    
+    TrackPlayer.addEventListener('remote-stop', () => {
+        TrackPlayer.destroy();
+    });
+}