rn-whatfix v1.0.6

Integrate Whatfix with React Native App

Welcome to the official Whatfix React Native SDK. This article explains how to install and update the Whatfix React Native SDK in your project.

Prerequisites

Node.js Environment

For Android : - minSdkVersion - 19

For iOS : - iOS 8.0+, Objective-C / Swift 5.2

Step 1 - Getting started

To integrate Whatfix react package into your current project root, please run the below command from the terminal.

$ npm install rn-whatfix --save

####For iOS: Do

pod install

In case already installed:

pod update WhatFix

Step 2 - Initializing Whatfix

Import Whatfix module in your App.js file

import RNWhatfixModule from 'rn-whatfix';

Initialize Whatfix in your App.js file

RNWhatfixModule.initialize(<ent_name>, <ent_id>, <initial_screen_name>, segmentationOptions, initializeOptions);

Replace <ent_name> and <ent_id> with your Whatfix account ID. To get your ENT ID and ENT NAME, email us at support@whatfix.com or get in touch with your Account Manager.

Segmentation

Set screen for Segmentation using

RNWhatfixModule.setScreenId(<screenName>);

InitializeOptions (Optional)

let whatfixMap = {
      cdnHost: 'test.whatfix.com', // Add this option to set your custom host to serve content. Default is [cdn.whatfix.com](http://cdn.whatix.com/)
      isDebugEnabled: true, // Set this option to true in order to enable seeing the extra logs on Logcat
      isMultiTouchEnabled: true, // true to enable editor mode using multitouch
      isShakeEnabled: true, // true to enable editor mode using shake
      isEditorDisabled: false, // Set this option to true in order to disable invocation of editor
      isStartEditor: false, // Set this option to true in order to start editor directly
    };

###SegmentationOptions (Optional)

let segmentationMap = {
      loggedInUserId: 'john_doe', // Add this option to set the current user id for analytics
      loggedInUserRole: 'manager', // Add this option to set the current user role from your app
      language: 'fr', //Add this option to set the current user language preference
      customKeyValue: {
        key: 'value',
      },
    };
RNWhatfixModule.refreshWindowVariable(segmentationMap)

Setting other dev options:

Adding Margin to TaskList widget. Values in DP

RNWhatfixModule.setTLMargin(left, top, right, bottom);

Usage: React Navigation Version 5.x

For more details on React navigation versions

Initialization using react-navigation version 5 example

  useEffect(() => {
    RNWhatfixModule.initialize(<ent_name>, <ent_id>, <initial_screen_name>, null, null);
  }, []);

Supporting screen navigation using react-navigation version 5 complete example

import React, { useEffect } from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import RNWhatfixModule from 'rn-whatfix';

const Stack = createStackNavigator();

function App() {
  const routeNameRef = React.useRef();
  const navigationRef = React.useRef();

  useEffect(() => {
    RNWhatfixModule.initialize('<ent_name>, <ent_id>', navigationRef.current.getCurrentRoute().name, null, null);
  }, []);

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() =>
        (routeNameRef.current = navigationRef.current.getCurrentRoute().name)
      }
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name;
        if (previousRouteName !== currentRouteName) {
          RNWhatfixModule.setScreenId(currentRouteName);
        }
        routeNameRef.current = currentRouteName;
      }}>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

For examples on other versions please refer:

React Navigation Version 4.x

React Navigation Version 3.x

React Navigation Version 2.x

React Navigation Version 1.x