ReactNative Plugin Integration

There are two ways to integrate the RN plugin: Remote and Local.

• Remote Integration

yarn add git+https://gitlab.bonree.com/BonreeSDK_TAPM/react-native-plugin.git

Or directly introduce the plugin library in the dependencies of package.json, then execute npm install or yarn install to load the dependency library:

"@bonree/react-native-plugin": "git+https://gitlab.bonree.com/BonreeSDK_TAPM/react-native-plugin.git"

• Local Integration

Drag the entire @bonree folder into the project's node_modules directory.

If the iOS project uses the project under the ios directory of the RN project, navigate to the ios path and execute pod install to integrate the iOS collection SDK.

If the iOS project separately embeds the mobile SDK, you need to drag the BonreeRNBridge.h and BonreeRNBridge.m files from the react-native-plugin/ios directory under the RN plugin directory into the project, and correct the SDK header file references in the .m file.

Plugin Configuration

Configure the Transformer in the system file:

If the React Native version is greater than or equal to 0.59, add transformer.babelTransformerPath to the transformer in the root directory's metro.config.js.

If the React Native version is 0.57 or 0.58, add transformer.babelTransformerPath to the transformer in the root directory's rn-cli.config.js.

Example:

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve(
      '@bonree/react-native-plugin/lib/bonree-transformer',
    ),
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

If the React Native version is less than 0.57, add getTransformModulePath to the transformer in the root directory's rn-cli.config.js (create it if it doesn't exist). Example:

module.exports = {
  getTransformModulePath() {
    return require.resolve('@bonree/react-native-plugin/lib/bonree-transformer');
  },
  getSourceExts() {
    return ['js'];
  }
}

Note: If the project uses react-native bundle for packaging and has configured the –config parameter, please add getTransformModulePath or transformer.babelTransformerPath configuration information in the configured js file.

The RN plugin supports custom configuration information. You need to create a file bonree.config.js in the project's root directory. The content template is as follows:

module.exports = {
    react: {
        /**
         * Debug Logs
         */
        debug: false,

        /**
         * Allows you to filter the instrumentation for touch events, refresh events and picker events in certain files
         * True = Will be instrumented
         */
        instrument: (filename) => {
            return true;
        },


        lifecycle: {
            /**
             * Monitor the navigation service switch. The default value is false
             */
            listenNavigation: true,

            /**
             * The data collection rules of component life cycle can be set to specify the fuzzy matching of component name
             */
            componentName: null,
        },
    }
};

react-navigation Library Support

react-navigation@6.x Version

Supports react-navigation library version 6.x. You need to configure event listeners for the RN plugin in the navigation configuration:

onReady={() => {Bonree.reportRouterData(navigationRef) }}
onStateChange={() => {Bonree.reportRouterData(navigationRef)}}

Example:

···
import { NavigationContainer ,useNavigationContainerRef } from '@react-navigation/native';
import { Bonree } from "@bonree/react-native-plugin";
··· 
···
export default function App(){
    let navigationRef = useNavigationContainerRef()
    return (
        <NavigationContainer ref={navigationRef}
            onReady={() => {Bonree.reportRouterData(navigationRef) }}
            onStateChange={() => {Bonree.reportRouterData(navigationRef)}}
        >
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="About" component={AboutScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
} 

react-navigation@5.x Version

Supports react-navigation library version 5.x. You need to configure event listeners for the RN plugin in the navigation configuration:

useEffect(()=>{
    Bonree.reportRouterDataV5(navigationRef)
},[]);

Example:

import { Bonree } from "@bonree/react-native-plugin";

export default function App(){
  const navigationRef = React.useRef(null);
  // The following code is for data acquisition and can be adjusted appropriately
  useEffect(()=>{
      Bonree.reportRouterDataV5(navigationRef)
  },[]);
  return (<NavigationContainer ref={navigationRef}>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>)
}

react-navigation 2.10.x Version

Supports react-navigation library version 2.10.x. Example:

import {Bonree} from "@bonree/react-native-plugin";
<AppContainer
    onNavigationStateChange={Bonree.reportRouterDataV2}
/>

// You can also use defaultProps
AppContainer.defaultProps={
    onNavigationStateChange:Bonree.reportRouterDataV2
}