Screen navigation example

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint && yarn typescript

README.md

@@ -95,6 +95,49 @@ To set the page name
 ```js
 SiftReactNative.setPageName("HomePage");
 ```
+## Track Screen Navigation 
+
+##### 1.  If you don't have root.js, create it, which file serves as the root component of the React Native application. It sets up the navigation using React Navigation and  integrates with the `sift-react-native` library for tracking screen views. Install and import neccessary dependencies.
+
+##### 2.   Create a stack navigator using createNativeStackNavigator() from @react-navigation/native-stack
+             `const Stack = createNativeStackNavigator();`
+
+##### 3.   Define the Root component and set up the navigation container
+           ` import { NavigationContainer } from '@react-navigation/native';`
+
+##### 4.   Inside the Root component, the useEffect hook is used to track the initial screen view by setting the page name with  `SiftReactNative.setPageName()` and uploading the event with `SiftReactNative.upload()`.
+              `SiftReactNative.setPageName(`screen_${currentRouteName}`);`
+              ` SiftReactNative.upload();`
+
+##### 5.   The ref and event handlers are used to track and update the current screen name dynamically.
+               ` const routeNameRef = React.useRef();`
+               ` const navigationRef = React.useRef();`
+
+##### 6.   The NavigationContainer component wraps the stack navigator and provides the navigation context.
+              `<NavigationContainer
+                  ref={navigationRef}
+                  onReady={() =>
+                     (routeNameRef.current = navigationRef.current.getCurrentRoute().name)
+                    }
+                  onStateChange={() => {
+                  const previousRouteName = routeNameRef.current;
+                  const currentRouteName = navigationRef.current.getCurrentRoute().name;
+
+                  if (previousRouteName !== currentRouteName) {
+                    console.log('Screen focused is:', currentRouteName);
+                    SiftReactNative.setPageName(`screen_${currentRouteName}`);
+                    SiftReactNative.upload();
+                  }
+
+                  routeNameRef.current = currentRouteName;
+              }}>
+             <Stack.Navigator>
+               <Stack.Screen name="your screen name" component={your component} />
+               <Stack.Screen name="your screen name" component={your component} />
+             </Stack.Navigator>
+           </NavigationContainer>`
+
+
 ## Example
 
 To see `sift-react-native` in action you can check out the source in the `example` folder.

example/App.js

@@ -1,192 +1,12 @@
 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
- *
  * @format
  * @flow strict-local
- */
-
-import React, {useState} from 'react';
-import {
-  Alert,
-  Platform,
-  StyleSheet,
-  View,
-  TextInput,
-  Text,
-  KeyboardAvoidingView,
-  Keyboard,
-  TouchableOpacity,
-  ScrollView,
-  SafeAreaView,
-} from 'react-native';
-import SiftReactNative from 'sift-react-native';
+ **/
+import React from 'react';
+import Root from './root';
 const App = () => {
-  let [accountId, setAccountId] = useState('');
-  let [beaconKey, setBeaconKey] = useState('');
-  let defaultUrl =
-    Platform.OS === 'ios'
-      ? 'https://api3.siftscience.com/v3/accounts/%@/mobile_events'
-      : 'https://api3.siftscience.com/v3/accounts/%s/mobile_events';
-  let [serverUrlFormat, setServerUrlFormat] = useState(defaultUrl);
-  let [userId, setUserId] = useState('');
-  let [errortext, setErrortext] = useState('');
-  const handleSubmitButton = () => {
-    setErrortext('');
-    if (!accountId) {
-      Alert.alert('Missing Fields', 'Please fill Account ID');
-      return;
-    }
-    if (!beaconKey) {
-      Alert.alert('Missing Fields', 'Please fill Beacon Key');
-      return;
-    }
-    SiftReactNative.setSiftConfig(accountId, beaconKey, true, serverUrlFormat);
-    SiftReactNative.setUserId(userId);
-  };
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.container}>
-        <ScrollView keyboardShouldPersistTaps="handled">
-          <KeyboardAvoidingView enabled>
-            <Text style={styles.titleTextStyle}>Sift SDK Example</Text>
-            <View style={styles.SectionStyle}>
-              <TextInput
-                style={styles.inputStyle}
-                value={accountId}
-                onChangeText={AccountId => setAccountId(AccountId)}
-                placeholder="Enter Account ID"
-                placeholderTextColor="gray"
-                autoCapitalize="sentences"
-                onSubmitEditing={Keyboard.dismiss}
-                blurOnSubmit={false}
-              />
-            </View>
-            <View style={styles.SectionStyle}>
-              <TextInput
-                style={styles.inputStyle}
-                value={beaconKey}
-                onChangeText={BeaconKey => setBeaconKey(BeaconKey)}
-                placeholder="Enter Beacon Key"
-                placeholderTextColor="gray"
-                onSubmitEditing={Keyboard.dismiss}
-                blurOnSubmit={false}
-              />
-            </View>
-            <View style={styles.SectionStyle}>
-              <TextInput
-                style={styles.inputStyle}
-                value={userId}
-                onChangeText={UserId => setUserId(UserId)}
-                placeholder="Enter User ID"
-                placeholderTextColor="gray"
-                keyboardType="email-address"
-                onSubmitEditing={Keyboard.dismiss}
-                blurOnSubmit={false}
-              />
-            </View>
-            <View style={styles.SectionStyleMultiline}>
-              <TextInput
-                style={styles.inputStyle}
-                value={serverUrlFormat}
-                onChangeText={ServerUrlFormat =>
-                  setServerUrlFormat(ServerUrlFormat)
-                }
-                placeholder="Enter Server URL Format"
-                placeholderTextColor="gray"
-                multiline={true}
-                numberOfLines={2}
-                onSubmitEditing={Keyboard.dismiss}
-                blurOnSubmit={false}
-              />
-            </View>
-            <Text style={styles.hintTextStyle}>Default: {defaultUrl}</Text>
-            {errortext !== '' ? (
-              <Text style={styles.errorTextStyle}> {errortext} </Text>
-            ) : null}
-            <TouchableOpacity
-              style={styles.buttonStyle}
-              activeOpacity={0.5}
-              onPress={handleSubmitButton}>
-              <Text style={styles.buttonTextStyle}>UPLOAD</Text>
-            </TouchableOpacity>
-          </KeyboardAvoidingView>
-        </ScrollView>
-      </View>
-    </SafeAreaView>
-  );
+  return <Root />;
 };
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  SectionStyle: {
-    flexDirection: 'row',
-    height: 40,
-    marginTop: 20,
-    marginLeft: 35,
-    marginRight: 35,
-    margin: 10,
-  },
-  SectionStyleMultiline: {
-    flexDirection: 'row',
-    height: 50,
-    marginTop: 20,
-    marginLeft: 35,
-    marginRight: 35,
-    margin: 10,
-  },
-  buttonStyle: {
-    backgroundColor: '#307ecc',
-    borderWidth: 0,
-    color: '#FFFFFF',
-    borderColor: '#7DE24E',
-    height: 40,
-    alignItems: 'center',
-    borderRadius: 30,
-    marginLeft: 35,
-    marginRight: 35,
-    marginTop: 20,
-    marginBottom: 20,
-  },
-  buttonTextStyle: {
-    fontWeight: 'bold',
-    color: 'white',
-    paddingVertical: 10,
-    fontSize: 16,
-  },
-  inputStyle: {
-    flex: 1,
-    color: 'black',
-    paddingLeft: 15,
-    paddingRight: 15,
-    borderWidth: 1,
-    borderRadius: 30,
-    borderColor: '#307ecc',
-  },
-  titleTextStyle: {
-    color: '#307ecc',
-    textAlign: 'center',
-    fontSize: 40,
-  },
-  hintTextStyle: {
-    color: 'black',
-    textAlign: 'center',
-    fontSize: 10,
-  },
-  errorTextStyle: {
-    color: 'red',
-    textAlign: 'center',
-    fontSize: 14,
-  },
-  successTextStyle: {
-    color: '#307ecc',
-    textAlign: 'center',
-    fontSize: 18,
-    padding: 30,
-  },
-});
-
 export default App;

example/android/build.gradle

@@ -2,6 +2,7 @@
 
 buildscript {
     ext {
+        kotlinVersion = "1.6.0"
         buildToolsVersion = "31.0.0"
         minSdkVersion = 21
         compileSdkVersion = 31

example/babel.config.js

@@ -1,3 +1 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-};
+export const presets = ['module:metro-react-native-babel-preset'];

example/package.json

@@ -11,8 +11,15 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
     "react": "18.1.0",
     "react-native": "0.70.6",
+    "react-native-gesture-handler": "^2.9.0",
+    "react-native-reanimated": "^3.1.0",
+    "react-native-safe-area-context": "^4.5.2",
+    "react-native-screens": "^3.20.0",
     "sift-react-native": "^0.1.8"
   },
   "devDependencies": {

example/root.js

@@ -0,0 +1,49 @@
+import React, {useEffect} from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import SiftReactNative from 'sift-react-native';
+import ScreenTwo from './screens/screentwo';
+import ScreenOne from './screens/screenone';
+
+const Stack = createNativeStackNavigator();
+
+const Root = () => {
+  const routeNameRef = React.useRef();
+  const navigationRef = React.useRef();
+
+  useEffect(() => {
+    const initialRouteName = routeNameRef.current;
+    console.log('Initial screen is:', initialRouteName);
+    SiftReactNative.setPageName(`screen_${initialRouteName}`);
+    SiftReactNative.upload();
+  }, []);
+
+  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) {
+          // Replace the line below to add the tracker from a mobile analytics SDK
+          //alert(`The route changed to ${currentRouteName}`);
+          console.log('Screen focused is:', currentRouteName);
+          SiftReactNative.setPageName(`screen_${currentRouteName}`);
+          SiftReactNative.upload();
+        }
+
+        // Save the current route name for later comparison
+        routeNameRef.current = currentRouteName;
+      }}>
+      <Stack.Navigator>
+        <Stack.Screen name="ScreenOne" component={ScreenOne} />
+        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+export default Root;