Update Example to use repo source

- Bump Version of package
- Add source & react-native entries to package.json
- Update example project to consume package from root of repo

Author: cjam

example/android/app/src/main/java/com/example/MainApplication.java

@@ -8,6 +8,7 @@
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.lufinkey.react.eventemitter.RNEventEmitterPackage;
+import com.reactlibrary.RNSpotifyRemotePackage;
 
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
@@ -23,11 +24,15 @@ public boolean getUseDeveloperSupport() {
 
         @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());
-          return packages;
+            List<ReactPackage> packages = new PackageList(this).getPackages();
+
+            // To allow for easier development, add manually.
+            // Not necessary in the wild as it will be autolinked
+            packages.add(new RNSpotifyRemotePackage());
+
+            // Packages that cannot be autolinked yet can be added manually here:
+            packages.add(new RNEventEmitterPackage());
+            return packages;
         }
 
         @Override

example/android/settings.gradle

@@ -1,10 +1,10 @@
 rootProject.name = 'Spotify Remote SDK Example'
 
 include ':react-native-spotify-remote'
-project(':react-native-spotify-remote').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spotify-remote/android')
+project(':react-native-spotify-remote').projectDir = new File(rootProject.projectDir, '../../android')
 
 include ':react-native-events'
-project(':react-native-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-events/android')
+project(':react-native-events').projectDir = new File(rootProject.projectDir, '../../node_modules/react-native-events/android')
 
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 

example/babel.config.js

@@ -1,6 +1,19 @@
+const path = require('path');
+const pak = require('../package.json');
+
 module.exports = {
   presets: [
     'module:metro-react-native-babel-preset',
     'module:react-native-dotenv'
   ],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          [pak.name]: path.join(__dirname, '..', pak.source),
+        },
+      },
+    ],
+  ],
 };

example/ios/Podfile

@@ -1,6 +1,7 @@
 platform :ios, '10.0'
 
 node_modules_path = '../node_modules'
+root_node_modules_path = '../../node_modules'
 require_relative "#{node_modules_path}/react-native/scripts/react_native_pods"
 require_relative "#{node_modules_path}/@react-native-community/cli-platform-ios/native_modules"
 
@@ -9,8 +10,10 @@ target 'example' do
 
   use_react_native!(:path => config["reactNativePath"])
 
+  # Want to install the pod from the source directory so we can change it while developing
+  pod 'RNSpotifyRemote', :path => "../../"
   # RNEventEmitter doesn't seem to support the auto detection, manually specifying instead
-  pod 'RNEventEmitter', :path => "#{node_modules_path}/react-native-events"
+  pod 'RNEventEmitter', :path => "#{root_node_modules_path}/react-native-events"
 
   # Enables Flipper.
   #

example/ios/Podfile.lock

@@ -300,7 +300,7 @@ PODS:
     - React-jsi (= 0.63.4)
   - RNEventEmitter (1.0.15):
     - React
-  - RNSpotifyRemote (0.3.3):
+  - RNSpotifyRemote (0.3.4):
     - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -354,8 +354,8 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - RNEventEmitter (from `../node_modules/react-native-events`)
-  - RNSpotifyRemote (from `../node_modules/react-native-spotify-remote`)
+  - RNEventEmitter (from `../../node_modules/react-native-events`)
+  - RNSpotifyRemote (from `../../`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -427,9 +427,9 @@ EXTERNAL SOURCES:
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
   RNEventEmitter:
-    :path: "../node_modules/react-native-events"
+    :path: "../../node_modules/react-native-events"
   RNSpotifyRemote:
-    :path: "../node_modules/react-native-spotify-remote"
+    :path: "../../"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -472,10 +472,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
   RNEventEmitter: db22b54ae7d9be0bd5725613f79a51e2bc364a93
-  RNSpotifyRemote: f8f1251f5084d8d2ebc4d721966874a8420daa0c
+  RNSpotifyRemote: 567768dc276b6fe386d6684f45de71dfcb437ab5
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 0578c2c2fb41c25014dca8439d17d3ecdee64b91
+PODFILE CHECKSUM: 50087c231dd32c41f228e44386c2d0e1576676dc
 
 COCOAPODS: 1.10.1

example/metro.config.js

@@ -1,31 +1,41 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+const escape = require('escape-string-regexp');
+const pak = require('../package.json');
 
-const path = require('path')
+const root = path.resolve(__dirname, '..');
+
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
 
 module.exports = {
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    blacklistRE: blacklist(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
   transformer: {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: false,
+        inlineRequires: true,
       },
     }),
   },
-  // workaround for an issue with symlinks encountered starting with
-  // [email protected] / React Native 0.61
-  // (not needed with React Native 0.60 / [email protected])
-  resolver: {
-    extraNodeModules: new Proxy(
-      {},
-      { get: (_, name) => path.resolve('.', 'node_modules', name) }
-    )
-  },
-
-  // quick workaround for another issue with symlinks
-  watchFolders: ['.', '..'],
 };
+

example/package.json

@@ -7,17 +7,14 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint .",
-    "postinstall": "patch-package && node ./scripts/examples_postinstall.js",
-    "update-package": "pushd ../; yarn build && popd && rimraf ./node_modules/react-native-spotify-remote && yarn add file:.."
+    "lint": "eslint ."
   },
   "dependencies": {
     "@react-native-community/slider": "^2.0.8",
     "luxon": "^1.21.3",
     "native-base": "^2.13.12",
     "react": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-spotify-remote": "file:.."
+    "react-native": "0.63.4"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
@@ -29,15 +26,15 @@
     "@types/react-native": "^0.60.25",
     "@types/react-test-renderer": "^16.9.1",
     "babel-jest": "^25.5.1",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^6.8.0",
     "jest": "^25.5.2",
     "metro-react-native-babel-preset": "^0.59.0",
     "patch-package": "^6.2.2",
     "react-native-dotenv": "^0.2.0",
-    "react-test-renderer": "16.13.1",
-    "typescript": "^3.7.3"
+    "react-test-renderer": "16.13.1"
   },
   "jest": {
     "preset": "react-native"
   }
-}
+}

example/tsconfig.json

@@ -5,11 +5,24 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react",
-    "lib": ["es6"],
+    "lib": [
+      "es6"
+    ],
     "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "react-native-spotify-remote": [
+        "../src/index"
+      ]
+    },
   },
-  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
-}
+  "exclude": [
+    "node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ],
+}