Spotify App Remote for React Native

A react native module for the Spotify Remote SDK.

⚠️ Work In Progress ⚠️

Currently Only Implemented for iOS

Documentation

Contributing / Opening Issues

If you would like to make a pull request, fork from and merge into the dev branch (or a feature branch) only.

Please do not open issues about getting the module to work unless you have tried using both the example app and the example token swap server. Please make sure you have tried running on the latest react-native version before submitting a bug.

Install

To add the Spotify Remote SDK to your project, cd into your project directory and run the following commands:

npm install --save react-native-spotify-remote
react-native link react-native-spotify-remote
react-native link react-native-events

Next, do the manual setup for each platform:

iOS

Manually add the frameworks from node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Linked Frameworks and Libraries in your project settings. Then add ../node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Framework Search Paths in your project settings.

In order to support the callback that you will get from the Spotify App you will need to add a url handler to your AppDelegate.m:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <RNSpotifyRemote.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)URL options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [[RNSpotifyRemoteAuth sharedInstance] application:application openURL:URL options:options];
}

@end

Usage

Here's how you would use this library with Typescript (though the same mostly applies to Javascript) and the async/await syntax for promises (Just cuz I like em).

import { 
    auth as SpotifyAuth, 
    remote as SpotifyRemote, 
    ApiScope, 
    ApiConfig
} from 'react-native-spotify-remote';

// Api Config object, replace with your own applications client id and urls
const spotifyConfig: ApiConfig = {
    clientID: "SPOTIFY_CLIENT_ID",
    redirectURL: "SPOTIFY_REDIRECT_URL",
    tokenRefreshURL: "SPOTIFY_TOKEN_REFRESH_URL",
    tokenSwapURL: "SPOTIFY_TOKEN_SWAP_URL",
    scope: ApiScope.AppRemoteControlScope | ApiScope.UserFollowReadScope
}

// Initialize the library and connect the Remote
// then play an epic song
async function playEpicSong(){
    try{
        const token = await SpotifyAuth.initialize(spotifyConfig);
        await SpotifyRemote.connect(token);
        SpotifyRemote.playUri("spotify:track:6IA8E2Q5ttcpbuahIejO74#0:38");
    }catch(err){
        console.error("Couldn't authorize with or connect to Spotify",err);
    }   
}

Token Swap & Refresh

In order to support the OAuth flow, you need to have a server to support the calls for token swap and refresh. I have used the same server setup defined in the react-native-spotify repo while developing this package.

Additional notes

This module only works for Spotify Premium users.

Acknowledgements

Big thanks to @luisfinkey and all of the great work that he has done in the react-native-spotify repo which was the original source of inspiration & coding patterns for this package.