A react native module for the Spotify Remote SDK ( iOS | Android )
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.
+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.
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.
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.
By far the easiest way to integrate into your project. In your ios/PodFile add the following lines to your projects target:
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.
+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 linking is needed for projects that don't use Cocoapods.
node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Linked Frameworks and Libraries in your project settings. node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Linked Frameworks and Libraries in your project settings.
;
'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.
'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.
If you need to link your project manually, here are some things you'll need to do.
+If you need to link your project manually, here are some things you'll need to do.
@@ -3035,34 +3038,36 @@
react-native-eventsdoes not support autolinking at this point and will need to be manually linked into your application
react-native-eventsdoes not support autolinking at this point- Open up
android/app/src/main/java/[...]/MainApplication.java
import com.reactlibrary.RNSpotifyRemotePackage;
+ - Add the following imports to the top of the file
+ import com.reactlibrary.RNSpotifyRemotePackage;
import com.lufinkey.react.eventemitter.RNEventEmitterPackage;
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;
- }
-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;
+ }
+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-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')
+include ':react-native-events'
+project(':react-native-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-events/android')
Insert the following lines inside the dependencies block in android/app/build.gradle:
implementation project(':react-native-spotify-remote')
- implementation project(':react-native-events')
+ implementation project(':react-native-spotify-remote')
+implementation project(':react-native-events')
As per the Spotify Android SDK Docs Insert the following lines into android/app/src/AndroidManifest.xml
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.
+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.
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.
+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';
+ 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]
-}
+ 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 SpotifyRemote.playUri("spotify:track:6IA8E2Q5ttcpbuahIejO74");
- await SpotifyRemote.seek(58000);
- }catch(err){
- console.error("Couldn't authorize with or connect to Spotify",err);
- }
+async function playEpicSong() {
+ try {
+ const session = await SpotifyAuth.authorize(spotifyConfig);
+ await SpotifyRemote.connect(session.accessToken);
+ await SpotifyRemote.playUri("spotify:track:6IA8E2Q5ttcpbuahIejO74");
+ await SpotifyRemote.seek(58000);
+ } catch (err) {
+ console.error("Couldn't authorize with or connect to Spotify", err);
+ }
}
@@ -3137,7 +3142,7 @@ 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.
+ 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
diff --git a/docs/modules.html b/docs/modules.html
index 0ae4ab3..3adf994 100644
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -2752,6 +2752,9 @@
Spotify App Remote for React Native
+ 
+ 
+ 
A react native module for the Spotify Remote SDK ( iOS | Android )
- Documentation
@@ -2761,7 +2764,7 @@ Spotify App Remote for React Native
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.
+ 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
@@ -2967,7 +2970,7 @@ Install
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.
+ 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
@@ -2977,18 +2980,18 @@ iOS
Cocoapods (Recommended)
- By far the easiest way to integrate into your project. In your ios/PodFile add the following lines to your projects target:
+ 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.
+ 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.
- - Manually add the frameworks from
node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Linked Frameworks and Libraries in your project settings.
+ - Manually add the frameworks from
node_modules/react-native-spotify-remote/ios/external/SpotifySDK to Linked Frameworks and Libraries in your project settings.
;
@@ -2998,7 +3001,7 @@ Manual
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.
+ '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
@@ -3025,7 +3028,7 @@ iOS
Android
- If you need to link your project manually, here are some things you'll need to do.
+ 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
@@ -3035,34 +3038,36 @@ react-native-events does not support autolinking at this point
- Open up
android/app/src/main/java/[...]/MainApplication.java
- - Add the following imports to the top of the file
import com.reactlibrary.RNSpotifyRemotePackage;
+ - Add the following imports to the top of the file
+
+ import com.reactlibrary.RNSpotifyRemotePackage;
import com.lufinkey.react.eventemitter.RNEventEmitterPackage;
- 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;
- }
-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;
+ }
+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-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')
+include ':react-native-events'
+project(':react-native-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-events/android')
Insert the following lines inside the dependencies block in android/app/build.gradle:
implementation project(':react-native-spotify-remote')
- implementation project(':react-native-events')
+ implementation project(':react-native-spotify-remote')
+implementation project(':react-native-events')
As per the Spotify Android SDK Docs Insert the following lines into android/app/src/AndroidManifest.xml
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.
+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.
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.
+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';
+ 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]
-}
+ 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 SpotifyRemote.playUri("spotify:track:6IA8E2Q5ttcpbuahIejO74");
- await SpotifyRemote.seek(58000);
- }catch(err){
- console.error("Couldn't authorize with or connect to Spotify",err);
- }
+async function playEpicSong() {
+ try {
+ const session = await SpotifyAuth.authorize(spotifyConfig);
+ await SpotifyRemote.connect(session.accessToken);
+ await SpotifyRemote.playUri("spotify:track:6IA8E2Q5ttcpbuahIejO74");
+ await SpotifyRemote.seek(58000);
+ } catch (err) {
+ console.error("Couldn't authorize with or connect to Spotify", err);
+ }
}
@@ -3137,7 +3142,7 @@ 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.
+ 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
diff --git a/package.json b/package.json
index 7c7465f..36e6b39 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"bugs": {
"url": "https://github.com/cjam/react-native-spotify-remote/issues"
},
- "version": "0.3.11-0",
+ "version": "0.3.11-1",
"description": "React Native wrapper around the Spotify Remote SDK",
"author": {
"name": "Colter McQuay"