This repository includes the following :
- HCL Discover React Native SDK code that can be used by NPM Package.
- React Native Developer tools specific to HCL Discover React Native SDK such as Application Session Replay
- Example that shows how to use HCL Discover React Native SDK
More details will be added here about installation, integration.
- 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.
- If you use yarn, cd to your project folder; 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
- This is for MacOS/iOS only. Not needed for windows dev setup. Since npm auto linking is unreliable, do the following to install pods, just to be sure
- This step may reset a few settings in your Info.plist. For example 'NSAppTransportSecurity' i.e. 'App Transport Security Settings'. Kindly make sure they are being set to the correct values as needed by your application.
cd ios
rm -rf build
pod install
cd ..
- This is for MacOS/iOS only. Not needed for windows dev setup. After running
pod installabove, if you do not see react-native-sha256 pod being installed, you may need to add following line to your Podfile; and after adding the following line re-run above commands in step 3 again.
IMPORTANT : Please note when you rm -rf build and then pod install For your iOS project Info.plist file is regenerated. That may reset your App Transport Security Settings i.e. NSAppTransportSecurity and you will have to put back your custom settings in there.
pod 'RNSha256', :path => '../node_modules/react-native-sha256'
- If you use yarn
yarn upgrade react-native-hcl-discover
- Or if you use npm
npm update react-native-hcl-discover
- This is for MacOS/iOS only. Not needed for windows dev setup. Install pods
cd ios
rm -rf build
pod install
cd ..
- 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 - 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 */Kindly reach out to HCL Discover SDK Team. Details here
Apache License Version 2.0
Kindly read the License Text