Spotify App Remote for React Native

Spotify App Remote for React Native

A react native module for the Spotify Remote SDK An Example project was developed to exercise and test all functionality within this library. If you are curious about how to use something, or need to compare your application setup to something that works, check there first.

Spotify App Remote for React Native

A react native module for the Spotify Remote SDK ( iOS | Android )

Supported Features

An Example project was developed to exercise and test all functionality within this library. If you are curious about how to use something, or need to compare your application setup to something that works, check there first.

Features

The following table shows the platform support for various Spotify Remote API functionality within this library.

Feature iOS Android
Authentication
authorize
getSession
endSession
Remote
isConnectedAsync
connect
disconnect
playUri
playItem
playItemWithIndex
queueUri
seek
resume
pause
skipToNext
skipToPrevious
setShuffling
setRepeatMode
getPlayerState
getRootContentItems Not available in Android SDK
getRecommendedContentItems
getChildrenOfItem
getContentItemForUri Not available in Android SDK
getCrossfadeState
Remote Events
playerStateChanged
remoteDisconnected
remoteConnected

Install

yarn add react-native-spotify-remote

or

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

Linking

As of React Native > 0.61, auto linking should work for both iOS and Android. There shouldn't be any modifications necessary and it Should work out of the box. The one caveat, is that react-native-events needs to be linked as it doesn't yet support auto linking. If you do run into issues or are using an older version of React Native, the following sections should help get you up and running.

iOS

This library requires being built with XCode 11 for reasons given here.

By far the easiest way to integrate into your project. In your ios/PodFile add the following lines to your projects target:

    pod 'RNEventEmitter', :path => "../node_modules/react-native-events"
    pod 'RNSpotifyRemote', :path => '../node_modules/react-native-spotify-remote'

See the Example App PodFile for a full example.

I have only tested this against RN > 0.60 in the example app. So if you have issues with a RN version < 0.60 that might be a place to start troubleshooting.

Manual

Manual linking is needed for projects that don't use Cocoapods.

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

iOS Framework Search paths;

  1. Then add ../node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Framework Search Paths in your project settings see the screenshot below. (By default it won't show the options in XCode so you may need to check all)

iOS Framework Search paths;

Troubleshooting

'React/RCTConvert.h' file not found might be due to a build dependency issue where RNSpotifyRemote is being built before React. Try adding React as an explicit dependency of the RNSpotifyRemote target/project in XCode. Otherwise, Cocoapods should solve this for you.

Auth Callback

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

iOS

Modifications are needed for the 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

Android

If you need to link your project manually, here are some things you'll need to do.

react-native-events does not support autolinking at this point and will need to be manually linked into your application

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add the following imports to the top of the file
import com.reactlibrary.RNSpotifyRemotePackage;
import com.lufinkey.react.eventemitter.RNEventEmitterPackage;
  • Add to the list returned by getPackages() for example:
      @Override
      protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
        // Packages that cannot be autolinked yet can be added manually here, for example:
         packages.add(new RNEventEmitterPackage());
         packages.add(new RNSpotifyRemotePackage());
        return packages;
      }
  1. Append the following lines to android/settings.gradle:

    include ':react-native-spotify-remote'
    project(':react-native-spotify-remote').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spotify-remote/android')
    
    include ':react-native-events'
    project(':react-native-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-events/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':react-native-spotify-remote')
    implementation project(':react-native-events')
    
  3. As per the Spotify Android SDK Docs Insert the following lines into android/app/src/AndroidManifest.xml

      <activity
            android:exported="true"
            android:name="com.spotify.sdk.android.authentication.AuthCallbackActivity"
            android:theme="@android:style/Theme.Translucent.NoTitleBar">

            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>

                <data
                    android:scheme="<YOUR_APPLICATION_SCHEME>"
                    android:host="<YOUR_APPLICATION_CALLBACK>"/>
            </intent-filter>
        </activity>

        <activity
            android:name="com.spotify.sdk.android.authentication.LoginActivity"
            android:theme="@android:style/Theme.Translucent.NoTitleBar">
        </activity>

If you have issues linking the module, please check that gradle is updated to the latest version and that your project is synced.

Usage

Example Application

This repo contains an Example App which should be the quickest and easiest way to get up and running to try things out. It is using React Hooks (cuz they're pretty cool) and exercises all of the remote API calls.

In Code

Again, I recommend looking at the example app. If you specifically want to see some code that actually does stuff take a look at the App.tsx.

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",
    scopes: [ApiScope.AppRemoteControlScope, ApiScope.UserFollowReadScope]
}

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

Token Swap & Refresh

A server must be running for with endpoints that allow Spotify to authenticate your app.

In order to support the OAuth flow, you need to have a server to support the calls for token swap and refresh. I have included the same server setup defined in the react-native-spotify repo as it does exactly what you need.

See the Server Readme for further instructions.

Additional notes

Nothing has been special to deal with Spotify Free Users but this module should still work.

Opening Issues

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.

Download Details:

Author: cjam

Source Code: https://github.com/cjam/react-native-spotify-remote

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.