mixpanel-react-native 2.4.1 → 3.0.0-beta.2

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "java.compile.nullAnalysis.mode": "automatic",
+  "files.trimTrailingWhitespace": true
+}

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 #
 
+## [v3.0.0-beta.2](https://github.com/mixpanel/mixpanel-react-native/tree/v3.0.0-beta.2) (2024-03-06)
+
+### Enhancements
+- Add support to use custom storage instead of @react-native-async-storage/async-storage.(https://github.com/mixpanel/mixpanel-react-native/pull/225)
+When JavaScript mode is enabled, Mixpanel utilizes [AsyncStorage](https://reactnative.dev/docs/asyncstorage) to persist data. If you prefer not to use it, or if AsyncStorage is unavailable in your target environment, you can import or define a different storage class. However, it must follow the same interface as [AsyncStorage](https://reactnative.dev/docs/asyncstorage) The following example demonstrates how to use a custom storage solution:
+
+```
+const MyAsyncStorage = require("@my-org/<library-path>/AsyncStorage"); // or your own storage class
+const trackAutomaticEvents = false;
+const useNative = false;
+const mixpanel = new Mixpanel('YOUR_TOKEN', trackAutomaticEvents, useNative, MyAsyncStorage);
+mixpanel.init();
+```
+
+### Fixes
+- Make `optOutTracking` and `optInTracking` consistent with the native SDK.(https://github.com/mixpanel/mixpanel-react-native/pull/225)
+  
+#
+
+## [v3.0.0-beta.1](https://github.com/mixpanel/mixpanel-react-native/tree/v3.0.0-beta.1) (2024-02-29)
+
+### Expo and React Native Web support
+
+This version(PR [\#223](https://github.com/mixpanel/mixpanel-react-native/pull/223)) introduces support for Expo, React Native Web, and any platform using React Native that does not support iOS and Android. To activate this, initialize Mixpanel with an additional parameter `useNative` set to false, which will enable JavaScript mode. Currently in beta, we plan to iterate on this to address any issues and add more features. We welcome your feedback.
+
+```
+ const trackAutomaticEvents = false;
+ const useNative = false;
+ const mixpanel = new Mixpanel(
+    "YOUR_MIXPANEL_TOKEN",
+    trackAutomaticEvents,
+    useNative
+  );
+ mixpanel.init();
+```
+
+To try the Expo sample app, navigate to `Samples/MixpanelExpo`, run `npm install`, and then execute `npm run ios` or `npm run android`
+
+Known limitations and differences compared to the native mode (iOS/Android):
+
+- Automatic Events are currently not supported in this mode. Setting 'trackAutomaticEvents' to 'true' will have no effect.
+- Certain Mixpanel Properties are unavailable in Javascript mode, including detailed information about the device and screen.
+- The default flush interval is set to 10 seconds. The data will not flush automatically when the app moves to the background. We recommend flushing more frequently for key events.
+
+#
+
+## [v2.4.1](https://github.com/mixpanel/mixpanel-react-native/tree/v2.4.1) (2024-03-01)
+
+### Fixes
+
+- Fix mp_lib(Mixpanel Library) not being set as `react-native`
+
+#
+
+## [v2.4.0](https://github.com/mixpanel/mixpanel-react-native/tree/v2.4.0) (2023-12-02)
+
+### Enhancements
+
+- add api: setFlushBatchSize [\#219](https://github.com/mixpanel/mixpanel-react-native/pull/219)
+- RN 73 support for Android with AGP 8 required [\#215](https://github.com/mixpanel/mixpanel-react-native/pull/215)
+
+#
+
 ## [v2.3.1](https://github.com/mixpanel/mixpanel-react-native/tree/v2.3.1) (2023-06-20)
 
 ### Fixes
@@ -62,8 +125,8 @@
 ## [v2.2.0](https://github.com/mixpanel/mixpanel-react-native/tree/v2.2.0) (2023-03-06)
 
 ### NOTE:
-- From this version we will prefix randomly generated device-specific distinct_ids with "$device:". The prefix is applied the next time a new random ID is generated, any IDs generated by previous SDK versions and  persisted on the device will continue to be used as-is until reset is called to generate a new ID. This does not change the value sent for the $device_id property, which will continue to be the randomly-generated ID without a prefix. Mixpanel's $identify endpoint has been updated to accept UUIDs with this prefix to coordinate with this change.
 
+- From this version we will prefix randomly generated device-specific distinct_ids with "$device:". The prefix is applied the next time a new random ID is generated, any IDs generated by previous SDK versions and persisted on the device will continue to be used as-is until reset is called to generate a new ID. This does not change the value sent for the $device_id property, which will continue to be the randomly-generated ID without a prefix. Mixpanel's $identify endpoint has been updated to accept UUIDs with this prefix to coordinate with this change.
 
 ### Enhancements
 
@@ -89,7 +152,8 @@
 
 ## [v2.0.0](https://github.com/mixpanel/mixpanel-react-native/tree/v2.0.0) (2022-09-09)
 
-### BREAKING CHANGE: 
+### BREAKING CHANGE:
+
 This major release removes all remaining calls to Mixpanel's `/decide` API endpoint. The main effect of this is that the SDK no longer fetches the remote status of your [project's "Automatically collect common mobile events" setting](https://help.mixpanel.com/hc/en-us/articles/115004596186#enable-or-disable-common-mobile-events). From this version forward, automatic event tracking can only be controlled by the, now required, parameter `trackAutomaticEvents`. Upon upgrading, existing implementations will need to add this parameter to their Mixpanel initializer calls.
 
 ### Enhancements
@@ -102,7 +166,7 @@ This major release removes all remaining calls to Mixpanel's `/decide` API endpo
 
 ### Enhancements
 
--  bump versions to get millisecond precision for event time property [\#146](https://github.com/mixpanel/mixpanel-react-native/pull/146)
+- bump versions to get millisecond precision for event time property [\#146](https://github.com/mixpanel/mixpanel-react-native/pull/146)
 
 #
 
@@ -128,7 +192,7 @@ This major release removes all remaining calls to Mixpanel's `/decide` API endpo
 
 - Bump to latest ios and android sdk versions and remove android people identify\(deprecated\) [\#137](https://github.com/mixpanel/mixpanel-react-native/pull/137)
 - Allow disable flush on background [\#135](https://github.com/mixpanel/mixpanel-react-native/pull/135)
-- Adds  a new API `getDeviceId` for React Native [\#134](https://github.com/mixpanel/mixpanel-react-native/pull/134)
+- Adds a new API `getDeviceId` for React Native [\#134](https://github.com/mixpanel/mixpanel-react-native/pull/134)
 
 #
 
@@ -165,11 +229,12 @@ This major release removes all remaining calls to Mixpanel's `/decide` API endpo
 #
 
 ## [v1.3.6](https://github.com/mixpanel/mixpanel-react-native/tree/v1.3.6) (2022-01-13)
+
 ### Caution: Please DO NOT use this build! In this version, we have a bug in iOS that event names with `&` or `%` will be rejected by the server. We recommend you update to 1.3.7 or above.
 
 ### Fixes
 
-- Fix common mobile events not showing  'react-native'  as property value for 'Mixpanel Library' [\#122](https://github.com/mixpanel/mixpanel-react-native/pull/122)
+- Fix common mobile events not showing 'react-native' as property value for 'Mixpanel Library' [\#122](https://github.com/mixpanel/mixpanel-react-native/pull/122)
 
 #
 
@@ -254,85 +319,53 @@ This major release removes all remaining calls to Mixpanel's `/decide` API endpo
 ## [v1.2.3](https://github.com/mixpanel/mixpanel-react-native/tree/v1.2.3) (2021-05-20)
 
 - Bump Mixpanel Andriod dependency to 5.9.1 (Migrate to Airship 12.x for the integration)
-https://github.com/mixpanel/mixpanel-react-native/pull/59
+  https://github.com/mixpanel/mixpanel-react-native/pull/59
 
 #
 
 ## [v1.2.2](https://github.com/mixpanel/mixpanel-react-native/tree/v1.2.2) (2021-05-08)
 
 - Fix Mixpanel type conversion for ios
-https://github.com/mixpanel/mixpanel-react-native/pull/48
+  https://github.com/mixpanel/mixpanel-react-native/pull/48
 - Fix iOS compile error
-https://github.com/mixpanel/mixpanel-react-native/pull/53
+  https://github.com/mixpanel/mixpanel-react-native/pull/53
 
 #
 
 ## [v1.2.0](https://github.com/mixpanel/mixpanel-react-native/tree/v1.2.0) (2021-05-03)
 
 - Add new settings APIs: setUseIpAddressForGeolocation, setLoggingEnabled(add android), setServerURL(add android)
-https://github.com/mixpanel/mixpanel-react-native/pull/44
+  https://github.com/mixpanel/mixpanel-react-native/pull/44
 
 #
 
 ## [v1.1.1](https://github.com/mixpanel/mixpanel-react-native/tree/v1.1.1) (2021-03-17)
+
 - Fix the issue of passing boolean value as int in iOS
-https://github.com/mixpanel/mixpanel-react-native/pull/34
+  https://github.com/mixpanel/mixpanel-react-native/pull/34
 
 #
 
 ## [v1.1.0](https://github.com/mixpanel/mixpanel-react-native/tree/v1.1.0) (2021-03-03)
+
 - Add Typescript support
 - https://github.com/mixpanel/mixpanel-react-native/pull/31. thanks @sroy3 !
 
 #
 
 ## [v1.0.2](https://github.com/mixpanel/mixpanel-react-native/tree/v1.0.2) (2021-01-27)
-- Fix dynamic type not being able to convert properly in android that causes some group apis to fail 
-PR: https://github.com/mixpanel/mixpanel-react-native/pull/23
-This is to address issue: https://github.com/mixpanel/mixpanel-react-native/issues/21
+
+- Fix dynamic type not being able to convert properly in android that causes some group apis to fail
+  PR: https://github.com/mixpanel/mixpanel-react-native/pull/23
+  This is to address issue: https://github.com/mixpanel/mixpanel-react-native/issues/21
 
 #
 
 ## [v1.0.0](https://github.com/mixpanel/mixpanel-react-native/tree/v1.0.0) (2020-12-08)
-- This is our first release! :tada::tada::tada: 
-Report issues or give us any feedback is appreciated!
+
+- This is our first release! :tada::tada::tada:
+  Report issues or give us any feedback is appreciated!
 - integration guide: https://developer.mixpanel.com/docs/react-native
 - full API reference: https://mixpanel.github.io/mixpanel-react-native
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

package/README.md

@@ -55,7 +55,7 @@ To start tracking with the library you must first initialize with your project t
 ```js
 import { Mixpanel } from 'mixpanel-react-native';
 
-const trackAutomaticEvents = true;
+const trackAutomaticEvents = false;
 const mixpanel = new Mixpanel("Your Project Token", trackAutomaticEvents);
 mixpanel.init();
 
@@ -82,7 +82,7 @@ import React from 'react';
 import { Button, SafeAreaView } from "react-native";
 import { Mixpanel } from 'mixpanel-react-native';
 
-const trackAutomaticEvents = true;
+const trackAutomaticEvents = false;
 const mixpanel = new Mixpanel("Your Project Token", trackAutomaticEvents);
 mixpanel.init();
 
@@ -100,7 +100,13 @@ const SampleApp = () => {
 export default SampleApp;
 
 ```
-### For Expo support, please refer to this [issue](https://github.com/mixpanel/mixpanel-react-native/issues/82)
+### Expo and React Native for Web support
+Starting from version 3.0.0, we have introduced support for Expo, React Native for Web, and other platforms utilizing React Native that do not support iOS and Android directly. To enable this feature, initialize Mixpanel with an additional parameter, `useNative`, set to false(```const mixpanel = new Mixpanel(
+    "YOUR_MIXPANEL_TOKEN",
+    trackAutomaticEvents,
+    useNative
+  );```). This will activate JavaScript mode. Please note that this functionality is currently in beta testing. For further details and installation guidelines, refer to the release notes available at Mixpanel React Native [v3.0.0-beta.1](https://github.com/mixpanel/mixpanel-react-native/releases/tag/v3.0.0-beta.1).
+
 👋 👋  Tell us about the Mixpanel developer experience! [https://www.mixpanel.com/devnps](https://www.mixpanel.com/devnps) 👍  👎
 
 

package/Samples/MixpanelExpo/App.js

@@ -0,0 +1,340 @@
+import React from "react";
+import {
+  SectionList,
+  Text,
+  View,
+  Button,
+  StyleSheet,
+  SafeAreaView,
+} from "react-native";
+
+import {Mixpanel} from "mixpanel-react-native";
+
+const App = () => {
+  const trackAutomaticEvents = false;
+  const useNative = false;
+  const mixpanel = new Mixpanel(
+    "YOUR_MIXPANEL_TOKEN",
+    trackAutomaticEvents,
+    useNative
+  );
+  mixpanel.init();
+  mixpanel.setLoggingEnabled(true);
+
+  const group = mixpanel.getGroup("company_id", 111);
+  const track = async () => {
+    await mixpanel.track("Track Event!");
+  };
+
+  const identify = async () => {
+    await mixpanel.identify("testDistinctId");
+  };
+
+  const timeEvent = () => {
+    const eventName = "Timed Event";
+    mixpanel.timeEvent(eventName);
+    setTimeout(async () => {
+      await mixpanel.track(eventName);
+    }, 2000);
+  };
+
+  const createAlias = async () => {
+    const distinctId = await mixpanel.getDistinctId();
+    alert(distinctId);
+    await mixpanel.alias("New Alias", distinctId);
+  };
+
+  const trackWProperties = async () => {
+    const properties = {"Cool Property": "Property Value"};
+    await mixpanel.track("Track event with property", properties);
+  };
+
+  /**
+      registerSuperProperties will store a new superProperty and possibly overwriting any existing superProperty with the same name.
+    */
+  const registerSuperProperties = () => {
+    mixpanel.registerSuperProperties({
+      "super property": "super property value",
+      "super property1": "super property value1",
+    });
+  };
+  /**
+      Erase all currently registered superProperties.
+    */
+  const clearSuperProperties = () => {
+    mixpanel.clearSuperProperties();
+  };
+
+  const unregisterSuperProperty = () => {
+    mixpanel.unregisterSuperProperty("super property");
+  };
+  /**
+      Returns a json object of the user's current super properties.
+    */
+  const getSuperProperties = () => {
+    mixpanel.getSuperProperties().then((t) => {
+      alert(JSON.stringify(t));
+    });
+  };
+
+  const registerSuperPropertiesOnce = () => {
+    mixpanel.registerSuperPropertiesOnce({
+      "super property": "super property value1",
+    });
+  };
+
+  const flush = () => {
+    mixpanel.flush();
+  };
+
+  const optIn = () => {
+    mixpanel.optInTracking(mixpanel.getDistinctId());
+  };
+
+  const optOut = () => {
+    mixpanel.optOutTracking();
+  };
+
+  const reset = () => {
+    mixpanel.reset();
+  };
+
+  const setProperty = () => {
+    mixpanel.getPeople().set({
+      a: 1,
+      b: 2.3,
+      c: ["4", 5],
+    });
+  };
+
+  const setOneProperty = () => {
+    mixpanel.getPeople().set("d", "yo");
+  };
+
+  const setOnePropertyOnce = () => {
+    mixpanel.getPeople().setOnce("c", "just once");
+  };
+
+  const unsetProperties = () => {
+    mixpanel.getPeople().unset("a");
+  };
+
+  const incrementProperty = () => {
+    mixpanel.getPeople().increment("a", 2.2);
+  };
+
+  const removePropertyValue = () => {
+    mixpanel.getPeople().remove("c", 5);
+  };
+
+  const appendProperties = () => {
+    mixpanel.getPeople().append("a", "Hello");
+  };
+
+  const unionProperties = () => {
+    mixpanel.getPeople().union("a", ["goodbye", "hi"]);
+  };
+
+  const trackChargeWithoutProperties = () => {
+    mixpanel.getPeople().trackCharge(22.8);
+  };
+
+  const trackCharge = () => {
+    mixpanel.getPeople().trackCharge(12.8, {sandwich: 1});
+  };
+
+  const clearCharges = () => {
+    mixpanel.getPeople().clearCharges();
+  };
+
+  const deleteUser = () => {
+    mixpanel.getPeople().deleteUser();
+  };
+
+  // -----------------  Group API -----------------
+  const addGroup = () => {
+    mixpanel.addGroup("company_id", 111);
+  };
+
+  const deleteGroup = () => {
+    mixpanel.deleteGroup("company_id", 111);
+  };
+
+  const setGroup = () => {
+    mixpanel.setGroup("company_id", 3233);
+  };
+
+  const removeGroup = () => {
+    mixpanel.removeGroup("company_id", 3233);
+  };
+
+  const setGroupProperty = () => {
+    group.set("prop_key", "prop_value1");
+    group.set("prop_key1", ["prop_value11", "prop_value12"]);
+  };
+
+  const setGroupPropertyOnce = () => {
+    group.setOnce("prop_key", "prop_value222");
+  };
+
+  const unsetGroupProperty = () => {
+    group.unset("aaa");
+  };
+
+  const removeGroupProperty = () => {
+    group.remove("prop_key1", "prop_value11");
+  };
+
+  const unionGroupProperty = () => {
+    group.union("prop_key", ["prop_value_a", "prop_value_b"]);
+  };
+
+  const trackWithGroups = () => {
+    mixpanel.trackWithGroups(
+      "tracked with groups",
+      {a: 1, b: 2.3},
+      {company_id: 111}
+    );
+  };
+
+  const DATA = [
+    {
+      title: "Events and Properties",
+      data: [
+        {id: "1", label: "Track Event", onPress: track},
+        {id: "2", label: "Identify", onPress: identify},
+        {id: "3", label: "Time Event for 2 secs", onPress: timeEvent},
+        {
+          id: "4",
+          label: "Track Event with Properties",
+          onPress: trackWProperties,
+        },
+        {
+          id: "5",
+          label: "Register Super Properties",
+          onPress: registerSuperProperties,
+        },
+        {
+          id: "6",
+          label: "Clear Super Properties",
+          onPress: clearSuperProperties,
+        },
+        {
+          id: "7",
+          label: "Unregister Super Property",
+          onPress: unregisterSuperProperty,
+        },
+        {
+          id: "8",
+          label: "Get Super Properties",
+          onPress: getSuperProperties,
+        },
+        {
+          id: "9",
+          label: "Register Super Properties Once",
+          onPress: registerSuperPropertiesOnce,
+        },
+        {id: "10", label: "Create Alias", onPress: createAlias},
+        {id: "11", label: "Flush", onPress: flush},
+      ],
+    },
+    {
+      title: "GDPR",
+      data: [
+        {id: "1", label: "Opt In", onPress: optIn},
+        {id: "2", label: "Opt Out", onPress: optOut},
+      ],
+    },
+    {
+      title: "Profile",
+      data: [
+        {id: "2", label: "Set Property", onPress: setProperty},
+        {id: "3", label: "Set One Property", onPress: setOneProperty},
+        {
+          id: "4",
+          label: "Set One Property Once",
+          onPress: setOnePropertyOnce,
+        },
+        {id: "5", label: "Unset Properties", onPress: unsetProperties},
+        {id: "6", label: "Increment Property", onPress: incrementProperty},
+        {
+          id: "7",
+          label: "Remove Property Value",
+          onPress: removePropertyValue,
+        },
+        {id: "8", label: "Append Properties", onPress: appendProperties},
+        {id: "9", label: "Union Properties", onPress: unionProperties},
+        {
+          id: "10",
+          label: "Track Charge",
+          onPress: trackChargeWithoutProperties,
+        },
+        {
+          id: "11",
+          label: "Track Charge with Properties",
+          onPress: trackCharge,
+        },
+        {id: "12", label: "Clear Charges", onPress: clearCharges},
+        {id: "1", label: "Reset", onPress: reset},
+        {id: "13", label: "Delete User", onPress: deleteUser},
+        {id: "14", label: "Flush", onPress: flush},
+      ],
+    },
+    {
+      title: "Group",
+      data: [
+        {id: "1", label: "Add Group", onPress: addGroup},
+        {id: "2", label: "Set Group", onPress: setGroup},
+        {id: "3", label: "Remove Group", onPress: removeGroup},
+        {id: "4", label: "Delete Group", onPress: deleteGroup},
+        {id: "5", label: "Track With Groups", onPress: trackWithGroups},
+        {id: "6", label: "Set Group Property", onPress: setGroupProperty},
+        {id: "7", label: "Set Property Once", onPress: setGroupPropertyOnce},
+        {id: "8", label: "Unset Property", onPress: unsetGroupProperty},
+        {id: "9", label: "Remove Property", onPress: removeGroupProperty},
+        {id: "10", label: "Union Property", onPress: unionGroupProperty},
+        {id: "11", label: "Flush", onPress: flush},
+      ],
+    },
+  ];
+
+  const renderItem = ({item}) => (
+    <View style={styles.item}>
+      <Button title={item.label} onPress={item.onPress} color="#8A2BE2" />
+    </View>
+  );
+
+  const renderSectionHeader = ({section: {title}}) => (
+    <Text style={styles.header}>{title}</Text>
+  );
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <SectionList
+        sections={DATA}
+        keyExtractor={(item, index) => item.id}
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    fontSize: 20,
+    backgroundColor: "#f4f4f4",
+    padding: 10,
+  },
+  item: {
+    backgroundColor: "#ffffff",
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: "#eeeeee",
+  },
+});
+
+export default App;

package/Samples/MixpanelExpo/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "MixpanelExpo",
+    "slug": "MixpanelExpo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/Samples/MixpanelExpo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};