mixpanel-react-native 1.3.4 → 1.3.5

package/Samples/MixpanelDemo/screens/GroupScreen.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import {Text, TouchableOpacity, StyleSheet, View, ScrollView} from 'react-native';
+import {MixpanelInstance} from '../Analytics';
+
+export default class GroupScreen extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.mixpanel = MixpanelInstance;
+        this.group = this.mixpanel.getGroup("company_id", 12345);
+    }
+
+    setProperty = () => {
+        this.group.set("prop_key", "prop_value");
+    }
+
+    setPropertyOnce = () => {
+        this.group.setOnce("prop_key", "prop_value");
+    }
+
+    unsetProperty = () => {
+        this.group.unset("aaa");
+    }
+
+    removeProperty = () => {
+        this.group.remove("prop_key", "334");
+    }
+
+    unionProperty = () => {
+        this.group.union("prop_key", ["prop_value_a", "prop_value_b"]);
+    }
+
+    deleteGroup = () => {
+        this.mixpanel.deleteGroup("company_id", 12345);
+    }
+  
+    setGroup = () => {
+        this.mixpanel.setGroup("company_id", 12345);
+    }
+
+    addGroup = () => {
+        this.mixpanel.addGroup("company_id", 111);
+    }
+
+    removeGroup = () => {
+        this.mixpanel.removeGroup("company_id", 323);
+    }
+
+    trackWithGroups = () => {
+        this.mixpanel.trackWithGroups("tracked with groups", {"a": 1, "b": 2.3}, {"company_id": "Mixpanel"});
+    }
+
+    flush = () => {
+        this.mixpanel.flush();
+    }
+
+    render() {
+        return (
+            <ScrollView>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.setProperty}>
+                        <Text style={styles.buttonText}>Set One Property</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.setPropertyOnce}>
+                        <Text style={styles.buttonText}>Set Properties Once</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.unsetProperty}>
+                        <Text style={styles.buttonText}>Unset Property</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.removeProperty}>
+                        <Text style={styles.buttonText}>Remove Property</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.unionProperty}>
+                        <Text style={styles.buttonText}>Union Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.deleteGroup}>
+                        <Text style={styles.buttonText}>Delete Group</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.setGroup}>
+                        <Text style={styles.buttonText}>Set Group</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.addGroup}>
+                        <Text style={styles.buttonText}>Add Group</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.removeGroup}>
+                        <Text style={styles.buttonText}>Remove Group</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.trackWithGroups}>
+                        <Text style={styles.buttonText}>Track with Groups</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.flush}>
+                        <Text style={styles.buttonText}>Flush</Text>
+                    </TouchableOpacity>
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: '#1E90FF',
+        width: '100%',
+        alignItems: 'center',
+        marginVertical: 10,
+        paddingVertical: 10,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#ffffff',
+        textAlign: "center"
+    },
+    touchableOpacity: {
+        backgroundColor: '#1E90FF',
+        borderRadius: 25,
+        width: '100%',
+        alignItems: 'center',
+        marginVertical: 10,
+        paddingVertical: 10,
+    }
+})

package/Samples/MixpanelDemo/screens/Home.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import {StyleSheet, SafeAreaView, View, Button, ScrollView} from 'react-native';
+
+
+const Separator = () => (
+  <View style={styles.separator} />
+);
+
+class HomeScreen extends React.Component {
+    /**
+      Navigate screen to Welcome page
+    */
+    navigateEvent = () => {
+        this.props.navigation.navigate('Event');
+    }
+
+    navigateProfile = () => {
+      this.props.navigation.navigate('Profile');
+    }
+
+    navigateGDPR = () => {
+      this.props.navigation.navigate('GDPR');
+    }
+
+    navigateGroup = () => {
+      this.props.navigation.navigate('Group');
+    }
+
+    render() {
+        return (
+          <SafeAreaView>
+            <ScrollView >
+                <Separator />
+                <Button onPress={this.navigateEvent} title='Event' />
+                <Separator />
+                <Button onPress={this.navigateProfile} title='Profile' />
+                <Separator />
+                <Button onPress={this.navigateGDPR} title='GDPR' />
+                <Separator />
+                <Button onPress={this.navigateGroup} title='Group' />
+                <Separator />
+            </ScrollView>
+          </SafeAreaView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+  separator: {
+    marginVertical: 15,
+  }
+})
+
+export default HomeScreen;

package/Samples/MixpanelDemo/screens/ProfileScreen.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import {Text, TouchableOpacity, StyleSheet, View, ScrollView} from 'react-native';
+import {MixpanelInstance} from '../Analytics';
+
+export default class ProfileScreen extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.mixpanel = MixpanelInstance;
+    }
+    
+    createAlias = () => {
+        this.mixpanel.alias("New Alias", "testDistinctId");
+    }
+
+    reset = () => {
+        this.mixpanel.reset();
+    }
+
+    setProperty = () => {
+        this.mixpanel.getPeople().set({
+          "a": 1,
+          "b": 2.3,
+          "c": ["4", 5],
+        });
+    }
+
+    setOneProperty = () => {
+        this.mixpanel.getPeople().set("d", "yo");
+    }
+
+    setOnePropertyOnce = () => {
+        this.mixpanel.getPeople().setOnce("c", "just once");
+    }
+
+    unsetProperties = () => {
+        this.mixpanel.getPeople().unset("a");
+    }
+
+    incrementProperty = () => {
+        this.mixpanel.getPeople().increment("a", 1.2);
+    }
+    
+    removePropertyValue = () => {
+        this.mixpanel.getPeople().remove("c", 5);
+    }
+
+    appendProperties = () => {
+        this.mixpanel.getPeople().append("e", "Hello");
+    }
+
+    unionProperties = () => {
+        this.mixpanel.getPeople().union("a", ["goodbye", "hi"]);
+    }
+
+    trackChargeWithoutProperties = () => {
+        this.mixpanel.getPeople().trackCharge(22.8);
+    }
+
+    trackCharge = () => {
+        this.mixpanel.getPeople().trackCharge(12.8, {"sandwich": 1});
+    }
+
+    clearCharges = () => {
+        this.mixpanel.getPeople().clearCharges();
+    }
+
+    deleteUser = () => {
+        this.mixpanel.getPeople().deleteUser();
+    }
+
+    /**
+      Push all queued Mixpanel events and People Analytics changes to Mixpanel servers.
+    */
+    flush = () => {
+        this.mixpanel.flush();
+    }
+
+    render() {
+        return (
+            <ScrollView>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.createAlias}>
+                        <Text style={styles.buttonText}>Create Alias</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.reset}>
+                        <Text style={styles.buttonText}>Reset</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.setProperty}>
+                        <Text style={styles.buttonText}>Set Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.setOneProperty}>
+                        <Text style={styles.buttonText}>Set One Property</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.setOnePropertyOnce}>
+                        <Text style={styles.buttonText}>Set Properties Once</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.unsetProperties}>
+                        <Text style={styles.buttonText}>Unset Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.incrementProperty}>
+                        <Text style={styles.buttonText}>Increment Property</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.removePropertyValue}>
+                        <Text style={styles.buttonText}>Remove Property Value</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.appendProperties}>
+                        <Text style={styles.buttonText}>Append Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.unionProperties}>
+                        <Text style={styles.buttonText}>Union Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.trackChargeWithoutProperties}>
+                        <Text style={styles.buttonText}>Track Charge w/o Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.trackCharge}>
+                        <Text style={styles.buttonText}>Track Charge w Properties</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.clearCharges}>
+                        <Text style={styles.buttonText}>Clear Charges</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.deleteUser}>
+                        <Text style={styles.buttonText}>Delete User</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <TouchableOpacity style={styles.button} onPress={this.flush}>
+                        <Text style={styles.buttonText}>Flush</Text>
+                    </TouchableOpacity>
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: '#1E90FF',
+        width: '100%',
+        alignItems: 'center',
+        marginVertical: 10,
+        paddingVertical: 10,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#ffffff',
+        textAlign: "center"
+    },
+    touchableOpacity: {
+        backgroundColor: '#1E90FF',
+        borderRadius: 25,
+        width: '100%',
+        alignItems: 'center',
+        marginVertical: 10,
+        paddingVertical: 10,
+    }
+})