Mixpanel in React Native with Context API

Alejandro Gutierrez — Thu, 07 Jan 2021 12:18:51 +0000

I recently came across Mixpanel, as a nice analytics service to quickly implement in your projects regardless the stack you use.

However, their RN example is using classes and I felt like their app example was also a bit confusing and not quite DRY, so I implemented using the more modern ContextAPI and Functional Components. And I felt like this was worth sharing with the community and even the mixpanel team so they can add it to their docs.

1. Lets create the Consumer and Provider

import React from 'react';
import {Mixpanel} from 'mixpanel-react-native';

export const MixpanelContext = React.createContext();

export const MixpanelProvider = ({children}) => {
  const [mixpanel, setMixpanel] = React.useState(null);

  React.useEffect(() => {
    const initMixpanel = async () => {
      const initializedMixpanel = await Mixpanel.init('your token');
      initializedMixpanel.serverURL = 'https://api-eu.mixpanel.com'; // if needed
      setMixpanel(initializedMixpanel);
    };

    initMixpanel();
  }, []);

  return <MixpanelContext.Provider value={mixpanel}>{children}</MixpanelContext.Provider>;
};

2. Wrap your App Component

So that you can access the context globally.

import React from 'react';
import {MixpanelProvider} from 'path.../AnalyticsService';

const App = () => {
  return (
          <MixpanelProvider>
            {children}
          </MixpanelProvider>
  );
};

export default App;

3. Consume your context in any Component

import React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {MixpanelContext} from 'path.../AnalyticsService';

//simple example to get the point, customize it however you want

export const SomeComponent = () => {
  const mixpanel = React.useContext(MixpanelContext);
  return (
    <View>
          <TouchableOpacity onPress={() => mixpanel.track('Testing mixpanel')}>
            <Text>Test mixpanel</Text>
          </TouchableOpacity>
        )}
    </View>
  );
};

Hope it was helpful. I didn't went deep into the nits&grits as i felt like react docs are well explained and you can find many brilliant and free videos on the topic as well.

Nevertheless, let me know if you have any doubts.
You can also contact me at https://www.linkedin.com/in/alejandrogutierrezb/

Make your own Create-React-App (the quick and easy way)

Alejandro Gutierrez — Wed, 17 Jun 2020 17:59:39 +0000

Make a Create-React-App custom template

I am sure that your are already sick of dealing with erasing all the boilerplate every time you start a new react project with CRA. While dealing with Webpack could be valuable learning journey, it is at the same time a bit intimidating and for sure more time consuming.

Luckily, for us, CRA supports templating from react-scripts@3.3.0 and higher. And in this article I am going to show you how to create your own and publish it at npm, so anyone can use it from anywhere.

Creating the template

We are going to use the main CRA project as foundations, so lets start by:

npx create-react-app my-template

You can use the yarn equivalent, and name the project however you prefer.

Now we have to make a couple modifications to the project structure:

❌ Erase the package-lock.json
❌ Erase the node_modules
⏹ Leave the package.json ( we will modify it afterwards)
📁 Create a template folder at root level
⤴️ Move the rest in the template folder
✏️ Rename .gitignore to gitignor with NO DOT (".")
📄 Create a README.md file at root level ( for npm)
📄 Create a template.json file at root level

The project file structure should look like this:

Replace the package.json content with this:

{
  "name": "<cra-template-Yourtemplatename>",
  "version": "1.0.0",
  "keywords": [
    "react",
    "create-react-app",
    "template"
  ],
  "description": "<Your template description>",
    "main": "template.json",
  "license": "MIT",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "template",
    "template.json"
  ]
}

After that, dependencies will be added to the template.json file:

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.9.0",
      "@testing-library/react": "^10.2.1",
      "@testing-library/user-event": "^11.3.2",
    }
  }
}

These are the official cra-template dependencies, but you can always add more.

Now is time to make it to your liking! Erase ServiceWorkers, rearrange folder structure, add .prettierrc config file... you name it.

I created this simple example, just erasing all the boilerplate for the App file and adding a components folder. Check it out here.

Publishing the template in npm

To publish an npm package you first need an account. Then make sure you are in the project directory and run the following command:

nbp-template git:(master) ✗ npm login

Type in your username, password and email. And you are ready to publish.

npm publish

Using the template

This is the easiest part, simply run:

npx create-react-app my-app --template [template-name]

//try my own template I mentioned above

npx create-react-app my-app --template nbp

Hope you enjoyed the article and make your own custom templates. It is my first article and also the first time I publish an npm package. So feedback in both will be well appreciated.
I am also currently looking for a front-end engineer position in Barcelona or remote, hit me up in linkedin, if you have an interesting project.

Additional Resources:

https://create-react-app.dev/docs/custom-templates/

https://www.npmjs.com/package/cra-template

DEV Community: Alejandro Gutierrez