Discover React Native SDK

Prerequisites

You can access the repository using the following link → Repository.

HCL Discover React Native package assumes the React Native Application uses NavigationContainer, createNativeStackNavigator and NativeStackScreenProps from @react-navigation/native to setup navigation between multiple screens of the application.
HCL Discover React Native package uses react-native-sha256 to create various hashes needed for sessionization.
HCL Discover React Native package uses react-native-device-info to collect various device details.
react-native-sha256 and react-native-device-info will be added by following installation steps.

Installation

If you use yarn, change directory to your project folder and copy-and-paste the following line in terminal window:
```
yarn add react-native-sha256 react-native-device-info react-native-hcl-discover
```

Or if you use npm:

npm install react-native-sha256 react-native-device-info react-native-hcl-discover

For MacOS / iOS only: Since npm auto linking is unreliable, perform the following step just for verification:
1. This step may reset a few settings in your Info.plist. For example, NSAppTransportSecurity that is App Transport Security Settings. Ensure that the correct values as required by the application is set.
```
cd ios
rm -rf build
pod install
cd ..
```
For MacOS / iOS only. After running pod install, if the react-native-sha256 pod is not being installed, add the following line to your Podfile;and after adding the following line re-run above commands in step 3 again.

Important: When you execute rm -rf build and pod install, project Info.plist file is regenerated. It may reset your App Transport Security Settings, that is NSAppTransportSecurity and you have to reconfigure your custom settings in there.
```
pod 'RNSha256', :path => '../node_modules/react-native-sha256'
```

Updation

If you use yarn:
```
yarn upgrade react-native-hcl-discover
```
Or if you use npm:
```
npm update react-native-hcl-discover
```
For MacOS / iOS only: Install pods
```
cd ios
rm -rf build
pod install
cd ..
```

Usage

Copy and paste the following line in your App.tsx / App.js file:

/* Import from  react-native-hcl-discover */
import {
  hclDiscoverReactNative,
  HCLDiscoverReactNativeContainer,
} from "react-native-hcl-discover";

As mentioned in prerequisites, for screen change tracking, HCL Discover React Native SDK assumes that your application is already setup with react navigation.

    /* Your app is expected to create instance from createNativeStackNavigator needed to create Navigation Stack later */
const Stack = createNativeStackNavigator<RootStackParamList>();

Your app may already be using NativeStackScreenProps to create Screen Props and Screens as in the example below:

/* Your app is expected to create Screens with NativeStackScreenProps. For example - */
type Screen1Props = NativeStackScreenProps<RootStackParamList, "Screen1">;
const Screen1: React.FC<Screen1Props> = (props) => {
  const handleGoToNextScreenFromScreen1 = () => {
    props.navigation.push("Screen2");
  };
  return (
    <View>
      <Screen1View
        handleGoToNextScreen={handleGoToNextScreenFromScreen1}
      ></Screen1View>
    </View>
  );
};

    /* Start of your app function */
function App() {

Copy and paste the following line in your App function:

/* At the beginning of your app function */
/* Create a navigation reference; then pass it on to NavigationContainer as a ref */
const navigationRef = React.useRef();
/* Rest of your app variables and initializers */

Copy and paste the following code block in your App function. This invokes start method of the SDK. Edit screen settings as needed.

/* Inside your app function */
/* Configure your screens and invoke start method on hclDiscoverReactNative */
useEffect(() => {
  /* Initializer */
  var options = {
    postMessageUrl: "https://slicendice.vercel.app/listener",
    killSwitchUrl: "http://localhost:3001/killOrLive",
    regexList: [
      {
        regex: /(?:\d{4}[ -]?){4}/gm,
        replace: "**** **** **** ****",
        name: "visa card",
      },
      { regex: /^\d{3}-?\d{2}-?\d{4}$/, replace: "*** ** ****", name: "ssn" },
      {
        regex:
          /^(?:[Pp][Oo]\s[Bb][Oo][Xx]|[0-9]+)\s(?:[0-9A-Za-z\.'#]|[^\S\r\n])+/,
        replace: "xx xxx xx",
        name: "address line 1",
      },
      {
        regex: /^\s*\S+(?:\s+\S+){2}/,
        replace: "xx xxx",
        name: "address line 1, 2",
      },
      {
        regex: /([a-zA-Z]+(?:\s+[a-zA-Z]+)?)\s+(\d{5}(?:[\-]\d{4})?)/,
        replace: "xxxx xx xxxxx",
        name: "city, state, zip",
      },
      {
        regex: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
        replace: "xx@xx.xxx",
        name: "email",
      },
    ],
    screens: {
      Home: {
        pause: false,
        takeScreenShot: true,
        blurScreenShot: 0,
      },
      Screen1: {
        pause: false,
        takeScreenShot: true,
        blurScreenShot: 0,
      },
      Screen2: {
        pause: false,
        takeScreenShot: true,
        blurScreenShot: 5,
      },
      Screen3: {
        pause: false,
        takeScreenShot: true,
        blurScreenShot: 0,
      },
    },
  };
  hclDiscoverReactNative.start(options).then((value) => {
    console.debug("The hcl discover session id is : ", value);

    /* Invoke First Screen Change event log as first screen was invoked well before HCL Discover React Native SDK booted */
    hclDiscoverReactNative
      .logAppContext(routeNameRef?.current ? routeNameRef?.current : "Home", "")
      .then(
        (resolve) => {},
        (reject) => {}
      );
  });
});

Your App's HTML code should be approximately as follows:

    /* HTML for your app function to return should resemble .. */
    /* Wrap  NavigationContainer inside HCLDiscoverReactNativeContainer and setup ref={navigationRef} */
	return (
		<HCLDiscoverReactNativeContainer>
		<NavigationContainer ref={navigationRef} >
			<Stack.Navigator>
				{your application screens here - refer to "@react-navigation/native" documentation}
				<Stack.Screen name='Screen1' component={Screen1} />
				<Stack.Screen name='Screen2' component={Screen2} options={{ title: 'Screen Two' }}/>
				<Stack.Screen name='Screen3' component={Screen3} />
			</Stack.Navigator>
		</NavigationContainer>
		</HCLDiscoverReactNativeContainer>
	);

} /* End of your app function */