mixpanel-react-native 2.4.0 → 3.0.0-beta.1

package/.vscode/settings.json

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

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 #
 
+## [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 feature, 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.0](https://github.com/mixpanel/mixpanel-react-native/tree/v2.4.0) (2023-12-02)
 
 ### Enhancements
@@ -342,6 +369,10 @@ Report issues or give us any feedback is appreciated!
 
 
 
+
+
+
+
 
 
 

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();
 

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'],
+  };
+};

package/Samples/MixpanelExpo/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "mixpanelexpo",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~50.0.8",
+    "expo-status-bar": "~1.11.1",
+    "mixpanel-react-native": "github:mixpanel/mixpanel-react-native#master",
+    "react": "18.2.0",
+    "react-native": "0.73.4",
+    "react-native-web": "~0.19.6",
+    "react-dom": "18.2.0",
+    "@expo/metro-runtime": "~3.1.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

package/__mocks__/@react-native-async-storage/async-storage.js

@@ -0,0 +1 @@
+export * from "@react-native-async-storage/async-storage/jest/async-storage-mock";

package/__tests__/core.test.js

@@ -0,0 +1,135 @@
+import { MixpanelType } from "mixpanel-react-native/javascript/mixpanel-constants";
+
+jest.mock("mixpanel-react-native/javascript/mixpanel-queue", () => ({
+  MixpanelQueueManager: {
+    initialize: jest.fn(),
+    enqueue: jest.fn(),
+    getQueue: jest.fn(),
+    spliceQueue: jest.fn(),
+    clearQueue: jest.fn(),
+  },
+}));
+
+jest.mock("mixpanel-react-native/javascript/mixpanel-persistent", () => ({
+  MixpanelPersistent: {
+    getInstance: jest.fn().mockReturnValue({
+      getOptedOut: jest.fn(),
+    }),
+  },
+}));
+
+jest.mock("mixpanel-react-native/javascript/mixpanel-network", () => ({
+  MixpanelNetwork: {
+    sendRequest: jest.fn(),
+  },
+}));
+
+jest.mock("mixpanel-react-native/javascript/mixpanel-config", () => ({
+  MixpanelConfig: {
+    getInstance: jest.fn().mockReturnValue({
+      getFlushInterval: jest.fn().mockReturnValue(1000),
+      getFlushBatchSize: jest.fn().mockReturnValue(50),
+      getServerURL: jest.fn(),
+      getUseIpAddressForGeolocation: jest.fn(),
+    }),
+  },
+}));
+
+jest.mock("mixpanel-react-native/javascript/mixpanel-logger", () => ({
+  MixpanelLogger: {
+    log: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const {
+  MixpanelCore,
+} = require("mixpanel-react-native/javascript/mixpanel-core");
+
+const {
+  MixpanelQueueManager,
+} = require("mixpanel-react-native/javascript/mixpanel-queue");
+
+const {
+  MixpanelPersistent,
+} = require("mixpanel-react-native/javascript/mixpanel-persistent");
+
+const {
+  MixpanelNetwork,
+} = require("mixpanel-react-native/javascript/mixpanel-network");
+
+describe("MixpanelQueueManager", () => {
+  let mixpanelPersistent;
+  const token = "test-token";
+  const type = MixpanelType.EVENTS;
+  const data = { event: "testEvent" };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.isolateModules(() => {
+      MixpanelPersistent.getInstance().getOptedOut.mockReturnValue(false);
+      MixpanelQueueManager.getQueue.mockReturnValue([]);
+    });
+  });
+
+  it("initializes the Mixpanel queue for events", async () => {
+    await MixpanelCore().initialize(token);
+    expect(MixpanelQueueManager.initialize).toHaveBeenCalledWith(
+      token,
+      expect.any(String)
+    );
+  });
+
+  it("adds data to the Mixpanel queue if not opted out and data is valid", async () => {
+    MixpanelPersistent.getInstance().getOptedOut.mockReturnValueOnce(false);
+    await MixpanelCore().addToMixpanelQueue(token, type, data);
+    expect(MixpanelQueueManager.enqueue).toHaveBeenCalledWith(
+      token,
+      type,
+      expect.any(Object)
+    );
+  });
+
+  it("do not add data to the Mixpanel queue if opted out", async () => {
+    MixpanelPersistent.getInstance().getOptedOut.mockReturnValueOnce(true);
+    await MixpanelCore().addToMixpanelQueue(token, type, data);
+    expect(MixpanelQueueManager.enqueue).toHaveBeenCalledTimes(0);
+  });
+
+  it("do not add data to the Mixpanel queue if data is not valid", async () => {
+    MixpanelPersistent.getInstance().getOptedOut.mockReturnValueOnce(false);
+    // mock JSON.stringify to throw an error
+    jest.spyOn(JSON, "stringify").mockImplementationOnce(() => {
+      throw new Error("mock error");
+    });
+    await MixpanelCore().addToMixpanelQueue(token, type, data);
+    expect(MixpanelQueueManager.enqueue).toHaveBeenCalledTimes(0);
+  });
+
+  it("flushes the queue", async () => {
+    MixpanelPersistent.getInstance().getOptedOut.mockReturnValueOnce(false);
+    MixpanelQueueManager.getQueue.mockImplementation((token, type) => {
+      return [data];
+    });
+    await MixpanelCore().flush(token);
+    expect(MixpanelNetwork.sendRequest).toHaveBeenCalled();
+  });
+
+  it("do not flush the queue if opted out", async () => {
+    MixpanelPersistent.getInstance().getOptedOut.mockReturnValueOnce(true);
+    MixpanelQueueManager.getQueue.mockImplementation((token, type) => {
+      return [data];
+    });
+    await MixpanelCore().flush(token);
+    expect(MixpanelNetwork.sendRequest).toHaveBeenCalledTimes(0);
+  });
+
+  it("not flushes the queue if there is no data", async () => {
+    MixpanelPersistent.getInstance().getOptedOut.mockReturnValueOnce(false);
+    MixpanelQueueManager.getQueue.mockImplementation((token, type) => {
+      return [];
+    });
+    await MixpanelCore().flush(token);
+    expect(MixpanelNetwork.sendRequest).toHaveBeenCalledTimes(0);
+  });
+});