How to correctly use react-native-clarity in a React Native app?

Question

I'm trying to integrate react-native-clarity into my React Native app to track user analytics. I have followed the installation steps mentioned in the documentation and successfully linked the package.

However, I'm uncertain about where exactly to initialize react-native-clarity in my app's codebase. Should I add the initialization code in the App.js file or somewhere else? I'm looking for guidance on the best practice for integrating react-native-clarity into a React Native app.

Here's the current setup in my App.js file:

import React, { useEffect } from 'react';
import { initialize } from 'react-native-clarity';
import { setCustomUserId } from 'react-native-clarity';
import { getCurrentSessionId } from 'react-native-clarity';

const App = () => {
    useEffect(() => {
        initialize("<ProjectId>");

        // Set custom user id.
        setCustomUserId("[email protected]");
    }, []);

    return (
        // JSX 
    );
};

Is it appropriate to initialize react-native-clarity in the App.js file, or should I consider a different approach? `

Answer 1

import React, {FC} from 'react';
import CodeHub from './CodeHub';
import { initialize } from 'react-native-clarity';

// Initialize Clarity.
initialize("<ProjectID>");

const App: FC = () => {
  return <CodeHub />;
};

export default App;

Answer 2

@ionman, You are on the right track. I also used Microsoft Clarity in react-native expo project. In react-native-cli, It is supporting above than 0.64. And in the Expo project, We can only test after building the app using eas build.

I imported the package into the app.json file

import { initialize } from "react-native-clarity";

After that, I just call it in the useEffect.

useEffect(() => {
   initialize("Your project Id here");
}, []);

Thanks!