shakebug-react-native 2.4.7 → 2.4.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shakebug-react-native",
   "title": "shakebug-react-native",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "Shakebug allows users to report the bug from your mobile phone for your application. Here users just need to shake their mobile and all the data regarding bugs & crashes can be seen by developers through their log in panel easily",
   "main": "src/index.tsx",
   "types": "src/index.tsx",

package/src/Componanats/NavigationContext.js

@@ -1,6 +1,5 @@
 // NavigationContext.js
 import React, { createContext, useContext, useState } from 'react';
-import { useFocusEffect } from '@react-navigation/native';
 
 const NavigationContext = createContext();
 
@@ -23,16 +22,14 @@ export const NavigationProvider = ({ children }) => {
     }
   };
 
- useFocusEffect(
-    React.useCallback(() => {
-      if (navigationState && navigationState.length > 0) {
-        setFocusedScreen(navigationState[navigationState.length - 1].name);
-      }
-      return () => {
-        setFocusedScreen('');
-      };
-    }, [navigationState])
-  );
+  React.useEffect(() => {
+    if (navigationState && navigationState.length > 0) {
+      setFocusedScreen(navigationState[navigationState.length - 1].name);
+    }
+    return () => {
+      setFocusedScreen('');
+    };
+  }, [navigationState]);
 
   return (
     <NavigationContext.Provider value={{ navigationState, navigate, goBack, focusedScreen, goToScreenAtIndex}}>

package/src/Componanats/ShakeFunction.js

@@ -316,6 +316,7 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
                     subscription.unsubscribe();
                     global.IsBackground = false
                     global.isShakebugSDKOpen = true
+                    // navigate('TestScreen');
                     navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
                   }
                   else {
@@ -492,8 +493,8 @@ const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitl
   return (
     <View
       style={{
-          width: '100%',
-          height: '100%',
+        width: '100%',
+        height: '100%'
       }}
     >
 

package/src/Screens/AddDetailsScreen.js

@@ -285,11 +285,16 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     }
 
     return (
-        <SafeAreaView style={{ width: "100%", height: "100%", backgroundColor: themeColor, paddingTop: Platform.OS == 'android' ? DeviceInfo?.getSystemVersion() > 14 && StatusBar.currentHeight : 0 , paddingBottom: Platform.OS == 'android' ? DeviceInfo?.getSystemVersion() > 14 && StatusBar.currentHeight : 0}}>
-            <StatusBar backgroundColor={ThemeColor} hidden={false} />
-            <KeyboardAvoidingWrapper>
-                <>
-                    <View style={{ width: "100%", height: "100%", backgroundColor: "#ffffff" }}>
+        <SafeAreaView style={{ flex: 1, backgroundColor: ThemeColor }}>
+            <StatusBar backgroundColor={ThemeColor} hidden={false} barStyle="dark-content" />
+            <View style={{
+                flex: 1,
+                backgroundColor: "#fff",
+                paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+                paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
+            }}>
+                <KeyboardAvoidingWrapper>
+                    <>
                         <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                             <TouchableOpacity
                                 style={{
@@ -393,7 +398,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                         </View>
                         <Text style={{ fontSize: 12, color: 'red', fontWeight: '500', marginRight: '6%', textAlign: 'right' }}>{EmailBorder == "red" ? Localization[global.ShakebugLanguage].EmailError : ""}</Text>
 
-                        <TouchableOpacity activeOpacity={1} onPress={Keyboard.dismiss} style={{ height: Platform.OS == 'ios' ? Dimensions.get('window').height * 0.50 : '52%', width: '100%', marginTop: '0%', justifyContent: 'center', alignItems: 'center' }}>
+                        <TouchableOpacity activeOpacity={1} onPress={Keyboard.dismiss} style={{ height: Platform.OS == 'ios' ? Dimensions.get('window').height * 0.50 : '50%', width: '100%', marginTop: '0%', justifyContent: 'center', alignItems: 'center' }}>
                             {type == "img" ?
                                 path != "" && <Image source={{ uri: path }} resizeMode='contain' style={{ width: '100%', height: '100%' }} />
                                 :
@@ -401,7 +406,8 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                                     {poster != "" && <VideoPlayer videoUri={path} img={poster} themeColor={ThemeColor} goToScreenAtIndex={goToScreenAtIndex} goBack={goBack} SDKScreenTitle={SDKScreenTitle} UpdateStatusBar={UpdateStatusBar} />}
                                 </View>}
                         </TouchableOpacity>
-                        <View style={{ marginTop: '2%', width: '100%', position: 'absolute', bottom: 10 }}>
+
+                        <View style={{ marginTop: '2%', width: '100%'}}>
                             <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginHorizontal: 20 }}>
                                 <TouchableOpacity onPress={() => openImagePicker()}>
                                     <Text style={{ fontSize: 16, color: ThemeColor, fontWeight: '300' }}>{Localization[global.ShakebugLanguage].ReplaceImage}</Text>
@@ -426,46 +432,40 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                             </View>
 
                         </View>
-                    </View>
-
-                    <CustomeAlert
-                        isVisible={isErrorInAPI || isBugReported}
-                        text={apiMessage}
-                        color={themeColor}
-                        OnPrees={() => {
-                            if (isBugReported) {
-                                global.isScreenShotDetected = false;
-                                setIsScreenShot(false)
-                                setIsRecordingStart(false)
-                                goToScreenAtIndex(0)
-                            }
-                            setIsBugReported(false)
-                            setErrorInAPI(false)
-                            setIsLoading(false)
-                        }}
-                    />
-
-
-                    {isLoading &&
-                        <View
-                            style={{
-                                ...StyleSheet.absoluteFillObject,
-                                backgroundColor: 'rgba(0, 0, 0, 0.4)',
+
+
+                        <CustomeAlert
+                            isVisible={isErrorInAPI || isBugReported}
+                            text={apiMessage}
+                            color={themeColor}
+                            OnPrees={() => {
+                                if (isBugReported) {
+                                    global.isScreenShotDetected = false;
+                                    setIsScreenShot(false)
+                                    setIsRecordingStart(false)
+                                    goToScreenAtIndex(0)
+                                }
+                                setIsBugReported(false)
+                                setErrorInAPI(false)
+                                setIsLoading(false)
                             }}
                         />
-                    }
 
-                    {isLoading &&
-                        <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
-                </>
-            </KeyboardAvoidingWrapper>
-
-            <View
-                style={{
-                    backgroundColor: '#fff',
-                    height: Platform.OS == 'android' ? 0 : 40,
-                }}
-            />
+
+                        {isLoading &&
+                            <View
+                                style={{
+                                    ...StyleSheet.absoluteFillObject,
+                                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+                                }}
+                            />
+                        }
+
+                        {isLoading &&
+                            <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
+                    </>
+                </KeyboardAvoidingWrapper>
+            </View>
 
         </SafeAreaView>
     )

package/src/Screens/FirstScreen.js

@@ -43,7 +43,7 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
 
   useEffect(() => {
     StatusBar.setHidden(false, 'slide');
-    
+
     global.isScreenShotDetected = true;
     const backAction = () => {
       global.isTrigger = false
@@ -60,6 +60,7 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
     const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
 
     return () => backHandler.remove(); // Clean up the event listener on unmount
+
   }, []);
 
   const { RNCameraPermission } = NativeModules
@@ -132,8 +133,8 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
         }
       }
     });
-  };
 
+  };
 
   // For update image while change from Add details screen
   const updateImage = (data) => {
@@ -142,7 +143,6 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
     setImage(data)
   }
 
-
   useEffect(() => {
     global.IsBackground = 'false'
     Keyboard.addListener('keyboardDidShow', () => {
@@ -273,8 +273,8 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
         }
       ]
     )
-  }
 
+  }
 
   const pan = useRef(new Animated.ValueXY()).current;
 
@@ -304,272 +304,272 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
         pan.setValue({ x: 0, y: 0 });
       }
     })
+
   ).current;
 
   // backgroundColor: "#181818"
 
   return (
-    <SafeAreaView style={{ width: "100%", height: '100%', backgroundColor: themeColor, paddingTop: Platform.OS == 'android' ? DeviceInfo?.getSystemVersion() > 14 && StatusBar.currentHeight : 0 , paddingBottom: Platform.OS == 'android' ? DeviceInfo?.getSystemVersion() > 14 && StatusBar.currentHeight : 0}}>
-      <StatusBar backgroundColor={ThemeColor} />
-
-      <View style={{ width: "100%", height: "100%", backgroundColor: "#e4fdfd" }}>
-        <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-          <TouchableOpacity
-            style={{
-              width: '10%',
-              alignItems: 'center'
-            }}
-            onPress={() => {
-              global.isTrigger = false
-              global.isShakebugOpen = false
-              global.IsBackground = 'true'
-              global.isScreeenShotTaken = false
-              setIsScreenShot(false)
-              setIsRecordingStart(false)
-              goToScreenAtIndex(0)
-              global.isScreenShotDetected = false
-              global.isShakebugSDKOpen = false
-            }}
-          >
-            <Image source={require('../Assets/images/close.png')} resizeMode='contain' style={{ width: 35, height: 35 }} />
-          </TouchableOpacity>
-          <Text style={{ width: '80%', height: '80%', fontSize: 18, fontWeight: '300', color: 'white', textAlign: 'center' }}>
-            {title}
-          </Text>
-          <TouchableOpacity
-            style={{
-              width: '10%',
-              alignItems: 'center'
-            }}
-            onPress={async () => {
-              const ImgUrl = await ref.current.capture()
-              if (ImgUrl != undefined || ImgUrl != null) {
+      <SafeAreaView style={{ flex: 1, backgroundColor: ThemeColor }}>
+        <StatusBar backgroundColor={ThemeColor} barStyle="dark-content" />
+        
+        <View style={{
+          flex: 1,
+          backgroundColor: "#e4fdfd",
+          paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+          paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
+        }}>
+
+          <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+            <TouchableOpacity
+              style={{
+                width: '10%',
+                alignItems: 'center'
+              }}
+              onPress={() => {
+                global.isTrigger = false
+                global.isShakebugOpen = false
                 global.IsBackground = 'true'
-                navigate("AddDetailsScreen", { media: `${ImgUrl}`, updateParent: updateImage, mediaType: 'img', themeColor: ThemeColor, SDKScreenTitle: `${SDKScreenTitle}` })
-              }
+                global.isScreeenShotTaken = false
+                setIsScreenShot(false)
+                setIsRecordingStart(false)
+                goToScreenAtIndex(0)
+                global.isScreenShotDetected = false
+                global.isShakebugSDKOpen = false
+              }}
+            >
+              <Image source={require('../Assets/images/close.png')} resizeMode='contain' style={{ width: 35, height: 35 }} />
+            </TouchableOpacity>
+            <Text style={{ width: '80%', height: '80%', fontSize: 18, fontWeight: '300', color: 'white', textAlign: 'center' }}>
+              {title}
+            </Text>
+            <TouchableOpacity
+              style={{
+                width: '10%',
+                alignItems: 'center'
+              }}
+              onPress={async () => {
+                const ImgUrl = await ref.current.capture()
+                if (ImgUrl != undefined || ImgUrl != null) {
+                  global.IsBackground = 'true'
+                  navigate("AddDetailsScreen", { media: `${ImgUrl}`, updateParent: updateImage, mediaType: 'img', themeColor: ThemeColor, SDKScreenTitle: `${SDKScreenTitle}` })
+                }
 
-            }}
-          >
-            <Image source={require('../Assets/images/next.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
-          </TouchableOpacity>
-        </View>
-        <View style={{ position: 'relative', height: Platform.OS == 'android' ? '78%' : '79%', backgroundColor: '#e4fdfd', width: '100%', alignItems: 'center', paddingTop: 8 }}>
-          <ShakebugCapture ref={ref} options={{ format: "png", quality: 1 }}  collapsable={false} style={{ width: Platform.OS == 'android' ? "77%" : '73%', height: '100%' }}>
-
-            {text.trim().length > 0 ?
-              <Animated.View
-                style={[
-                  styles.card,
-                  {
-                    transform: pan.getTranslateTransform(),
-                    opacity: 1,
-                    borderWidth: isShow ? 1 : 0
-                  },
-                ]}
+              }}
+            >
+              <Image source={require('../Assets/images/next.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
+            </TouchableOpacity>
+          </View>
+          <View style={{ position: 'relative', height: Platform.OS == 'android' ? '78%' : '79%', backgroundColor: '#e4fdfd', width: '100%', alignItems: 'center', paddingTop: 8 }}>
+            <ShakebugCapture ref={ref} options={{ format: "png", quality: 1 }} collapsable={false} style={{ width: Platform.OS == 'android' ? "77%" : '73%', height: '100%' }}>
+
+              {text.trim().length > 0 ?
+                <Animated.View
+                  style={[
+                    styles.card,
+                    {
+                      transform: pan.getTranslateTransform(),
+                      opacity: 1,
+                      borderWidth: isShow ? 1 : 0
+                    },
+                  ]}
 
-              >
-                <TouchableOpacity
-                  style={{
-                    width: '100%',
-                    height: '100%'
-                  }}
-                  activeOpacity={1}
-                  onPress={() => setIsShow(!isShow)}
                 >
-                  <Text
-                    onLongPress={() => {
-                      setIsShow(!isShow)
-                    }}
-                    {...panResponder.panHandlers}
+                  <TouchableOpacity
                     style={{
-                      fontSize: 20,
-                      fontWeight: 'bold',
-                      backgroundColor: 'white',
-                      borderRadius: 8,
-                      padding: 5,
-                      color: selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black',
-                    }}>{text}</Text>
-                </TouchableOpacity>
-
-                {isShow ? <TouchableOpacity
-                  activeOpacity={1}
-                  onPress={() => setText("")}
-                  style={{ position: 'absolute', top: '-25%', left: '-15%', width: 20, height: 20, zIndex: 1 }}>
-                  <Image source={require("../Assets/images/RemoveTextView.png")} style={{ width: '100%', height: '100%' }} resizeMode='contain' />
-                </TouchableOpacity> : null}
-              </Animated.View>
-              : null}
-            <ImageBackground
-              source={image ? { uri: image } : undefined}
-              style={{
-                alignItems: 'center',
-                width: "100%",
-                height: "100%"
+                      width: '100%',
+                      height: '100%'
+                    }}
+                    activeOpacity={1}
+                    onPress={() => setIsShow(!isShow)}
+                  >
+                    <Text
+                      onLongPress={() => {
+                        setIsShow(!isShow)
+                      }}
+                      {...panResponder.panHandlers}
+                      style={{
+                        fontSize: 20,
+                        fontWeight: 'bold',
+                        backgroundColor: 'white',
+                        borderRadius: 8,
+                        padding: 5,
+                        color: selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black',
+                      }}>{text}</Text>
+                  </TouchableOpacity>
+
+                  {isShow ? <TouchableOpacity
+                    activeOpacity={1}
+                    onPress={() => setText("")}
+                    style={{ position: 'absolute', top: '-25%', left: '-15%', width: 20, height: 20, zIndex: 1 }}>
+                    <Image source={require("../Assets/images/RemoveTextView.png")} style={{ width: '100%', height: '100%' }} resizeMode='contain' />
+                  </TouchableOpacity> : null}
+                </Animated.View>
+                : null}
+              <ImageBackground
+                source={image ? { uri: image } : undefined}
+                style={{
+                  alignItems: 'center',
+                  width: "100%",
+                  height: "100%"
+                }}
+                resizeMode='contain'
+              >
+
+                <RNDrawingView
+                  ref={canvasRef}
+                  style={{ width: '100%', height: '100%' }}
+                  color={selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
+                  strokeWidth={Platform.OS == 'android' ? 5 : 3}
+                />
+
+              </ImageBackground>
+            </ShakebugCapture>
+
+          </View>
+          <View style={{ margin: 10, marginHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: '5%', backgroundColor: "#e4fdfd" }}>
+            <TouchableOpacity
+              style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
+              onPress={() => {
+                global.IsBackground = 'false'
+                if (global.AllowVideo == false) {
+                  setIsAlertText(`You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`)
+                  setIsAlert(true)
+                }
+                else {
+                  DeviceInfo.isEmulator()
+                    .then(res => {
+                      if (res != true || Platform.OS != 'ios') {
+                        RecordVideo()
+                      }
+                      else {
+                        setIsAlertText("Only real device is supported for recording video")
+                        setIsAlert(true)
+                      }
+                    })
+                }
+              }}
+            >
+              <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].RecordVideo}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
+              onPress={() => {
+                if (global.AllowVideo == false) {
+                  setIsAlertText(`You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`)
+                  setIsAlert(true)
+                }
+                else {
+                  openVideoPicker()
+                }
               }}
-              resizeMode='contain'
             >
+              <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].ChooseVideo}</Text>
+            </TouchableOpacity>
+          </View>
 
-              <RNDrawingView
-                ref={canvasRef}
-                style={{ width: '100%', height: '100%' }}
-                color={selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
-                strokeWidth={Platform.OS == 'android' ? 5 : 3}
-              />
+          <View style={{ width: "100%", flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, height: Platform.OS == 'ios' ? '7%' : '8.5%', paddingVertical: 12, backgroundColor: "#181818" }}>
+            <TouchableOpacity
+              onPress={() => {
+                setIsDraw(true)
+                setSelected(1)
+              }}
+            >
+              <Image source={selectd == 1 ? require('../Assets/images/borderdBlack.png') : require('../Assets/images/black.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setSelected(2)}
+            >
+              <Image source={selectd == 2 ? require('../Assets/images/borderdRed.png') : require('../Assets/images/red.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setSelected(3)}
+            >
+              <Image source={selectd == 3 ? require('../Assets/images/borderdGreen.png') : require('../Assets/images/green.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setSelected(4)}
+            >
+              <Image source={selectd == 4 ? require('../Assets/images/borderdBlue.png') : require('../Assets/images/blue.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setSelected(5)}
+            >
+              <Image source={selectd == 5 ? require('../Assets/images/borderdYellow.png') : require('../Assets/images/yellow.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => setAddTextView(true)}
+            >
+              <Image source={require('../Assets/images/text_icon.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
+            </TouchableOpacity>
 
-            </ImageBackground>
-          </ShakebugCapture>
-
-        </View>
-        <View style={{ margin: 10, marginHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: '5%' }}>
-          <TouchableOpacity
-            style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
-            onPress={() => {
-              global.IsBackground = 'false'
-              if (global.AllowVideo == false) {
-                setIsAlertText(`You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`)
-                setIsAlert(true)
-              }
-              else {
-                DeviceInfo.isEmulator()
-                  .then(res => {
-                    if (res != true || Platform.OS != 'ios') {
-                      RecordVideo()
-                    }
-                    else {
-                      setIsAlertText("Only real device is supported for recording video")
-                      setIsAlert(true)
-                    }
-                  })
-              }
-            }}
-          >
-            <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].RecordVideo}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
-            onPress={() => {
-              if (global.AllowVideo == false) {
-                setIsAlertText(`You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`)
-                setIsAlert(true)
-              }
-              else {
-                openVideoPicker()
-              }
-            }}
-          >
-            <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].ChooseVideo}</Text>
-          </TouchableOpacity>
-        </View>
-
-        <View style={{ width: "100%", flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, height: Platform.OS == 'ios' ? '7%' : '8.5%', paddingVertical: 12, backgroundColor: "#181818" }}>
-          <TouchableOpacity
-            onPress={() => {
-              setIsDraw(true)
-              setSelected(1)
-            }}
-          >
-            <Image source={selectd == 1 ? require('../Assets/images/borderdBlack.png') : require('../Assets/images/black.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => setSelected(2)}
-          >
-            <Image source={selectd == 2 ? require('../Assets/images/borderdRed.png') : require('../Assets/images/red.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => setSelected(3)}
-          >
-            <Image source={selectd == 3 ? require('../Assets/images/borderdGreen.png') : require('../Assets/images/green.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => setSelected(4)}
-          >
-            <Image source={selectd == 4 ? require('../Assets/images/borderdBlue.png') : require('../Assets/images/blue.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => setSelected(5)}
-          >
-            <Image source={selectd == 5 ? require('../Assets/images/borderdYellow.png') : require('../Assets/images/yellow.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => setAddTextView(true)}
+            <TouchableOpacity style={{ backgroundColor: ThemeColor, padding: 5 }} onPress={() => ClearCanvas(canvasRef)}>
+              <Image source={require('../Assets/images/clear.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+            </TouchableOpacity>
+          </View>
+        </View >
+
+        {addTextView ? (<View style={{ flex: 1, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'black', opacity: 0.93, alignItems: 'center' }}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            style={styles.container}
           >
-            <Image source={require('../Assets/images/text_icon.png')} resizeMode='contain' style={{ width: 40, height: 40 }} />
-          </TouchableOpacity>
-
-          <TouchableOpacity style={{ backgroundColor: ThemeColor, padding: 5 }} onPress={() => ClearCanvas(canvasRef)}>
-            <Image source={require('../Assets/images/clear.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
-          </TouchableOpacity>
-        </View>
-      </View >
-
-      {addTextView ? (<View style={{ flex: 1, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'black', opacity: 0.93, alignItems: 'center' }}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-          style={styles.container}
-        >
-          <View style={styles.innerContainer}>
-            <TextInput
-              style={{
-                width: '90%',
-                alignSelf: 'center',
-                height: '70%',
-                paddingHorizontal: 10,
-                textAlign: 'center',
-                textAlignVertical: 'center',
-                marginTop: 30,
-                fontSize: 18,
-                color: selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'
+            <View style={styles.innerContainer}>
+              <TextInput
+                style={{
+                  width: '90%',
+                  alignSelf: 'center',
+                  height: '70%',
+                  paddingHorizontal: 10,
+                  textAlign: 'center',
+                  textAlignVertical: 'center',
+                  marginTop: 30,
+                  fontSize: 18,
+                  color: selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'
+                }}
+                autoFocus
+                multiline
+                placeholder="Type here..."
+                placeholderTextColor="#b2b2b2"
+                cursorColor={selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
+                value={text}
+                onChangeText={(e) => setText(e)}
+              />
+            </View>
+            <TouchableOpacity
+              style={keyboardOpen ? styles.buttonShifted : styles.button}
+              onPress={() => {
+                setIsShow(false)
+                setAddTextView(false)
               }}
-              autoFocus
-              multiline
-              placeholder="Type here..."
-              placeholderTextColor="#b2b2b2"
-              cursorColor={selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
-              value={text}
-              onChangeText={(e) => setText(e)}
-            />
-          </View>
-          <TouchableOpacity
-            style={keyboardOpen ? styles.buttonShifted : styles.button}
-            onPress={() => {
-              setIsShow(false)
-              setAddTextView(false)
+            >
+              <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].Done}</Text>
+            </TouchableOpacity>
+          </KeyboardAvoidingView>
+        </View>) : null}
+
+        {isLoading &&
+          <View
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              backgroundColor: 'rgba(0, 0, 0, 0.4)',
             }}
-          >
-            <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].Done}</Text>
-          </TouchableOpacity>
-        </KeyboardAvoidingView>
-      </View>) : null}
-
-      <View
-        style={{
-          backgroundColor: '#e4fdfd',
-          height: Platform.OS == 'android' ? 0 : 40,
-        }}
-      />
-
-      {isLoading &&
-        <View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          />
+        }
+
+        <CustomeAlert
+          isVisible={isAlert}
+          text={isAlertText}
+          color={themeColor}
+          OnPrees={() => {
+            setIsAlert(false)
+            setIsAlertText("")
           }}
         />
-      }
-
-      <CustomeAlert
-        isVisible={isAlert}
-        text={isAlertText}
-        color={themeColor}
-        OnPrees={() => {
-          setIsAlert(false)
-          setIsAlertText("")
-        }}
-      />
 
-      {isLoading && <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
+        {isLoading && <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
 
-    </SafeAreaView>
+      </SafeAreaView>
   )
 }
 

package/src/Screens/Shakebug.js

@@ -1,12 +1,22 @@
 import React from 'react';
-import { Platform, Alert, AppState, NativeModules, View, StyleSheet, Animated, Dimensions, Modal } from 'react-native';
+import {
+  Platform,
+  Alert,
+  AppState,
+  NativeModules,
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Modal,
+} from 'react-native';
 import ShakeFunction from '../Componanats/ShakeFunction';
 import FirstScreen from './FirstScreen';
 import AddDetailsScreen from './AddDetailsScreen';
 import TrimVideoScreen from './TrimVideoScreen'
 import DeviceInfo from '../../DeviceInfo';
 import { useEffect, useState } from 'react';
-import { useFocusEffect } from '@react-navigation/native';
 import GetLocation from '../../GetLocation'
 import NetInfo from '../../NetInfo/src'
 import { SessionStartApi } from '../APIs/StartSession';
@@ -53,7 +63,7 @@ global.isScreeenShotTaken = false;
 global.restrictedViews = [];
 global.currentScreen = ""
 global.isShakebugSDKOpen = false;
-global.sdk_version = "2.4.7";
+global.sdk_version = "2.4.8";
 global.app_lunch_count = 0;
 global.POPUP_LAUNCH_THRESHOLD = 3;
 global.POPUP_COOLDOWN_DAYS = 2;
@@ -71,45 +81,70 @@ const ShakebugContext = React.createContext();
 
 // For navigation in register screen
 const NavigationContainer = ({ screens, setFocusedScreen }) => {
-
   const { navigationState } = useNavigation();
-  const animation = React.useRef(new Animated.Value(0)).current;
-  const { width } = Dimensions.get('window');
 
-  useFocusEffect(
-    React.useCallback(() => {
-      if (navigationState && navigationState.length > 0) {
-        setFocusedScreen(navigationState[navigationState.length - 1].name);
-      }
-      return () => {
-        setFocusedScreen('');
-      };
-    }, [navigationState, setFocusedScreen])
-  );
 
-  React.useEffect(() => {
-    Animated.timing(animation, {
-      toValue: navigationState.length - 1,
-      duration: 300,
-      useNativeDriver: true,
-    }).start();
-  }, [navigationState, animation]);
+  if (!navigationState || navigationState.length === 0) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'red',
+        }}
+      >
+        <Text style={{ color: 'white', fontSize: 20 }}>
+          Navigation State Empty
+        </Text>
+      </View>
+    );
+  }
+
+  const currentScreen =
+    navigationState[navigationState.length - 1];
+
+
+  const ScreenComponent = screens[currentScreen.name];
+
+
+  if (!ScreenComponent) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'red',
+        }}
+      >
+        <Text style={{ color: 'white', fontSize: 20 }}>
+          Screen Not Found: {currentScreen.name}
+        </Text>
+      </View>
+    );
+  }
 
   return (
-    <View style={styles.container}>
-      {navigationState.map((screen, index) => {
-        const ScreenComponent = screens[screen.name];
-        const translateX = animation.interpolate({
-          inputRange: [index - 1, index, index + 1],
-          outputRange: [width, 0, -width],
-        });
-
-        return (
-          <Animated.View key={index} style={[styles.screen, { transform: [{ translateX }] }]}>
-            <ScreenComponent {...screen.params} />
-          </Animated.View>
-        );
-      })}
+    <View style={{ flex: 1, backgroundColor: 'white' }}>
+      <ScreenComponent {...(currentScreen.params || {})} />
+    </View>
+  );
+};
+
+const TestScreen = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'yellow',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Text style={{ fontSize: 30, color: 'black' }}>
+        TEST SCREEN
+      </Text>
     </View>
   );
 };
@@ -468,7 +503,7 @@ function Shakebug({ children, Android_appkey, iOS_appkey, showTutorialScreenFirs
         setAllowCrashFlag(global.allowCrashReport);
         setAllowEventFlag(global.allowEvent);
         setAllowReviewFlag(global.allowReview);
-        setAllowSessionFlag(global.allowSession);  log.debug("------------------------------------------------------------------------------------------");
+        setAllowSessionFlag(global.allowSession); log.debug("------------------------------------------------------------------------------------------");
         log.info('API response:', message);
         log.debug("------------------------------------------------------------------------------------------");
         if (global.allowSession) { StartSession(); }
@@ -541,8 +576,7 @@ function Shakebug({ children, Android_appkey, iOS_appkey, showTutorialScreenFirs
     }}>
       <View
         style={{
-          width: '100%',
-          height: '100%',
+          flex: 1
         }}
       >
         <GlobalStateProvider>
@@ -553,7 +587,8 @@ function Shakebug({ children, Android_appkey, iOS_appkey, showTutorialScreenFirs
                 TutorialScreen: TutorialScreen,
                 FirstScreen: FirstScreen,
                 TrimVideoScreen: TrimVideoScreen,
-                AddDetailsScreen: AddDetailsScreen
+                AddDetailsScreen: AddDetailsScreen,
+                TestScreen: TestScreen,
               }}
               setFocusedScreen={setFocusedScreen}
             />

package/src/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Shakebug, { AddEvent } from '../src/Screens/Shakebug';
-import { NavigationContainer, findFocusedRoute } from '@react-navigation/native';
 import { getLocales } from '../GetLocals/src';
 import { NativeModules, Text, View, findNodeHandle } from 'react-native';
 import { useGlobalState } from './Componanats/GlobalStateContext'
@@ -14,7 +13,7 @@ let LocalLanguage = LanguageCodes.indexOf(getLocales()[0].languageCode)
 
 
 // Define the props interface for ShakebugView
-interface ShakebugViewProps {
+export interface ShakebugViewProps {
   children?: React.ReactNode;
   Android_appkey?: string;
   iOS_appkey?: string;
@@ -47,22 +46,20 @@ const ShakebugView: React.FC<ShakebugViewProps> = ({
 }) => {
 
   return (
-    <NavigationContainer>
-      <Shakebug
-        children={children}
-        Android_appkey={Android_appkey}
-        iOS_appkey={iOS_appkey}
-        showTutorialScreenFirstTime={showTutorialScreenFirstTime}
-        ShakebugThemeColor={ShakebugThemeColor}
-        changeSDKScreenTitle={changeSDKScreenTitle}
-        allowToReportBugByScreenCapture={allowToReportBugByScreenCapture}
-        allowToReportBugByShakingMobile={allowToReportBugByShakingMobile}
-        allowCrashReport={__DEV__ ? false : allowCrashReport}
-        makeLogEnabled={makeLogEnabled}
-        ShakebugLanguage={Languages.includes(ShakebugLanguage) ? ShakebugLanguage : LocalLanguage != -1 ? Languages[LocalLanguage] : "ENGLISH"}
-        setShakebugSDKEndPointURL={setShakebugSDKEndPointURL}
-      />
-    </NavigationContainer>
+    <Shakebug
+      children={children}
+      Android_appkey={Android_appkey}
+      iOS_appkey={iOS_appkey}
+      showTutorialScreenFirstTime={showTutorialScreenFirstTime}
+      ShakebugThemeColor={ShakebugThemeColor}
+      changeSDKScreenTitle={changeSDKScreenTitle}
+      allowToReportBugByScreenCapture={allowToReportBugByScreenCapture}
+      allowToReportBugByShakingMobile={allowToReportBugByShakingMobile}
+      allowCrashReport={__DEV__ ? false : allowCrashReport}
+      makeLogEnabled={makeLogEnabled}
+      ShakebugLanguage={Languages.includes(ShakebugLanguage) ? ShakebugLanguage : LocalLanguage != -1 ? Languages[LocalLanguage] : "ENGLISH"}
+      setShakebugSDKEndPointURL={setShakebugSDKEndPointURL}
+    />
   );
 };