refactor(supported-platforms): Remove React Native Support (#364)

kelsonpw · web-flow · commit 1ce9eb65d7cc · 2021-03-15T11:58:43.000-07:00
* refactor(supported-platforms): Remove React Native Support BREAKING CHANGES: Removed support for React Native We recently released an entirely new SDK focused entirely on React Native support, this can be found at https://github.com/amplitude/Amplitude-ReactNative. We will be writing a migration guide for users looking to move to the new React Native SDK. * docs(platform-support): Fix nits in documentation * docs: Add migration guide for react native to readme
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,7 +12,6 @@
     "mocha/no-exclusive-tests": "error"
   },
   "globals": {
-    "BUILD_COMPAT_REACT_NATIVE": "readonly",
     "BUILD_COMPAT_LOCAL_STORAGE": "readonly",
     "BUILD_COMPAT_SNIPPET": "readonly",
     "BUILD_COMPAT_2_0": "readonly",
diff --git a/.github/ISSUE_TEMPLATE/Bug_report.md b/.github/ISSUE_TEMPLATE/Bug_report.md
@@ -16,7 +16,7 @@ labels: 'bug'
 <!--- (Not obligatory) Suggest a fix/reason -->
 
 ## Steps to Reproduce
-<!--- Please provide a clear sequence of steps to reproduce this bug --> 
+<!--- Please provide a clear sequence of steps to reproduce this bug -->
 <!--- Include code and images, if relevant -->
 1.
 2.
@@ -26,4 +26,4 @@ labels: 'bug'
 ## Environment
 - JS SDK Version: <!--- E.g. 7.1.0 -->
 - Installation Method: <!-- I.e. NPM/Yarn or <script> import -->
-- Browser and Version or React Native and Device: <!-- E.g. Chrome 84, React Native@0.63 iPhone SE-->
+- Browser and Version: <!-- E.g. Chrome 84-->
diff --git a/.gitignore b/.gitignore
@@ -10,7 +10,6 @@ amplitude.js
 amplitude.esm.js
 amplitude.min.js
 amplitude-snippet.min.js
-amplitude.native.js
 amplitude-segment-snippet.min.js
 .watchmanconfig
 package-lock.json
diff --git a/Makefile b/Makefile
@@ -63,11 +63,10 @@ README.md: $(SNIPPET_OUT) version
 # Target for `amplitude.js` file.
 #
 
-$(OUT): node_modules $(SRC) package.json rollup.config.js rollup.min.js rollup.native.js rollup.esm.js rollup.umd.js rollup.umd.min.js
+$(OUT): node_modules $(SRC) package.json rollup.config.js rollup.min.js rollup.esm.js rollup.umd.js rollup.umd.min.js
 	@NODE_ENV=production $(ROLLUP) --config rollup.config.js # is the snippet build config
 	@NODE_ENV=production $(ROLLUP) --config rollup.esm.js # does not concat dependencies, only has module and dependencies
 	@NODE_ENV=production $(ROLLUP) --config rollup.umd.js # generates npm version, also usable in require js app
-	@NODE_ENV=production $(ROLLUP) --config rollup.native.js # generates react native build
 	@NODE_ENV=production $(ROLLUP) --config rollup.umd.min.js
 	@NODE_ENV=production $(ROLLUP) --config rollup.min.js
 
diff --git a/README.md b/README.md
@@ -26,11 +26,11 @@ A JavaScript SDK for tracking events and revenue to [Amplitude](https://www.ampl
 * A [demo page](https://github.com/amplitude/GTM-Web-Demo) demonstrating a potential integration with Google Tag Manager.
 
 
-## React Native
-This library now supports react-native. It has two dependencies on react-native modules you will have to install yourself:
+## Deprecated - React Native
+As of >= v8.0.0, this SDK no longer has support for React Native. We recently released a new SDK focused on providing a React Native first approach to using Amplitude in cross-platform projects.  [Amplitude React Native SDK](https://github.com/amplitude/Amplitude-ReactNative)
 
-* [react-native-device-info](https://www.npmjs.com/package/react-native-device-info) Tested with version 3.1.4
-* [@react-native-async-storage/async-storage](https://www.npmjs.com/package/@react-native-async-storage/async-storage) Tested with version 1.6.2
+Previously used amplitude-js and looking to migrate to @amplitude/react-native?
+* Please follow the steps detailed in our [migration guide](https://github.com/amplitude/Amplitude-ReactNative/blob/main/MIGRATION_GUIDE.md)
 
 ## Node.js
 Please visit [Amplitude-Node](https://github.com/amplitude/Amplitude-Node) for our Node SDK.
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "url": "https://github.com/amplitude/amplitude-javascript.git"
   },
   "main": "amplitude.umd.js",
-  "react-native": "amplitude.native.js",
   "dependencies": {
     "@amplitude/ua-parser-js": "0.7.24",
     "@amplitude/utils": "^1.0.5",
diff --git a/rollup.config.js b/rollup.config.js
@@ -27,7 +27,6 @@ export default {
       BUILD_COMPAT_SNIPPET: 'true',
       BUILD_COMPAT_LOCAL_STORAGE: 'true',
       BUILD_COMPAT_2_0: 'true',
-      BUILD_COMPAT_REACT_NATIVE: 'false',
     }),
     commonjs(),
   ],
diff --git a/rollup.esm.js b/rollup.esm.js
@@ -24,7 +24,6 @@ export default {
       BUILD_COMPAT_SNIPPET: 'false',
       BUILD_COMPAT_LOCAL_STORAGE: 'true',
       BUILD_COMPAT_2_0: 'true',
-      BUILD_COMPAT_REACT_NATIVE: 'false',
     }),
     commonjs({
       include: "node_modules/**"
diff --git a/rollup.native.js b/rollup.native.js
diff --git a/rollup.umd.js b/rollup.umd.js
@@ -27,7 +27,6 @@ export default {
       BUILD_COMPAT_SNIPPET: 'true',
       BUILD_COMPAT_LOCAL_STORAGE: 'true',
       BUILD_COMPAT_2_0: 'true',
-      BUILD_COMPAT_REACT_NATIVE: 'false',
     }),
     commonjs(),
   ],
diff --git a/src/amplitude-client.js b/src/amplitude-client.js
@@ -19,16 +19,6 @@ import DEFAULT_OPTIONS from './options';
 import getHost from './get-host';
 import baseCookie from './base-cookie';
 
-let AsyncStorage;
-let Platform;
-let DeviceInfo;
-if (BUILD_COMPAT_REACT_NATIVE) {
-  const reactNative = require('react-native');
-  AsyncStorage = require('@react-native-async-storage/async-storage').default;
-  Platform = reactNative.Platform;
-  DeviceInfo = require('react-native-device-info');
-}
-
 /**
  * AmplitudeClient SDK API - instance constructor.
  * The Amplitude class handles creation of client instances, all you need to do is call amplitude.getInstance()
@@ -203,75 +193,18 @@ AmplitudeClient.prototype.init = function init(apiKey, opt_userId, opt_config, o
       this._isInitialized = true;
     };
 
-    if (AsyncStorage) {
-      this._migrateUnsentEvents(() => {
-        Promise.all([
-          AsyncStorage.getItem(this._storageSuffix),
-          AsyncStorage.getItem(this.options.unsentKey + this._storageSuffix),
-          AsyncStorage.getItem(this.options.unsentIdentifyKey + this._storageSuffix),
-        ])
-          .then((values) => {
-            if (values[0]) {
-              const cookieData = JSON.parse(values[0]);
-              if (cookieData) {
-                _loadCookieDataProps(this, cookieData);
-              }
-            }
-            if (this.options.saveEvents) {
-              this._unsentEvents = this._parseSavedUnsentEventsString(values[1])
-                .map((event) => ({ event }))
-                .concat(this._unsentEvents);
-              this._unsentIdentifys = this._parseSavedUnsentEventsString(values[2])
-                .map((event) => ({ event }))
-                .concat(this._unsentIdentifys);
-            }
-            if (DeviceInfo) {
-              Promise.all([
-                DeviceInfo.getCarrier(),
-                DeviceInfo.getModel(),
-                DeviceInfo.getManufacturer(),
-                DeviceInfo.getVersion(),
-                DeviceInfo.getUniqueId(),
-              ])
-                .then((values) => {
-                  this.deviceInfo = {
-                    carrier: values[0],
-                    model: values[1],
-                    manufacturer: values[2],
-                    version: values[3],
-                  };
-                  initFromStorage(values[4]);
-                  this.runQueuedFunctions();
-                  if (type(opt_callback) === 'function') {
-                    opt_callback(this);
-                  }
-                })
-                .catch((err) => {
-                  this.options.onError(err);
-                });
-            } else {
-              initFromStorage();
-              this.runQueuedFunctions();
-            }
-          })
-          .catch((err) => {
-            this.options.onError(err);
-          });
-      });
-    } else {
-      if (this.options.saveEvents) {
-        this._unsentEvents = this._loadSavedUnsentEvents(this.options.unsentKey)
-          .map((event) => ({ event }))
-          .concat(this._unsentEvents);
-        this._unsentIdentifys = this._loadSavedUnsentEvents(this.options.unsentIdentifyKey)
-          .map((event) => ({ event }))
-          .concat(this._unsentIdentifys);
-      }
-      initFromStorage();
-      this.runQueuedFunctions();
-      if (type(opt_callback) === 'function') {
-        opt_callback(this);
-      }
+    if (this.options.saveEvents) {
+      this._unsentEvents = this._loadSavedUnsentEvents(this.options.unsentKey)
+        .map((event) => ({ event }))
+        .concat(this._unsentEvents);
+      this._unsentIdentifys = this._loadSavedUnsentEvents(this.options.unsentIdentifyKey)
+        .map((event) => ({ event }))
+        .concat(this._unsentIdentifys);
+    }
+    initFromStorage();
+    this.runQueuedFunctions();
+    if (type(opt_callback) === 'function') {
+      opt_callback(this);
     }
   } catch (err) {
     utils.log.error(err);
@@ -341,53 +274,6 @@ const _validateUnsentEventQueue = (queue) => {
   }
 };
 
-/**
- * @private
- */
-AmplitudeClient.prototype._migrateUnsentEvents = function _migrateUnsentEvents(cb) {
-  Promise.all([AsyncStorage.getItem(this.options.unsentKey), AsyncStorage.getItem(this.options.unsentIdentifyKey)])
-    .then((values) => {
-      if (this.options.saveEvents) {
-        var unsentEventsString = values[0];
-        var unsentIdentifyKey = values[1];
-
-        var itemsToSet = [];
-        var itemsToRemove = [];
-
-        if (unsentEventsString) {
-          itemsToSet.push(
-            AsyncStorage.setItem(this.options.unsentKey + this._storageSuffix, JSON.stringify(unsentEventsString)),
-          );
-          itemsToRemove.push(AsyncStorage.removeItem(this.options.unsentKey));
-        }
-
-        if (unsentIdentifyKey) {
-          itemsToSet.push(
-            AsyncStorage.setItem(
-              this.options.unsentIdentifyKey + this._storageSuffix,
-              JSON.stringify(unsentIdentifyKey),
-            ),
-          );
-          itemsToRemove.push(AsyncStorage.removeItem(this.options.unsentIdentifyKey));
-        }
-
-        if (itemsToSet.length > 0) {
-          Promise.all(itemsToSet)
-            .then(() => {
-              Promise.all(itemsToRemove);
-            })
-            .catch((err) => {
-              this.options.onError(err);
-            });
-        }
-      }
-    })
-    .then(cb)
-    .catch((err) => {
-      this.options.onError(err);
-    });
-};
-
 /**
  * @private
  */
@@ -721,9 +607,6 @@ var _saveCookieData = function _saveCookieData(scope) {
     identifyId: scope._identifyId,
     sequenceNumber: scope._sequenceNumber,
   };
-  if (AsyncStorage) {
-    AsyncStorage.setItem(scope._storageSuffix, JSON.stringify(cookieData));
-  }
 
   if (scope._useOldCookie) {
     scope.cookieStorage.set(scope.options.cookieName + scope._storageSuffix, cookieData);
@@ -872,21 +755,13 @@ AmplitudeClient.prototype.saveEvents = function saveEvents() {
   try {
     const serializedUnsentEvents = JSON.stringify(this._unsentEvents.map(({ event }) => event));
 
-    if (AsyncStorage) {
-      AsyncStorage.setItem(this.options.unsentKey + this._storageSuffix, serializedUnsentEvents);
-    } else {
-      this._setInStorage(localStorage, this.options.unsentKey, serializedUnsentEvents);
-    }
+    this._setInStorage(localStorage, this.options.unsentKey, serializedUnsentEvents);
   } catch (e) {} /* eslint-disable-line no-empty */
 
   try {
     const serializedIdentifys = JSON.stringify(this._unsentIdentifys.map((unsentIdentify) => unsentIdentify.event));
 
-    if (AsyncStorage) {
-      AsyncStorage.setItem(this.options.unsentIdentifyKey + this._storageSuffix, serializedIdentifys);
-    } else {
-      this._setInStorage(localStorage, this.options.unsentIdentifyKey, serializedIdentifys);
-    }
+    this._setInStorage(localStorage, this.options.unsentIdentifyKey, serializedIdentifys);
   } catch (e) {} /* eslint-disable-line no-empty */
 };
 
@@ -1260,9 +1135,8 @@ AmplitudeClient.prototype._logEvent = function _logEvent(
   timestamp,
   callback,
 ) {
-  if (!BUILD_COMPAT_REACT_NATIVE) {
-    _loadCookieData(this); // reload cookie before each log event to sync event meta-data between windows and tabs
-  }
+  _loadCookieData(this); // reload cookie before each log event to sync event meta-data between windows and tabs
+
   if (!eventType) {
     if (type(callback) === 'function') {
       callback(0, 'No request sent', { reason: 'Missing eventType' });
@@ -1291,23 +1165,9 @@ AmplitudeClient.prototype._logEvent = function _logEvent(
     this._lastEventTime = eventTime;
     _saveCookieData(this);
 
-    let osName = this._ua.browser.name;
-    let osVersion = this._ua.browser.major;
-    let deviceModel = this._ua.os.name;
-    let deviceManufacturer;
-
-    let versionName;
-    let carrier;
-    if (BUILD_COMPAT_REACT_NATIVE) {
-      osName = Platform.OS;
-      osVersion = Platform.Version;
-      if (this.deviceInfo) {
-        carrier = this.deviceInfo.carrier;
-        deviceManufacturer = this.deviceInfo.manufacturer;
-        deviceModel = this.deviceInfo.model;
-        versionName = this.deviceInfo.version;
-      }
-    }
+    const osName = this._ua.browser.name;
+    const osVersion = this._ua.browser.major;
+    const deviceModel = this._ua.os.name;
 
     userProperties = userProperties || {};
     var trackingOptions = { ...this._apiPropertiesTrackingOptions };
@@ -1322,20 +1182,18 @@ AmplitudeClient.prototype._logEvent = function _logEvent(
       event_id: eventId,
       session_id: this._sessionId || -1,
       event_type: eventType,
-      version_name: _shouldTrackField(this, 'version_name') ? this.options.versionName || versionName || null : null,
+      version_name: this.options.versionName || null,
       platform: _shouldTrackField(this, 'platform') ? this.options.platform : null,
       os_name: _shouldTrackField(this, 'os_name') ? osName || null : null,
       os_version: _shouldTrackField(this, 'os_version') ? osVersion || null : null,
       device_model: _shouldTrackField(this, 'device_model') ? deviceModel || null : null,
-      device_manufacturer: _shouldTrackField(this, 'device_manufacturer') ? deviceManufacturer || null : null,
       language: _shouldTrackField(this, 'language') ? this.options.language : null,
-      carrier: _shouldTrackField(this, 'carrier') ? carrier || null : null,
       api_properties: apiProperties,
       event_properties: utils.truncate(utils.validateProperties(eventProperties)),
       user_properties: utils.truncate(utils.validateProperties(userProperties)),
       uuid: UUID(),
       library: {
-        name: BUILD_COMPAT_REACT_NATIVE ? 'amplitude-react-native' : 'amplitude-js',
+        name: 'amplitude-js',
         version: version,
       },
       sequence_number: sequenceNumber, // for ordering events and identifys
diff --git a/src/metadata-storage.js b/src/metadata-storage.js
@@ -35,10 +35,8 @@ class MetadataStorage {
 
     this.cookieDomain = '';
 
-    if (!BUILD_COMPAT_REACT_NATIVE) {
-      const writableTopDomain = topDomain(getLocation().href);
-      this.cookieDomain = domain || (writableTopDomain ? '.' + writableTopDomain : null);
-    }
+    const writableTopDomain = topDomain(getLocation().href);
+    this.cookieDomain = domain || (writableTopDomain ? '.' + writableTopDomain : null);
 
     if (storageOptionExists[storage]) {
       this.storage = storage;
diff --git a/src/options.js b/src/options.js
diff --git a/yarn.lock b/yarn.lock
