Integarte Analytics library locally

Step 1: Clone the Repository

Open your terminal or command prompt and run the following command to clone the repository:

git clone https://github.com/FAB-Builder/reactnative-analytics.git

After cloning, navigate into the project directory:

cd react-native-analytics

Step 2: Install Dependencies

To install the necessary dependencies, run:

npm install

Step 3: Resolve Node Modules Paths with Metro

React Native doesn't support symlinks by default, but Metro bundler allows you to resolve third-party dependencies if they are installed outside of your project folder.

Open the metro.config.js file in the root of your React Native project. Add the nodeModulesPaths property inside the resolver configuration, like this:

const packagePath = '/Users/mac/my-own-packages/my-awesome-package';

module.exports = {
  resolver: {
    nodeModulesPaths: [packagePath],
    // other resolver options...
  },
  // other Metro options...
};

Step 4: Link React and React Native in the Library

Now, you need to manually link react and react-native from the project in the library:

Navigate to the project folder, then go to node_modules/react, and run:

npm link

Next, go to node_modules/react-native and run:

npm link

Than in your react-native-analyics library folder, run:

npm link react react-native

Step 5: Link the Library to Your App

Navigate to the library folder (react-native-analyics) and run:

npm link

Then, in your app, run:

npm link react-native-analyics

Step 6: Run Your App

Finally, run your app with the following command:

npx react-native start --reset-cache

Components in the Library:

The library provides the following components that you can import and use in your project:

import { init, trace, ScreenShotContainer} from "react-native-analytics"

Usage

To use this library, you'll need to initialize it with your unique application ID. The init function must be called before using any other features of the library.

init({ applicationId: yourApplicationId })

The init function configures the library with the provided applicationId. This step ensures that the library is properly linked to your application and ready for use.

Parameters

• applicationId (string): Your application's unique identifier. This ID is required for configuration and will ensure that your application is properly recognized and connected to the library.

// Initialize the library with your unique application ID
init({ applicationId: "12345-abcde-67890-fghij" });

trace({ fromScreen, toScreen, action, userId, Params })

Tracks user behavior and flow within the app, including screen transitions, actions, and additional context like user ID and optional parameters.

Example

trace({
  fromScreen: '/',
  toScreen: '/home',
  action: 'app open',
  userId: '1234',
  params: {}, // optional
});

ScreenShotContainer({ children })

Wrap the entire app or specific screens to capture and save screenshots for analytics purposes, particularly to track and store visual data of each screen.

Parameters

• children (React component or JSX): The content or screens of your app that you want to capture and save as screenshots.

Example

import { ScreenShotContainer } from 'react-native-analytics';

function App() {
  return (
    <ScreenShotContainer>
      <YourMainScreen />
    </ScreenShotContainer>
  );
}

For ScrollView Screen

If your screen is scrollable, wrap the ScreenShotContainer inside the ScrollView to capture the full view of the screen, including the content that may not be visible initially (e.g., off-screen content due to scrolling).

Example

import { ScrollView } from 'react-native';
import { ScreenShotContainer } from 'react-native-analytics';

function App() {
  return (
    <ScrollView>
      <ScreenShotContainer>
        <YourMainScreen />
      </ScreenShotContainer>
    </ScrollView>
  );
}

#### Example code

`````java script

###App.tsx

import React, { useEffect } from 'react'
import { init, trace } from "react-native-analytics"
import { ScreenShotContainer } from 'react-native-analytics';
import Profile from './Src/Profile';

const App = () => {

  useEffect(() => {
    (async () => {
      await init({ applicationId: '681da6a88f20e204be6efe79' })
    })();
  }, []);
  return (
    <ScreenShotContainer>
      <Profile />
    </ScreenShotContainer>
  )
}

export default App

###Profile.tsx

import { View, Text, Button } from 'react-native'
import { trace } from "react-native-analytics"
import React from 'react'

const Profile = () => {
    const calltracing = async () =>{
        await trace({fromScreen:'/home' ,toScreen: '/',action: 'app open',userId: '1234',params: {}});
    }
  return (
    <View style={{flex:1,backgroundColor:"#fff",justifyContent:'center',alignItems:'center'}}>
      <Text style={{color:"#000"}}>page1234</Text>
      <Button
       title='Press'
       onPress={calltracing}
      />
    </View>
  )
}

export default Profile