Example using ContextAPI and functional components

[AlejandroGutierrezB]

Hey guys I am using your product but I implemented it using the context API and functional components. So I thought I could share the example as it could be helpful for other devs, perhaps it could be added to the docs.

https://dev.to/alejandrogutierrezb/mixpanel-in-react-native-with-context-api-47a3

Hope it is helpful :)

[jessicarobins]

Thanks for this! I did think it was pretty weird this repo's example app has the same copy-pasted code in every component

[zihejia]

Thanks @AlejandroGutierrezB ! We will update our sample app according to your suggestion.

[rodrigocoliveira]

Thank you very much @AlejandroGutierrezB. It seems a pretty good implementation, but I can't make it to work. I have been trying to log from the ios localhost to the Mixpanel, the code do not throw any error but when I go to Live View of event in Mixpanel interface nothing is being shown. Is there any chance for you to provide the source code of your implementation? Or maybe some way I can check that Mixpanel will receive the event in production?

[myoganugraha]

thank you @AlejandroGutierrezB, it help us a lot,

i've following your step, but i got null when access indentify or people.set function

step to reproduce

mixpanel.js on root folder

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

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(token')
      setMixpanel(initializedMixpanel)
      console.log('init mixpanel success')
    }

    initMixpanel()
  }, [])

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

i have define the mixpanel provider on babelrc

app.js

import { MixpanelProvider } from 'mixpanel'

return (

    <MixpanelProvider>
      <NetworkProvider>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <RootScreen />
          </PersistGate>
        </Provider>
      </NetworkProvider>
    </MixpanelProvider>
  )

homescreen.js

import { MixpanelContext } from 'mixpanel'

const HomeContainer = ([]) => {
    var mixpanel = useContext(MixpanelContext

   useEffect(()=> {
    someFunction()
   },[])
 }

  someFunction() {
   mixpanel.identify(user.Id)
  }
}

result : https://ibb.co/GTK5K22

thanks

[seftonmonk]

Anyone manage to get this working with hooks? seems like a dead end.

[imoby]

@seftonmonk @myoganugraha I was able to get this to work after tweaking Alejandro's a bit especially to include typescript support. I'll post it sometime today

[chuckrea]

Love this implementation @AlejandroGutierrezB! However, similar to @rodrigocoliveira I don't see any of my track() events actually show up in Mixpanel. Is there any piece in Xcode and/or other config/setup steps that the Mixpanel docs don't mention? Running my app locally in Debug mode. 🤷‍♂️

[imoby]

Here's a typescript version of this that that I rewrote that worked successfully for me: https://gist.github.com/imoby/900a501747cee63364e6f3552be0cd50

Just wrap your app around this. This could be made better by creating a MixpanelProvider where you can just do something like const mixpanel = useMixpanelProvider() instead of doing the following but I'll update the gist when I can. Just wanted to get this out since I already delayed it:

const { mixpanel } = useContext(MixpanelContext);

[josholdham]

Thanks for this work everyone.

@myoganugraha - when you say you have to define the mixpanel provider in babelrc, could you please show what you added here? I'm getting issues with running this in my Jest tests and think it may be related to this. Thanks!

[zihejia]

Thanks everyone for bringing this up and contributing examples and ideas. Now we have an official example using ContextAPI: https://github.com/mixpanel/mixpanel-react-native/tree/master/Samples/ContextAPIMixpanel. I'm closing this one now, feel free to reopen if there is any issue.