mixpanel-react-native/Samples/MixpanelDemo/screens/GDPRScreen.js

Official React Native Tracking Library for Mixpanel Analytics

import React from 'react';
import {Text, TouchableOpacity, StyleSheet, View, ScrollView} from 'react-native';
import {MixpanelInstance} from '../Analytics';

export default class GDPRScreen extends React.Component {

    constructor(props) {
        super(props);
        this.mixpanel = MixpanelInstance;
    }

    /**
      Identify the user uniquely by providing the user distinctId.
     */
    optIn = () => {
        this.mixpanel.optInTracking(this.mixpanel.getDistinctId());
    }

    optOut = () => {
        this.mixpanel.optOutTracking();
    }

    render() {
        return (
            <ScrollView>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <TouchableOpacity style={styles.button} onPress={this.optIn}>
                        <Text style={styles.buttonText}>Opt In</Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <TouchableOpacity style={styles.button} onPress={this.optOut}>
                        <Text style={styles.buttonText}>Opt Out</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,
    }
})