react-native-spotify v2.0.3

React Native Spotify Module (IOS)

Intro

A native module that allows you to use the Spotify SDK API (IOS beta 25) with JavaScript through react-native.

Overview

• Set-up
• How to use
• Exposed API
  • Auth
  • SPTAudioStreamingController Class
  • SPTSearch Class
• Demo

Set-up:

Using npm

Recommended

1. Use npm install react-native-spotify from the directory of your project in your command line.

2. Download the Spotify IOS SDK beta 25 here and unzip it, you will find 3 files with the .framework extension.

3. Open your react native project in Xcode and drag the 3 unzipped .framework files (SpotifyAudioPlayback, SpotifyAuthentication, SpotifyMetadata) into the Frameworks group in your Xcode project (create the group if it doesn’t already exist). In the import dialog, tick the box for Copy items into destinations group folder (or Destination: Copy items if needed).

4. Please follow the instructions on the "Creating Your Client ID, Secret and Callback URI" and "Setting Up Your Build Environment" sections of the Spotify iOS SDK Tutorial

   Important Note! When adding frameworks to the list in the "Link Binary With Libraries" section you will need to add WebKit.framework in addition to those mentioned in the tutorial.

5. Go to node-modules/react-native-spotify/ and copy the following files to the ios directory of your project:

• SpotifyLoginViewController.m
• SpotifyLoginViewController.h
• SpotifyAuth.m
• SpotifyAuth.h

6.Add these references to AppDelegate.m

#import <SpotifyMetadata/SpotifyMetadata.h>
#import <SpotifyAudioPlayback/SpotifyAudioPlayback.h>

Using git

1. Fork and clone the repo.

2. Download the Spotify IOS SDK beta 17 here and unzip it.

3. Open your react native project in Xcode and drag the 3 unzipped .framework files (SpotifyAudioPlayback, SpotifyAuthentication, SpotifyMetadata) into the Frameworks group in your Xcode project (create the group if it doesn’t already exist). In the import dialog, tick the box for Copy items into destinations group folder (or Destination: Copy items if needed).

4. Please follow the instructions on the "Creating Your Client ID, Secret and Callback URI" and "Setting Up Your Build Environment" sections of the Spotify iOS SDK Tutorial

   Important Note! When adding frameworks to the list in the "Link Binary With Libraries" section you wll need to add WebKit.framework in addition to those mentioned in the tutorial.

5. From this project directory, go to react-native-spotify/spotifyModule/ios and copy the following files to the ios directory of your project:

• SpotifyLoginViewController.m
• SpotifyLoginViewController.h
• SpotifyAuth.m
• SpotifyAuth.h

How to use:

//You need to import NativeModules to your view
import { NativeModules } from 'react-native';

//Assign our module from NativeModules and assign it to a variable
var SpotifyModule = NativeModules.SpotifyModule;

class yourComponent extends Component {
  //Some code ...
  someMethod(){
    //You need this to Auth a user, without it you cant use any method!
    SpotifyModule.initWithCredentials('Your ClientId','Your redirectURL', ['streaming'], (error, message)=>{
        if(error){
          //handle error
        } else {
          //handle success
        }
      });
  }
}

Important Note! Take a look to the demo app icluded in the github repo for a more concise example.

Exposed API:

Auth:

initWithCredentials

You need this to Auth a user, without it you cant use any other methods!

Set your Client ID, Redirect URL, Scopes and start the auth process

Example:

SpotifyModule.initWithCredentials('your-clientID','your-redirectURL',['streaming',...],(error)=>{console.log(error)});

SPTAudioStreamingController Class:

Properties:

initialized

Returns true when SPTAudioStreamingController is initialized, otherwise false

Example:

SpotifyModule.initialized((res)=>{console.log(res);});

loggedIn

Returns true if the receiver is logged into the Spotify service, otherwise false

Example:

SpotifyModule.loggedIn((res)=>{console.log(res);});

volume

Returns the volume

Example:

SpotifyModule.volume((res)=>{console.log(res);});

metadata Returns the Metadata for the currently playing context

Example:

SpotifyModule.metadata((res)=>{console.log(res);});

playbackState

Review: Currently returns callback with info about isPlaying Returns the players current state in an object with the following keys:

isPlaying: (Boolean),
isRepeating: (Boolean),
isShuffling: (Boolean),
isActiveDevice: (Boolean),
position: (Number)

Example:

SpotifyModule.playbackState((res)=>{console.log(res);});

targetBitrate Returns the current streaming bitrate the receiver is using

Example:

SpotifyModule.targetBitrate((res)=>{console.log(res);});

Methods:

-logout:

Logout from Spotify

Example:

SpotifyModule.logout();

-setVolume:callback:

Set playback volume to the given level. Volume is a value between 0.0 and 1.0.

Example:

SpotifyModule.setVolume(0.8,(error)=>{console.log(error);});

-setTargetBitrate:callback:

Set the target streaming bitrate. 0 for low, 1 for normal and 2 for high

Example:

SpotifyModule.setTargetBitrate(2,(error)=>{console.log(error);});

-seekTo:callback:

Seek playback to a given location in the current track (in secconds).

Example:

SpotifyModule.seekToOffset(110,(error)=>{console.log(error);});

-playSpotifyURI:startingWithIndex:startingWithPosition:callback: Play a Spotify URI. Play a list of Spotify URIs.(at most 100 tracks).SPTPlayOptions containing extra information about the play request such as which track to play and from which starting position within the track.

Example:

SpotifyModule.playSpotifyURI("spotify:track:12x8gQl2UYcQ3tizSfoPbZ", 0, 0.0,(error)=>{console.log(error)});

-queueSpotifyURI:callback:

Queue a Spotify URI.

Example:

SpotifyModule.queueSpotifyURI("spotify:track:6HxIUB3fLRS8W3LfYPE8tP", (error)=>{console.log(error)});

-setIsPlaying:callback:

Set the "playing" status of the receiver.

Example:

SpotifyModule.setIsPlaying(true,(error)=>{console.log(error);});

-setShuffle:

Set state for shuffle, on or off.

Example:

SpotifyModule.stop((error)=>{console.log(error);});

-setRepeat:

Set repeat state off, on or repeat-one

Example:

SpotifyModule.stop((error)=>{console.log(error);});

-skipNext:

Go to the next track in the queue

Example:

SpotifyModule.skipNext((error)=>{console.log(error);});

-skipPrevious:(RCTResponseSenderBlock)block

Go to the previous track in the queue

Example:

SpotifyModule.skipPrevious((error)=>{console.log(error);});

Events:

The native module can signal events to JavaScript without being invoked directly. JavaScript code can subscribe to these events by creating a new NativeEventEmitter instance around your module.

SPTSearch Class:

Methods:

+performSearchWithQuery:queryType:offset:accessToken:market:callback:

Go to the previous track in the queue You need to have a session first

Example:

SpotifyModule.performSearchWithQuery('lacri','artist',0,'US',(err, res)=>{
      console.log('error', err);
      console.log('result', res);
    });

Demo:

Included in the repo.