shakebug-react-native 2.4.14 → 2.4.16

package/README.md

@@ -220,6 +220,12 @@ export default App = () => {
         <td>If you have on-premise hosting plan then following prop will be used.</td>
         <td></td>
     </tr>
+    <tr>
+        <td>theme</td>
+        <td>String ("auto" | "light" | "dark")</td>
+        <td>Set theme mode for Shakebug SDK screens. Defaults to "auto" to automatically adapt to the application and system theme.</td>
+        <td>"auto"</td>
+    </tr>
 </table>
 
 ## Methods

package/android/src/main/java/com/shakebug/ConnectivityReceiver.java

@@ -39,7 +39,7 @@ public abstract class ConnectivityReceiver {
     private final WifiManager mWifiManager;
     private final TelephonyManager mTelephonyManager;
     private final ReactApplicationContext mReactContext;
-    public boolean hasListener = false;
+    public boolean hasListener = true;
 
     @Nonnull
     private ConnectionType mConnectionType = ConnectionType.UNKNOWN;
@@ -125,16 +125,21 @@ public abstract class ConnectivityReceiver {
             mConnectionType = connectionType;
             mCellularGeneration = cellularGeneration;
             mIsInternetReachable = isInternetReachable;
-            if (hasListener) {
-                sendConnectivityChangedEvent();
-            }
+            sendConnectivityChangedEvent();
         }
     }
 
     protected void sendConnectivityChangedEvent() {
-        getReactContext()
-                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
-                .emit("netInfo.networkStatusDidChange", createConnectivityEventMap(null));
+        ReactApplicationContext reactContext = getReactContext();
+        if (reactContext != null && reactContext.hasActiveCatalystInstance()) {
+            try {
+                reactContext
+                        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+                        .emit("netInfo.networkStatusDidChange", createConnectivityEventMap(null));
+            } catch (Exception e) {
+                // Ignore exception if emitter is not yet ready
+            }
+        }
     }
 
     protected WritableMap createConnectivityEventMap(@Nullable final String requestedInterface) {

package/android/src/main/java/com/shakebug/DrawingView.java

@@ -53,11 +53,21 @@ public class DrawingView extends View {
 
     @Override
     public boolean onTouchEvent(MotionEvent event) {
-        float x = event.getX();
-        float y = event.getY();
+        if (canvas == null || bitmap == null || getWidth() <= 0 || getHeight() <= 0) {
+            return false;
+        }
+
+        float rawX = event.getX();
+        float rawY = event.getY();
+        float x = Math.max(0, Math.min(getWidth(), rawX));
+        float y = Math.max(0, Math.min(getHeight(), rawY));
 
         switch (event.getAction()) {
             case MotionEvent.ACTION_DOWN:
+                // Only allow drawing to start strictly inside the view boundaries
+                if (rawX < 0 || rawX > getWidth() || rawY < 0 || rawY > getHeight()) {
+                    return false;
+                }
                 lastX = x;
                 lastY = y;
                 return true;
@@ -65,7 +75,7 @@ public class DrawingView extends View {
                 float dx = Math.abs(x - lastX);
                 float dy = Math.abs(y - lastY);
                 if (dx >= 4 || dy >= 4) {
-                    // Draw on the internal bitmap canvas
+                    // Draw on the internal bitmap canvas (strictly clamped to image boundaries)
                     canvas.drawLine(lastX, lastY, x, y, paint);
                     invalidate();
                     lastX = x;

package/android/src/main/java/com/shakebug/RecordScreenModule.java

@@ -66,19 +66,22 @@ public class RecordScreenModule extends ReactContextBaseJavaModule implements HB
             if (requestCode == SCREEN_RECORD_REQUEST_CODE) {
                 if (resultCode == AppCompatActivity.RESULT_OK) {
                     hbRecorder.startScreenRecording(intent, resultCode);
+                    if (startPromise != null) {
+                        startPromise.resolve("started");
+                        startPromise = null;
+                    }
                 } else {
                     if (startPromise != null) {
                         startPromise.resolve("permission_error");
+                        startPromise = null;
                     }
                 }
             } else {
                 if (startPromise != null) {
                     startPromise.reject("404", "cancel!");
+                    startPromise = null;
                 }
             }
-            if (startPromise != null) {
-                startPromise.resolve("started");
-            }
         }
     };
 

package/android/src/main/java/com/shakebug/ViewShot.java

@@ -373,6 +373,7 @@ public class ViewShot implements UIBlock {
         //   Debug.waitForDebugger();
 
         final Canvas c = new Canvas(bitmap);
+        c.drawColor(Color.WHITE);
         view.draw(c);
 
         //after view is drawn, go through children

package/ios/CustomScreenShot/ShakebugSDKCustomScreenCapture.m

@@ -26,9 +26,13 @@ RCT_EXPORT_METHOD(captureScreen:(RCTPromiseResolveBlock)resolve
         return;
       }
 
-      // Create a context for capturing all windows
+      // Create a context for capturing all windows with solid white base
       UIScreen *mainScreen = [UIScreen mainScreen];
-      UIGraphicsBeginImageContextWithOptions(mainScreen.bounds.size, NO, mainScreen.scale);
+      UIGraphicsBeginImageContextWithOptions(mainScreen.bounds.size, YES, mainScreen.scale);
+
+      // Pre-fill with clean white background so transparent window roots don't render black
+      [[UIColor whiteColor] setFill];
+      UIRectFill(mainScreen.bounds);
 
       // Render each window onto the context
       for (UIWindow *window in windows) {

package/ios/ScreenShot/ShakebugCapture.m

@@ -125,7 +125,9 @@ RCT_EXPORT_METHOD(captureRef:(nonnull NSNumber *)target
       scrollView.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height);
     }
 
-    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
+    UIGraphicsBeginImageContextWithOptions(size, YES, 0);
+    [[UIColor whiteColor] setFill];
+    UIRectFill((CGRect){CGPointZero, size});
     
     if (renderInContext) {
       [rendered.layer renderInContext: UIGraphicsGetCurrentContext()];

package/ios/SketchCanvas/DrawingView.m

@@ -41,6 +41,7 @@
     self.paths = [NSMutableArray array];
     self.pathColors = [NSMutableArray array]; // Initialize the colors array
     self.backgroundColor = [UIColor clearColor];
+    self.clipsToBounds = YES;
 }
 
 - (void)setColor:(UIColor *)color {
@@ -61,6 +62,11 @@
     UITouch *touch = [touches anyObject];
     CGPoint touchPoint = [touch locationInView:self];
     
+    // Do not allow drawing to start outside image bounds
+    if (!CGRectContainsPoint(self.bounds, touchPoint)) {
+        return;
+    }
+    
     self.path = [UIBezierPath bezierPath];
     self.path.lineWidth = self.pathWidth; // Set the line width for the new path
     [self.path moveToPoint:touchPoint];
@@ -70,9 +76,16 @@
 }
 
 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
+    if (!self.path) return;
     UITouch *touch = [touches anyObject];
     CGPoint touchPoint = [touch locationInView:self];
-    [self.path addLineToPoint:touchPoint];
+    
+    // Clamp to image bounds so stroke never extends outside
+    CGFloat clampedX = MAX(0, MIN(self.bounds.size.width, touchPoint.x));
+    CGFloat clampedY = MAX(0, MIN(self.bounds.size.height, touchPoint.y));
+    CGPoint clampedPoint = CGPointMake(clampedX, clampedY);
+    
+    [self.path addLineToPoint:clampedPoint];
     [self setNeedsDisplay];
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shakebug-react-native",
   "title": "shakebug-react-native",
-  "version": "2.4.14",
+  "version": "2.4.16",
   "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/APIs/MatchKey.js

@@ -6,7 +6,7 @@ async function MatchKeyApi(appkey, BundleId) {
 
     const formData = new FormData();
     formData.append("method", "matchKeys")
-    formData.append("bundleid", BundleId)
+    formData.append("bundleid", "com.softnoesis.financeeye")
     formData.append("appkey", appkey)
 
 

package/src/Componanats/CustomAlert.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { View, Text, Button, StyleSheet, Modal, TouchableOpacity } from 'react-native';
+import { View, Text, Button, StyleSheet, Modal, TouchableOpacity, useColorScheme } from 'react-native';
+import { isShakebugDark } from './Theme';
 
-const CustomeAlert = ({color, isVisible, OnPrees, text = ""}) => {
+const CustomeAlert = ({color = '#313A46', isVisible, OnPrees, text = ""}) => {
+    const colorScheme = useColorScheme();
+    const isDark = isShakebugDark(colorScheme);
     
     return (
         <Modal
@@ -13,17 +16,18 @@ const CustomeAlert = ({color, isVisible, OnPrees, text = ""}) => {
                 <View 
                     style={[
                     styles.container, {
+                        backgroundColor: isDark ? '#2b2f38' : '#fff',
                         height: (text && text.length > 120) ? 300 : (text && text.length < 50) ? 170 : 200
                     }]}
                 >
-                    <Text style={styles.text}>
+                    <Text style={[styles.text, { color: isDark ? '#fff' : '#000' }]}>
                         {text}
                     </Text>
                     
                     <TouchableOpacity
                         style={{
                             width: '100%',
-                            backgroundColor: color,
+                            backgroundColor: color || '#313A46',
                             height: 40,
                             alignItems: 'center',
                             justifyContent: 'center',

package/src/Componanats/Icons.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import { View } from 'react-native';
+
+/**
+ * Clean vector Left Chevron (<)
+ */
+export const BackChevronIcon = ({ color = '#ffffff', size = 22, strokeWidth = 2.6 }) => (
+  <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+    <View
+      style={{
+        width: size * 0.44,
+        height: size * 0.44,
+        borderLeftWidth: strokeWidth,
+        borderBottomWidth: strokeWidth,
+        borderColor: color,
+        transform: [{ rotate: '45deg' }],
+        marginLeft: size * 0.12,
+      }}
+    />
+  </View>
+);
+
+/**
+ * Clean vector Right Chevron (>)
+ */
+export const ForwardChevronIcon = ({ color = '#ffffff', size = 22, strokeWidth = 2.6 }) => (
+  <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+    <View
+      style={{
+        width: size * 0.44,
+        height: size * 0.44,
+        borderRightWidth: strokeWidth,
+        borderTopWidth: strokeWidth,
+        borderColor: color,
+        transform: [{ rotate: '45deg' }],
+        marginRight: size * 0.12,
+      }}
+    />
+  </View>
+);
+
+/**
+ * Clean vector Close Circle with (X)
+ */
+export const CloseCircleIcon = ({ color = '#ffffff', size = 26, strokeWidth = 1.8 }) => (
+  <View
+    style={{
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: 1.5,
+      borderColor: color,
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <View style={{ width: size * 0.44, height: size * 0.44, justifyContent: 'center', alignItems: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.46,
+          height: strokeWidth,
+          backgroundColor: color,
+          borderRadius: strokeWidth / 2,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.46,
+          height: strokeWidth,
+          backgroundColor: color,
+          borderRadius: strokeWidth / 2,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </View>
+  </View>
+);
+
+/**
+ * Clean vector Mail / Envelope Icon
+ */
+export const MailIcon = ({ color = '#94a3b8', size = 18 }) => {
+  const w = size * 1.18;
+  const h = size * 0.82;
+  const flapW = w * 0.68;
+  return (
+    <View
+      style={{
+        width: w,
+        height: h,
+        borderRadius: 3,
+        borderWidth: 1.6,
+        borderColor: color,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <View
+        style={{
+          position: 'absolute',
+          top: -flapW * 0.48,
+          width: flapW,
+          height: flapW,
+          borderBottomWidth: 1.5,
+          borderRightWidth: 1.5,
+          borderColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </View>
+  );
+};
+
+/**
+ * Clean vector Camera Icon (Screenshot badge)
+ */
+export const CameraIcon = ({ color = '#ffffff', size = 13 }) => {
+  const w = size * 1.25;
+  const h = size * 0.85;
+  return (
+    <View style={{ width: w, height: size * 1.05, justifyContent: 'flex-end', alignItems: 'center' }}>
+      {/* Top flash/shutter bump */}
+      <View
+        style={{
+          width: w * 0.36,
+          height: size * 0.22,
+          backgroundColor: color,
+          borderTopLeftRadius: 2,
+          borderTopRightRadius: 2,
+          marginBottom: -0.5,
+        }}
+      />
+      {/* Camera body */}
+      <View
+        style={{
+          width: w,
+          height: h,
+          borderRadius: 3,
+          borderWidth: 1.4,
+          borderColor: color,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {/* Lens circle */}
+        <View
+          style={{
+            width: h * 0.52,
+            height: h * 0.52,
+            borderRadius: (h * 0.52) / 2,
+            borderWidth: 1.3,
+            borderColor: color,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/**
+ * Clean vector Photo Gallery Icon (Replace Image)
+ * Frame with sun/circle dot and mountain peaks
+ */
+export const PhotoGalleryIcon = ({ color = '#313A46', size = 18 }) => {
+  const w = size * 1.15;
+  const h = size * 0.92;
+  return (
+    <View
+      style={{
+        width: w,
+        height: h,
+        borderRadius: 3.5,
+        borderWidth: 1.6,
+        borderColor: color,
+        overflow: 'hidden',
+        position: 'relative',
+        justifyContent: 'flex-end',
+      }}
+    >
+      {/* Sun / Moon Dot */}
+      <View
+        style={{
+          position: 'absolute',
+          top: 2.2,
+          left: 2.8,
+          width: 3.2,
+          height: 3.2,
+          borderRadius: 1.6,
+          backgroundColor: color,
+        }}
+      />
+      {/* Mountain peaks container */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'flex-end',
+          width: '100%',
+          height: '70%',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Left small peak */}
+        <View
+          style={{
+            width: w * 0.48,
+            height: w * 0.48,
+            backgroundColor: color,
+            transform: [{ rotate: '45deg' }],
+            marginLeft: -w * 0.08,
+            marginBottom: -w * 0.16,
+          }}
+        />
+        {/* Right taller peak */}
+        <View
+          style={{
+            width: w * 0.65,
+            height: w * 0.65,
+            backgroundColor: color,
+            transform: [{ rotate: '45deg' }],
+            marginLeft: -w * 0.12,
+            marginBottom: -w * 0.22,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+/**
+ * Clean vector Camcorder / Video Camera Icon (Replace Video & Video badge)
+ * Rounded camera body with lens cone on the right
+ */
+export const CamcorderIcon = ({ color = '#313A46', size = 18 }) => {
+  const bodyW = size * 0.78;
+  const bodyH = size * 0.64;
+  const lensW = size * 0.34;
+  const lensH = bodyH * 0.75;
+  return (
+    <View
+      style={{
+        width: bodyW + lensW + 2,
+        height: bodyH,
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      {/* Camcorder body */}
+      <View
+        style={{
+          width: bodyW,
+          height: bodyH,
+          borderRadius: 3,
+          borderWidth: 1.6,
+          borderColor: color,
+        }}
+      />
+      {/* Lens triangle pointing right */}
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          borderTopWidth: lensH * 0.42,
+          borderBottomWidth: lensH * 0.42,
+          borderLeftWidth: lensW,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+          borderLeftColor: color,
+          marginLeft: 2,
+        }}
+      />
+    </View>
+  );
+};

package/src/Componanats/KeyboardAvoidingWrapper.js

@@ -1,43 +1,35 @@
-import { KeyboardAvoidingView, Platform, TouchableWithoutFeedback, Dimensions, View, ScrollView } from 'react-native'
-import React from 'react'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  View,
+} from 'react-native';
+import React from 'react';
 
-const KeyboardAvoidingWrapper = ({ children }) => {
-  
+const KeyboardAvoidingWrapper = ({
+  children,
+  style,
+  contentContainerStyle,
+  scrollEnabled = true,
+  bounces = false,
+}) => {
   return (
-    Platform.OS == 'ios' ? (
-      <KeyboardAvoidingView
-        style={{
-          width: '100%',
-          height: '100%'
-        }}
-        behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-        enabled={false}
+    <KeyboardAvoidingView
+      style={[{ flex: 1 }, style]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={[{ flexGrow: 1 }, contentContainerStyle]}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+        scrollEnabled={scrollEnabled}
+        bounces={bounces}
       >
-        <TouchableWithoutFeedback >{children}
-        </TouchableWithoutFeedback>
-      </KeyboardAvoidingView>) : (
-      <KeyboardAvoidingView
-        style={{
-          width: '100%',
-          height: "100%",
-          backgroundColor: "#fff"
-        }}
-        behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-        keyboardVerticalOffset={Platform.OS === 'android' ? -130 : 0}
-      >
-        <TouchableWithoutFeedback >
-            <View
-              style={{
-                height: '100%',
-                minHeight: Dimensions.get('window').height*0.97,
-              }}
-            >
-              {children}
-            </View>
-        </TouchableWithoutFeedback>
-      </KeyboardAvoidingView>
-    )
-  )
-}
+        <View style={{ flex: 1 }}>{children}</View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
 
-export default KeyboardAvoidingWrapper;
+export default KeyboardAvoidingWrapper;

package/src/Componanats/LoadingModal.js

@@ -1,15 +1,18 @@
 import React from 'react';
-import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
+import { View, ActivityIndicator, StyleSheet, Text, useColorScheme } from 'react-native';
+import { isShakebugDark } from './Theme';
 
-const LoadingModal = ({ visible, color = '#1dd3e3', text = '' }) => {
+const LoadingModal = ({ visible, color = '#2E2E2E', text = '' }) => {
+  const colorScheme = useColorScheme();
+  const isDark = isShakebugDark(colorScheme);
   if (!visible) return null;
 
   return (
     <View style={styles.overlay} pointerEvents="auto">
       <View style={styles.backdrop} />
-      <View style={styles.indicatorContainer}>
+      <View style={[styles.indicatorContainer, { backgroundColor: isDark ? '#2b2f38' : '#ffffff' }]}>
         <ActivityIndicator size="large" color={color} />
-        {text ? <Text style={styles.text}>{text}</Text> : null}
+        {text ? <Text style={[styles.text, { color: isDark ? '#ffffff' : '#000000' }]}>{text}</Text> : null}
       </View>
     </View>
   );

package/src/Componanats/NavigationContext.js

@@ -12,6 +12,13 @@ export const NavigationProvider = ({ children }) => {
     setNavigationState((prevState) => [...prevState, { name: screen, params }]);
   };
 
+  const replace = (screen, params = {}) => {
+    setNavigationState((prevState) => {
+      const copy = prevState.length > 1 ? prevState.slice(0, -1) : [];
+      return [...copy, { name: screen, params }];
+    });
+  };
+
   const goBack = (steps = 1) => {
     setNavigationState((prevState) => prevState.slice(0, -steps));
   };
@@ -32,7 +39,7 @@ export const NavigationProvider = ({ children }) => {
   }, [navigationState]);
 
   return (
-    <NavigationContext.Provider value={{ navigationState, navigate, goBack, focusedScreen, goToScreenAtIndex}}>
+    <NavigationContext.Provider value={{ navigationState, navigate, replace, goBack, focusedScreen, goToScreenAtIndex}}>
       {children}
     </NavigationContext.Provider>
   );