Question

How to create a sample expo app and implement Mixpanel on it

  • 29 April 2019
  • 4 replies
  • 983 views

Userlevel 1
Badge

I've noticed a few questions about React Native in this forum and figured it might be helpful if I write up a post about my experience. Please let me know if it is helpful and chime in with your own experience/ suggestions!

React Native is a JavaScript library that allows developers to build native apps for iOS, Android, and the Universal Windows Platform without having to touch native code for any particular platform. This means there is less of a need to recompile due to a feature called “hot reloading” that allows an app to effectively be reloaded in much the same way as reloading a web app.

React Native requires less development overhead to engineer an app to work across the multitude of platforms in the marketplace compared to working within native code.

There are multiple options you can take to install Mixpanel in a React Native app, but I decided to implement Mixpanel in an Expo app.


Getting Started

1. Node.js, the runtime environment on which React Native is based, needs to be installed on your machine. I like to use the Homebrew package manager.

  1. Install Homebrew by entering the following command in the terminal of your choice.
    /usr/bin/ruby -e "$(curl -fsSL "https://raw.githubusercontent.com/Homebrew/install/master/install"
  2. Then run "brew update"" to make sure Homebrew is up to date.
  3. Lastly, I'd also recommended that you run "brew doctor" to make sure your system is ready to brew.
  4. Next, run "brew install node" to install Node.
  5. To verify Node and Node Package Manager (npm) have been successfully installed, run "node -v" and then "npm -v", pressing the enter key after each. You should receive results that look something like v9.5.0 and 5.6.0 for each respective command.


2. Now that we have Node installed, the next step is to install Expo. Expo is a free, open-source toolchain that enables speedy iteration and cross-platform development so developers can create native apps using nothing but JavaScript. Also included in this series of steps will be the creation of a template Expo-based app.

  1. First, you’ll need to create an Expo account at this URL.
  2. Diving back into the terminal, run "npm install exp --global" to install Expo.
  3. Next, create an expo project by entering "exp init my-new-project".
  4. Switch to the project directory by entering "cd my-new-project".
  5. Enter "exp start" to preview your newly minted Expo project.
  6. The final step to deploy an app using Expo is to install the Expo app from the App Store or Play Store.

3. The final set of preparations is the installation of the Mixpanel wrapper built to work with an app built using Expo.

  1. In the terminal window where you’ve been working so far, the prompt should still indicate you’re within the directory where your project was created. If this isn’t true, please change to the appropriate directory. Enter the command "npm install expo-mixpanel-analytics --save".
  2. The final step before it’s possible to begin tracking is to import the wrapper and create an instance of the Mixpanel object. In the top most folder of your project directory, you should find a file called App.js. Open this file in the text editor of your choice and add the following two lines after the existing import statements.

    import ExpoMixpanelAnalytics from 'expo-mixpanel-analytics';
    const analytics = new ExpoMixpanelAnalytics('YOUR_PROJECT_TOKEN')

Now you can start tracking events, creating user profiles and including all types of property values.

Sending Data to Mixpanel

Once the set-up is done you can begin to send events, profiles, and properties to Mixpanel.

Sending events

analytics.track("Signed Up", { "Referred By": "Friend" });

Managing user identity

analytics.identify("13793");

Storing user profiles

analytics.people_set({

"$first_name": "Joe",

"$last_name": "Doe",

"$email": "joe.doe@example.com",

"$created": "2013-04-01T13:20:00",

"$phone": "4805551212",

"Address": "1313 Mockingbird Lane",

"Birthday": "1948-01-01"

});

Limitations and Caveats

As with any tool, these wrappers inherently include sacrifices and concessions. For example, the Expo-based wrapper doesn’t include the ability to set super properties, collect $transaction data, or deliver in-app messages. The author of the Expo-based wrapper has not included this functionality.

If you have successfully integrated with React Native feel free to chime in on this thread!



4 replies

Userlevel 2
Badge

@toddg thank you so much for sharing!!


Userlevel 5
Badge +3

Hi @toddg,

The good news is that this is something that we are currently working on!

If you haven't already, please submit an Idea with the specific features or reasons why a Mixpanel React Native SDK would help you. From there we can submit a custom Product Gap on your behalf — we love hearing all of the details about your specific use-cases.

In the meantime, these are our recommendations for opensource versions until ours is ready:

- https://github.com/davodesign84/react-native-mixpanel

- https://github.com/lorenc-tomasz/react-native-mixpanel


Hi @cherise,

 

I am aware that mixpanel-react-native exists for react native projects.

I was wondering whether the Mixpanel team is planning on creating its own React Native Expo SDK?

 

Thanks

any updates on the above comment @cherise 

Reply


Mixpanel