[iOS] Artwork not showing on lock screen

[CharlesCarey]

Configuration

React Native Environment Info:
System:
OS: macOS 10.14.3
Binaries:
Node: 10.12.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
npmPackages:
react: 16.8.3 => 16.8.3
react-native: ^0.59.4 => 0.59.4

React Native Track Player - v1.1.4

Issue

The artwork for the tracks is not showing up on the lock screen on iOS, on Android everything is fine. On iOS, instead of showing the correct artwork it shows the app icon instead.

Code

I am adding tracks like this
TrackPlayer.add({ id: value.name, url: value.url, title: value.name, artist: value.artist, artwork: value.artwork });

The artwork field is:
artwork: require('App/assets/x.jpg')

The artwork is showing fine within the app but never works on the lock screen.

[brenwell]

I had this issue when i accidentally called .add before .setupPlayer was finished

[CharlesCarey]

Thanks for replying! I don't think that's the issue though as I am calling add() in a .then block after setupPlayer.

The images show up on the lock screen music player when I run the app on iOS in dev mode but not when the I bundle the code and assets up for production (although the assets always work within the app no matter if I am running the dev or production version of the app).

I am running this command to bundle the app - react-native bundle --entry-file='index.js' --bundle-output='./ios/App/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios' and then building via xcode. Maybe there is something wrong with how my assets are being copied?

[brenwell]

are assets referenced in your xcode project?

[CharlesCarey]

Yeah, I did the Create by reference option. I assume I must have mucked something up due to the images working on the lock screen in dev mode but not when bundled. How exactly did you set up your assets?

[brenwell]

I am not using local assets for my artwork. So I am not much help there. But I would suggest trying the bundle with minification set to false. Just in case you are accessing the asset by name and it is being changed during this process.

[CharlesCarey]

Yeah I tried that. I also looked through the main.jsbundle and the location and naming of the assets all seemed fine. I am stumped :(

[CharlesCarey]

I have the option to use network images, which seems to work so I will go with that route unless anyone has any tips about what I might be doing wrong with my asset bundling.

Thank you so much for your help @brenwell !!

[nishanBende]

@CharlesCarey same issue here, the remote images work but the local ones are not working. Did you find any fix for this?

[jasongaare]

still seeing this - I'm not a swift expect but assuming the issue is this function doesn't take into account MediaURL. isLocal ?

https://github.com/react-native-kit/react-native-track-player/blob/a33964e8283ea8f84336d4bec5d8ec74338cbb7c/ios/RNTrackPlayer/Models/Track.swift#L101-L113

[nishanBende]

@Jason-Cooke I have replaced this method with the implementation below and it works. It just checks if the file is local i.e. starts with /.

func getArtwork(_ handler: @escaping (UIImage?) -> Void) {
        if let artworkURL = artworkURL?.value {
    
            if(artworkURL.absoluteString.starts(with: "/")){
                let image = UIImage.init(contentsOfFile: artworkURL.path);
                handler(image);
            } else {
                
                URLSession.shared.dataTask(with: artworkURL, completionHandler: { (data, _, error) in
                    if let data = data, let artwork = UIImage(data: data), error == nil {
                        handler(artwork)
                    }
                    
                    handler(nil)
                }).resume()
            }
        }
        
        handler(nil)
    }

[jasongaare]

@nishanBende could you not simply use the .isLocal property that exists on artworkURL, since it is a MediaURL?

https://github.com/react-native-kit/react-native-track-player/blob/a33964e8283ea8f84336d4bec5d8ec74338cbb7c/ios/RNTrackPlayer/Models/MediaURL.swift#L11-L31