MixpanelContext.tsx

import React, { createContext, useMemo, useState } from 'react';
import { Mixpanel } from 'mixpanel-react-native';
import { mixpanelToken } from '../../app.json';

type MixpanelContextType = {
  mixpanel: Mixpanel | undefined;
};

const mixpanelContextDefault: MixpanelContextType | undefined = {
  mixpanel: undefined,
};
export const MixpanelContext = createContext<MixpanelContextType>(
  mixpanelContextDefault
);

export const MixpanelProvider = ({ children }) => {
  const [mixpanel, setMixpanel] = useState<Mixpanel | undefined>(
    mixpanelContextDefault.mixpanel
  );

  React.useEffect(() => {
    const initMixpanel = async () => {
      const initializedMixpanel = await Mixpanel.init(mixpanelToken);
      setMixpanel(initializedMixpanel);
    };

    initMixpanel();
  }, []);

  const value = useMemo(
    () => ({
      mixpanel,
    }),
    [mixpanel]
  );
  return (
    <MixpanelContext.Provider value={value}>
      {children}
    </MixpanelContext.Provider>
  );
};