shakebug-react-native 2.4.14 → 2.4.16

package/src/Screens/Shakebug.js

@@ -10,6 +10,7 @@ import {
   Animated,
   Dimensions,
   Modal,
+  useColorScheme,
 } from 'react-native';
 import ShakeFunction from '../Componanats/ShakeFunction';
 import FirstScreen from './FirstScreen';
@@ -31,7 +32,7 @@ import { Localization } from '../Componanats/localization';
 import { GlobalStateProvider, useGlobalState } from '../Componanats/GlobalStateContext';
 import CustomeAlert from '../Componanats/CustomAlert';
 import ReviewModal from '../Componanats/ReviewModal';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { isShakebugDark } from '../Componanats/Theme';
 
 console.ignoredYellowBox = ["Warning: Each", "Warning: Failed"];
 
@@ -63,7 +64,7 @@ global.isScreeenShotTaken = false;
 global.restrictedViews = [];
 global.currentScreen = ""
 global.isShakebugSDKOpen = false;
-global.sdk_version = "2.4.14";
+global.sdk_version = "2.4.16";
 global.app_lunch_count = 0;
 global.POPUP_LAUNCH_THRESHOLD = 3;
 global.POPUP_COOLDOWN_DAYS = 2;
@@ -87,7 +88,8 @@ const ShakebugContext = React.createContext();
 // For navigation in register screen
 const NavigationContainer = ({ screens, setFocusedScreen }) => {
   const { navigationState } = useNavigation();
-
+  const colorScheme = useColorScheme();
+  const isDark = isShakebugDark(colorScheme);
 
   if (!navigationState || navigationState.length === 0) {
     return (
@@ -107,7 +109,7 @@ const NavigationContainer = ({ screens, setFocusedScreen }) => {
   }
 
   return (
-    <View style={{ flex: 1, backgroundColor: 'white' }}>
+    <View style={{ flex: 1, backgroundColor: isDark ? '#21252c' : '#ffffff' }}>
       {navigationState.map((screen, index) => {
         const ScreenComponent = screens[screen.name];
         if (!ScreenComponent) return null;
@@ -154,6 +156,7 @@ const ShakeScreen = () => {
     showTutorialScreenFirstTime,
     FirstScreenTitle,
     SecondScreenTitle,
+    allowToReportBugByShaking,
     allowToReportBugByShakingMobile,
     allowToReportBugByScreenCapture,
     allowCrashReport,
@@ -161,8 +164,12 @@ const ShakeScreen = () => {
     ShakebugLanguage
   } = React.useContext(ShakebugContext);
 
-  const resolvedAllowToReportBugByShaking = allowToReportBugByShakingMobile && allowBugReport;
-  const resolvedAllowToReportBugByScreenCapture = allowToReportBugByScreenCapture && allowBugReport;
+  const shakingEnabled = (allowToReportBugByShaking !== undefined)
+    ? allowToReportBugByShaking
+    : (allowToReportBugByShakingMobile !== undefined ? allowToReportBugByShakingMobile : true);
+
+  const resolvedAllowToReportBugByShaking = shakingEnabled && (allowBugReport !== false);
+  const resolvedAllowToReportBugByScreenCapture = Boolean(allowToReportBugByScreenCapture) && (allowBugReport !== false);
   const resolvedAllowCrashReport = allowCrashReport;
 
   useEffect(() => {
@@ -195,16 +202,24 @@ function Shakebug({
   Android_appkey,
   iOS_appkey,
   showTutorialScreenFirstTime = true,
-  ShakebugThemeColor = "#1dd3e3",
-  changeSDKScreenTitle = ['Annotate your bug', 'Add Details'],
-  allowToReportBugByShakingMobile = true,
+  ShakebugThemeColor = "#313A46",
+  changeSDKScreenTitle = ['Annotate your Bug', 'Feedback'],
+  allowToReportBugByShakingMobile,
+  allowToReportBugByShaking,
   allowToReportBugByScreenCapture = false,
   allowCrashReport = true,
   ShakebugLanguage = "ENGLISH",
   makeLogEnabled = false,
-  setShakebugSDKEndPointURL = ["https://www.shakebug.com/api/v1.6/webservice.php/", "MarchShake2022", ""]
+  setShakebugSDKEndPointURL = ["https://www.shakebug.com/api/v1.6/webservice.php/", "MarchShake2022", ""],
+  theme = "auto"
 }) {
 
+  global.ShakebugTheme = theme;
+
+  const resolvedShakingOption = (allowToReportBugByShaking !== undefined)
+    ? allowToReportBugByShaking
+    : (allowToReportBugByShakingMobile !== undefined ? allowToReportBugByShakingMobile : true);
+
   const [allowBugReport, setAllowBugReport] = useState(true);
   const [allowCrashFlag, setAllowCrashFlag] = useState(true);
   const [allowEventFlag, setAllowEventFlag] = useState(true);
@@ -220,13 +235,14 @@ function Shakebug({
     : "ENGLISH";
   global.ShakebugLanguage = validLanguage;
 
-  const ThemeColor = ShakebugThemeColor ? ShakebugThemeColor : "#1dd3e3";
+  const ThemeColor = ShakebugThemeColor ? ShakebugThemeColor : "#313A46";
+  global.ShakebugThemeColor = ThemeColor;
   const FirstScreenTitle = (changeSDKScreenTitle && changeSDKScreenTitle[0] && changeSDKScreenTitle[0] !== "")
     ? changeSDKScreenTitle[0]
-    : Localization[validLanguage]?.FirstScreenTitle || "Annotate your bug";
+    : Localization[validLanguage]?.FirstScreenTitle || "Annotate your Bug";
   const SecondScreenTitle = (changeSDKScreenTitle && changeSDKScreenTitle[1] && changeSDKScreenTitle[1] !== "")
     ? changeSDKScreenTitle[1]
-    : Localization[validLanguage]?.SecondScreenTitle || "Add Details";
+    : Localization[validLanguage]?.SecondScreenTitle || "Feedback";
   const [isAlert, setIsAlert] = useState(false)
   const [isAlertText, setAlertText] = useState("")
   const [showModal, setShowModal] = useState(false);
@@ -241,6 +257,7 @@ function Shakebug({
 
   const connectionAlertShownRef = useRef(false);
   const isMatchingKeyRef = useRef(false);
+  const isMountedRef = useRef(true);
   const reviewTimeoutRef = useRef(null);
 
 
@@ -559,9 +576,48 @@ function Shakebug({
     }
   };
 
+  const executeMatchKeyWithRetry = async (retries = 2) => {
+    const success = await executeMatchKey();
+    if (!success && (!global.application_id || global.application_id === "") && retries > 0) {
+      setTimeout(() => {
+        if (isMountedRef.current && (!global.application_id || global.application_id === "")) {
+          executeMatchKeyWithRetry(retries - 1);
+        }
+      }, 2000);
+    }
+  };
+
+  const handleConnectivityChange = (state) => {
+    if (!isMountedRef.current || !state) return;
+
+    // Ignore unknown/null initial state until native connectivity is reported
+    if (state.isConnected === null && state.isInternetReachable === null) return;
+
+    const isConnected = state.isConnected === true || state.isInternetReachable === true;
+    const lang = (global.ShakebugLanguage && Localization[global.ShakebugLanguage])
+      ? global.ShakebugLanguage
+      : "ENGLISH";
+    const errorMsg = Localization[lang]?.InterNetConnetionError || "Please check your internet connection";
+
+    if (!isConnected) {
+      setAlertText(errorMsg);
+      setIsAlert(true);
+      connectionAlertShownRef.current = true;
+    } else {
+      // Unconditionally dismiss any connection error alert when connection is restored
+      setIsAlert(false);
+      setAlertText("");
+      connectionAlertShownRef.current = false;
+
+      if (!global.application_id || global.application_id === "") {
+        executeMatchKeyWithRetry();
+      }
+    }
+  };
+
   // For check mau limit, valid appkey, handle connectivity, and call MatchKeyFunc
   useEffect(() => {
-    let isMounted = true;
+    isMountedRef.current = true;
 
     async function initLaunchData() {
       try {
@@ -602,34 +658,6 @@ function Shakebug({
 
     initLaunchData();
 
-    const handleConnectivityChange = (state) => {
-      if (!isMounted || !state) return;
-
-      // Ignore unknown/null initial state until native connectivity is reported
-      if (state.isConnected === null) return;
-
-      const isConnected = state.isConnected === true;
-      const lang = (global.ShakebugLanguage && Localization[global.ShakebugLanguage])
-        ? global.ShakebugLanguage
-        : "ENGLISH";
-      const errorMsg = Localization[lang]?.InterNetConnetionError || "Please check your internet connection";
-
-      if (!isConnected) {
-        setAlertText(errorMsg);
-        setIsAlert(true);
-        connectionAlertShownRef.current = true;
-      } else {
-        if (connectionAlertShownRef.current || isAlert) {
-          setIsAlert(false);
-          setAlertText("");
-          connectionAlertShownRef.current = false;
-        }
-        if (!global.application_id || global.application_id === "") {
-          executeMatchKey();
-        }
-      }
-    };
-
     // Check immediate connectivity on mount
     NetInfo.fetch().then(handleConnectivityChange).catch(() => {});
 
@@ -637,7 +665,7 @@ function Shakebug({
     const unsubscribe = NetInfo.addEventListener(handleConnectivityChange);
 
     return () => {
-      isMounted = false;
+      isMountedRef.current = false;
       if (unsubscribe) {
         unsubscribe();
       }
@@ -650,6 +678,11 @@ function Shakebug({
   // For close or start session according app state
   useEffect(() => {
     const handleAppStateChange = (nextAppState) => {
+      if (nextAppState === 'active') {
+        // Re-check connectivity whenever app becomes active to catch any connection changes
+        // made while the app was backgrounded or inactive (e.g. toggled in Settings or Control Center)
+        NetInfo.fetch().then(handleConnectivityChange).catch(() => {});
+      }
       if (global.IsBackground == 'true') {
         if (nextAppState == 'active' && global.IsBackground == 'true') {
           if (Platform.OS == 'android' && global.isAndroidValid) {
@@ -704,7 +737,8 @@ function Shakebug({
       showTutorialScreenFirstTime,
       FirstScreenTitle,
       SecondScreenTitle,
-      allowToReportBugByShaking: allowToReportBugByShakingMobile && allowBugReport,
+      allowToReportBugByShaking: resolvedShakingOption && allowBugReport,
+      allowToReportBugByShakingMobile: resolvedShakingOption && allowBugReport,
       allowToReportBugByScreenCapture: allowToReportBugByScreenCapture && allowBugReport,
       allowCrashReport: allowCrashReport && allowCrashFlag,
       allowBugReport,

package/src/Screens/TrimVideoScreen.js

@@ -1,4 +1,4 @@
-import { DeviceEventEmitter, NativeEventEmitter, NativeModules, Platform, SafeAreaView, StatusBar, View } from 'react-native'
+import { BackHandler, DeviceEventEmitter, NativeEventEmitter, NativeModules, Platform, SafeAreaView, StatusBar, View } from 'react-native'
 import React, { useEffect, useState } from 'react'
 import { showEditor } from '../../trimVideo/src/index';
 import { useNavigation } from '../Componanats/NavigationContext';
@@ -9,10 +9,10 @@ console.ignoredYellowBox = ["Warning: Each", "Warning: Failed"];
 
 const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatusBar, updateParent }) => {
 
-  const { goToScreenAtIndex, navigate, goBack } = useNavigation();
+  const { goToScreenAtIndex, navigate, replace, goBack } = useNavigation();
   const [loading, setLoading] = useState(true);
 
-  const ThemeColor = themeColor ? themeColor : "#1dd3e3";
+  const ThemeColor = themeColor ? themeColor : "#313A46";
 
   // For display video trimmer
   useEffect(() => {
@@ -39,6 +39,16 @@ const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatus
       saveDialogConfirmText: Localization[global.ShakebugLanguage].Yes
     });
 
+    const handleExitToApp = () => {
+      global.isTrigger = false;
+      global.isShakebugOpen = false;
+      global.isScreenShotDetected = false;
+      global.isScreeenShotTaken = false;
+      global.isShakebugSDKOpen = false;
+      global.IsBackground = 'true';
+      goToScreenAtIndex(0);
+    };
+
     const handleVideoTrimEvent = (event) => {
       switch (event.name) {
         case 'onShow': {
@@ -55,27 +65,49 @@ const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatus
         case 'onFinishTrimming': {
           global.IsBackground = 'true';
           UpdateStatusBar();
-          navigate("AddDetailsScreen", { media: `${event.outputPath}`, mediaType: 'video', themeColor: themeColor, SDKScreenTitle: SDKScreenTitle, updateParent: updateParent });
+          if (Type === 'video' && typeof replace === 'function') {
+            replace("AddDetailsScreen", { media: `${event.outputPath}`, mediaType: 'video', themeColor: themeColor, SDKScreenTitle: SDKScreenTitle, updateParent: updateParent });
+          } else {
+            navigate("AddDetailsScreen", { media: `${event.outputPath}`, mediaType: 'video', themeColor: themeColor, SDKScreenTitle: SDKScreenTitle, updateParent: updateParent });
+          }
           return;
         }
         case 'onCancel': {
           UpdateStatusBar();
           if (Type == "video") {
-            goToScreenAtIndex(1);
+            handleExitToApp();
           } else if (Type == "imgReplacedWithVideo") {
             goBack();
           } else if (Type == "videoReplacedWithVideo") {
-            goToScreenAtIndex(3);
+            goBack();
           }
           return;
         }
         case 'onError': {
           setLoading(false);
+          UpdateStatusBar();
+          if (Type == "video") {
+            handleExitToApp();
+          } else {
+            goBack();
+          }
           break;
         }
       }
     };
 
+    const backAction = () => {
+      UpdateStatusBar();
+      if (Type == "video") {
+        handleExitToApp();
+      } else {
+        goBack();
+      }
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
     let subscription;
     if (Platform.OS === 'android') {
       subscription = DeviceEventEmitter.addListener('VideoTrim', handleVideoTrimEvent);
@@ -86,6 +118,7 @@ const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatus
     }
 
     return () => {
+      backHandler.remove();
       if (subscription && subscription.remove) {
         subscription.remove();
       }
@@ -93,7 +126,7 @@ const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatus
   }, [])
 
   return (
-    <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
+    <View style={{ flex: 1, backgroundColor: 'transparent', justifyContent: 'center', alignItems: 'center' }}>
       <LoadingModal visible={loading} color={ThemeColor} />
     </View>
   );

package/src/index.tsx

@@ -21,11 +21,13 @@ export interface ShakebugViewProps {
   ShakebugThemeColor?: string;
   changeSDKScreenTitle?: string[];
   allowToReportBugByShakingMobile?: boolean;
+  allowToReportBugByShaking?: boolean;
   allowToReportBugByScreenCapture?: boolean;
   allowCrashReport?: boolean;
   makeLogEnabled?: boolean;
   ShakebugLanguage?: 'ENGLISH' | 'HINDI' | 'GUJARATI' | 'ARABIC' | 'CHINESE' | 'DUTCH' | 'FRENCH' | 'GERMAN' | 'GREEK' | 'INDONESIAN' | 'ITALIAN' | 'JAPANESE' | 'KOREAN' | 'RUSSIAN' | 'SPANISH' | 'TURKISH' | 'UKRAINIAN' | 'MARATHI' | 'TAMIL' | 'TELUGU';
   setShakebugSDKEndPointURL?: string[];
+  theme?: 'auto' | 'light' | 'dark';
 }
 
 
@@ -35,16 +37,22 @@ const ShakebugView: React.FC<ShakebugViewProps> = ({
   Android_appkey,
   iOS_appkey,
   showTutorialScreenFirstTime = true,
-  ShakebugThemeColor = '#1dd3e3',
-  changeSDKScreenTitle = ['Annotate your Bug', 'Add Details'],
-  allowToReportBugByShakingMobile = true,
+  ShakebugThemeColor = '#272B32',
+  changeSDKScreenTitle = ['Annotate your bug', 'Add details'],
+  allowToReportBugByShakingMobile,
+  allowToReportBugByShaking,
   allowToReportBugByScreenCapture = false,
   allowCrashReport = true,
   makeLogEnabled = false,
   ShakebugLanguage = LocalLanguage != -1 ? Languages[LocalLanguage] : "ENGLISH",
-  setShakebugSDKEndPointURL = ["https://www.shakebug.com/api/v1.6/webservice.php/", "MarchShake2022", ""]
+  setShakebugSDKEndPointURL = ["https://www.shakebug.com/api/v1.6/webservice.php/", "MarchShake2022", ""],
+  theme = 'auto',
 }) => {
 
+  const resolvedShaking = (allowToReportBugByShaking !== undefined)
+    ? allowToReportBugByShaking
+    : (allowToReportBugByShakingMobile !== undefined ? allowToReportBugByShakingMobile : true);
+
   return (
     <Shakebug
       children={children}
@@ -54,11 +62,12 @@ const ShakebugView: React.FC<ShakebugViewProps> = ({
       ShakebugThemeColor={ShakebugThemeColor}
       changeSDKScreenTitle={changeSDKScreenTitle}
       allowToReportBugByScreenCapture={allowToReportBugByScreenCapture}
-      allowToReportBugByShakingMobile={allowToReportBugByShakingMobile}
+      allowToReportBugByShakingMobile={resolvedShaking}
       allowCrashReport={__DEV__ ? false : allowCrashReport}
       makeLogEnabled={makeLogEnabled}
       ShakebugLanguage={Languages.includes(ShakebugLanguage) ? ShakebugLanguage : LocalLanguage != -1 ? Languages[LocalLanguage] : "ENGLISH"}
       setShakebugSDKEndPointURL={setShakebugSDKEndPointURL}
+      theme={theme}
     />
   );
 };
@@ -70,13 +79,13 @@ export const addEventKey = (name: string, value: any): void => {
 };
 
 export const triggerBugReporting = (): void => {
-  if (!global.allowBugReport) {
+  if (global.allowBugReport === false) {
     return;
   }
   global.isShakebugOpen = false;
   global.isTrigger = true;
   DeviceEventEmitter.emit('TriggerBugReportingEvent');
-}
+};
 
 export const ShakebugSdkProtectedView = ({ children }) => {