shakebug-react-native 1.0.14

package/NetInfo/src/internal/state.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {NativeEventSubscription} from 'react-native';
+import NativeInterface from './nativeInterface';
+import InternetReachability from './internetReachability';
+import * as Types from './types';
+import * as PrivateTypes from './privateTypes';
+
+export default class State {
+  private _nativeEventSubscription: NativeEventSubscription | null = null;
+  private _subscriptions = new Set<Types.NetInfoChangeHandler>();
+  private _latestState: Types.NetInfoState | null = null;
+  private _internetReachability: InternetReachability;
+
+  constructor(configuration: Types.NetInfoConfiguration) {
+    // Add the listener to the internet connectivity events
+    this._internetReachability = new InternetReachability(
+      configuration,
+      this._handleInternetReachabilityUpdate,
+    );
+
+    // Add the subscription to the native events
+    this._nativeEventSubscription = NativeInterface.eventEmitter.addListener(
+      PrivateTypes.DEVICE_CONNECTIVITY_EVENT,
+      this._handleNativeStateUpdate,
+    );
+
+    // Fetch the current state from the native module
+    this._fetchCurrentState();
+  }
+
+  private _handleNativeStateUpdate = (
+    state: PrivateTypes.NetInfoNativeModuleState,
+  ): void => {
+    // Update the internet reachability module
+    this._internetReachability.update(state);
+
+    // Convert the state from native to JS shape
+    const convertedState = this._convertState(state);
+
+    // Update the listeners
+    this._latestState = convertedState;
+    this._subscriptions.forEach((handler): void => handler(convertedState));
+  };
+
+  private _handleInternetReachabilityUpdate = (
+    isInternetReachable: boolean | null | undefined,
+  ): void => {
+    if (!this._latestState) {
+      return;
+    }
+
+    const nextState = {
+      ...this._latestState,
+      isInternetReachable,
+    } as Types.NetInfoState;
+    this._latestState = nextState;
+    this._subscriptions.forEach((handler): void => handler(nextState));
+  };
+
+  public _fetchCurrentState = async (
+    requestedInterface?: string,
+  ): Promise<Types.NetInfoState> => {
+    const state = await NativeInterface.getCurrentState(requestedInterface);
+
+    // Update the internet reachability module
+    this._internetReachability.update(state);
+    // Convert and store the new state
+    const convertedState = this._convertState(state);
+    if (!requestedInterface) {
+      this._latestState = convertedState;
+      this._subscriptions.forEach((handler): void => handler(convertedState));
+    }
+
+    return convertedState;
+  };
+
+  private _convertState = (
+    input: PrivateTypes.NetInfoNativeModuleState,
+  ): Types.NetInfoState => {
+    if (typeof input.isInternetReachable === 'boolean') {
+      return input as Types.NetInfoState;
+    } else {
+      return {
+        ...input,
+        isInternetReachable: this._internetReachability.currentState(),
+      } as Types.NetInfoState;
+    }
+  };
+
+  public latest = (
+    requestedInterface?: string,
+  ): Promise<Types.NetInfoState> => {
+    if (requestedInterface) {
+      return this._fetchCurrentState(requestedInterface);
+    } else if (this._latestState) {
+      return Promise.resolve(this._latestState);
+    } else {
+      return this._fetchCurrentState();
+    }
+  };
+
+  public add = (handler: Types.NetInfoChangeHandler): void => {
+    // Add the subscription handler to our set
+    this._subscriptions.add(handler);
+
+    // Send it the latest data we have
+    if (this._latestState) {
+      handler(this._latestState);
+    } else {
+      this.latest().then(handler);
+    }
+  };
+
+  public remove = (handler: Types.NetInfoChangeHandler): void => {
+    this._subscriptions.delete(handler);
+  };
+
+  public tearDown = (): void => {
+    if (this._internetReachability) {
+      this._internetReachability.tearDown();
+    }
+
+    if (this._nativeEventSubscription) {
+      this._nativeEventSubscription.remove();
+    }
+
+    this._subscriptions.clear();
+  };
+}

package/NetInfo/src/internal/types.ts

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export enum NetInfoStateType {
+  unknown = 'unknown',
+  none = 'none',
+  cellular = 'cellular',
+  wifi = 'wifi',
+  bluetooth = 'bluetooth',
+  ethernet = 'ethernet',
+  wimax = 'wimax',
+  vpn = 'vpn',
+  other = 'other',
+}
+
+export type NetInfoMethodType = 'HEAD' | 'GET';
+
+export enum NetInfoCellularGeneration {
+  '2g' = '2g',
+  '3g' = '3g',
+  '4g' = '4g',
+  '5g' = '5g',
+}
+
+export interface NetInfoConnectedDetails {
+  isConnectionExpensive: boolean;
+}
+
+interface NetInfoConnectedState<
+  T extends NetInfoStateType,
+  D extends Record<string, unknown> = Record<string, unknown>
+> {
+  type: T;
+  isConnected: true;
+  isInternetReachable: boolean | null;
+  details: D & NetInfoConnectedDetails;
+  isWifiEnabled?: boolean;
+}
+
+interface NetInfoDisconnectedState<T extends NetInfoStateType> {
+  type: T;
+  isConnected: false;
+  isInternetReachable: false;
+  details: null;
+  isWifiEnabled?: boolean;
+}
+
+export interface NetInfoUnknownState {
+  type: NetInfoStateType.unknown;
+  isConnected: boolean | null;
+  isInternetReachable: null;
+  details: null;
+  isWifiEnabled?: boolean;
+}
+
+export type NetInfoNoConnectionState = NetInfoDisconnectedState<
+  NetInfoStateType.none
+>;
+export type NetInfoDisconnectedStates =
+  | NetInfoUnknownState
+  | NetInfoNoConnectionState;
+
+export type NetInfoCellularState = NetInfoConnectedState<
+  NetInfoStateType.cellular,
+  {
+    cellularGeneration: NetInfoCellularGeneration | null;
+    carrier: string | null;
+  }
+>;
+export type NetInfoWifiState = NetInfoConnectedState<
+  NetInfoStateType.wifi,
+  {
+    ssid: string | null;
+    bssid: string | null;
+    strength: number | null;
+    ipAddress: string | null;
+    subnet: string | null;
+    frequency: number | null;
+    linkSpeed: number | null;
+    rxLinkSpeed: number | null;
+    txLinkSpeed: number | null;
+  }
+>;
+export type NetInfoBluetoothState = NetInfoConnectedState<
+  NetInfoStateType.bluetooth
+>;
+export type NetInfoEthernetState = NetInfoConnectedState<
+  NetInfoStateType.ethernet,
+  {
+    ipAddress: string | null;
+    subnet: string | null;
+  }
+>;
+export type NetInfoWimaxState = NetInfoConnectedState<NetInfoStateType.wimax>;
+export type NetInfoVpnState = NetInfoConnectedState<NetInfoStateType.vpn>;
+export type NetInfoOtherState = NetInfoConnectedState<NetInfoStateType.other>;
+export type NetInfoConnectedStates =
+  | NetInfoCellularState
+  | NetInfoWifiState
+  | NetInfoBluetoothState
+  | NetInfoEthernetState
+  | NetInfoWimaxState
+  | NetInfoVpnState
+  | NetInfoOtherState;
+
+export type NetInfoState = NetInfoDisconnectedStates | NetInfoConnectedStates;
+
+export type NetInfoChangeHandler = (state: NetInfoState) => void;
+export type NetInfoSubscription = () => void;
+
+export interface NetInfoConfiguration {
+  reachabilityUrl: string;
+  reachabilityMethod?: NetInfoMethodType;
+  reachabilityHeaders?: Record<string, string>;
+  reachabilityTest: (response: Response) => Promise<boolean>;
+  reachabilityLongTimeout: number;
+  reachabilityShortTimeout: number;
+  reachabilityRequestTimeout: number;
+  reachabilityShouldRun: () => boolean;
+  shouldFetchWiFiSSID: boolean;
+  useNativeReachability: boolean;
+}

package/README.md

@@ -0,0 +1,246 @@
+# shakebug-react-native
+
+
+<a href="https://www.shakebug.com"><img src="https://www.shakebug.com/assets/images/logo.png"></a>
+
+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.
+
+For more info, visit [shakebug.com](https://www.shakebug.com).
+
+
+
+## Installation
+
+Navigate to your React Native project directory and install `shakebug-react-native`
+
+```bash
+ npm install shakebug-react-native
+```
+
+Or if you prefer to use Yarn instead of npm:
+
+```bash
+ yarn add shakebug-react-native
+```
+
+### iOS
+
+1. You need to provide permissions inside `ios/YourProjectName/info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string></string>
+
+<key>NSMicrophoneUsageDescription</key>
+<string></string>
+
+<key>NSPhotoLibraryUsageDescription</key>
+<string></string>
+```
+
+2. CocoaPods installation:
+
+```bash
+    cd ios && pod install && cd ..
+```
+
+### Android
+
+Android minSdkVersion 24 required
+You can change it in `android/build.gradle`
+
+```bash
+    buildscript {
+        ...
+        ext {
+            ...
+            minSdkVersion = 24 or later
+            ...
+        }
+        ...
+    }
+```
+
+## Usage
+
+you Need to import ShakebugView in root file of application (App.js)
+
+
+```javascript
+
+Import ShakebugView from 'shakebug-react-native';
+
+export default App = () => {
+    return(
+        <ShakebugView 
+            Android_appkey= “your android app key”  
+            iOS_appkey= “your ios app key”
+            other options...
+        >
+            //Your code...
+        </ShakebugView>
+    )	
+} 
+```
+
+If you use NavigationContainer in App.js/root file (where you import ShakebugView) then you need to pass independent as parameter in NavigationContainer
+
+```javascript
+
+Import ShakebugView from 'shakebug-react-native';
+
+export default App = () => {
+    return(
+        <ShakebugView 
+            Android_appkey= “your android app key”  
+            iOS_appkey= “your ios app key”
+            other options…
+        >
+	        <NavigationContainer independent>
+                //Your code...	
+	        </NavigationContainer>
+        </ShakebugView>
+    )	
+}
+
+```
+You can add event on click:
+
+```javascript
+
+import { Button } from 'react-native';
+import ShakebugView, { addEventKey } from 'react-native-shakebug';
+
+export default App = () => {
+    return(
+        <Button 
+            title='Prees'
+            onPress={() => {
+                addEventKey("key_name", value)
+            }}
+        />
+    )
+}
+
+```
+
+To ensure the privacy of your users' sensitive information, such as payment details or account information etc.., you can mark any view containing this information as private using ShakebugSdkProtectedView. By doing so, the private view will automatically appear with a black overlay in any screenshots taken and while recording screen:
+
+```javascript
+
+import { Button } from 'react-native';
+import { ShakebugSdkProtectedView } from 'react-native-shakebug';
+
+export default App = () => {
+    return(
+        <ShakebugSdkProtectedView>
+            <View>
+                <Text>This is sensitive information!</Text>
+            </View>
+        </ShakebugSdkProtectedView>
+    )
+}
+
+```
+
+## Properties
+
+<table>
+    <tr>
+        <th>Key Name</th>
+        <th>Type</th>
+        <th>Description</th>
+        <th>Default Value</th>
+    <tr>
+    <tr>
+        <td>Android_appkey</td>
+        <td>String(required)</td>
+        <td>This initializes Shake Bug with the default invocation event. Be sure to pass <Your Key> your application key which given by ShakeBug website.</td>
+        <td></td>
+    </tr>
+       <tr>
+        <td>iOS_appkey</td>
+        <td>String(required)</td>
+        <td>This initializes Shake Bug with the default invocation event. Be sure to pass <Your Key> your application key which given by ShakeBug website.</td>
+        <td></td>
+   </tr>
+    <tr>
+        <td>showTutorialScreenFirstTime</td>
+        <td>boolean</td>
+        <td>Add the following for enabling/disabling first time tutorial screen.</td>
+        <td>true</td>
+    </tr>
+    <tr>
+        <td>ShakebugThemeColor</td>
+        <td>String</td>
+        <td>Developer can also set custome theme color in Shakebug SDK screens.</td>
+        <td></td>
+    </tr>
+    <tr>
+        <td>changeSDKScreenTitle</td>
+        <td>Array</td>
+        <td>Developer can also set custom title for Shakebug annotate and feedback input screen.</td>
+        <td>["Annotate your bug", "Add Details"]</td>
+    </tr>
+    <tr>
+        <td>allowToReportBugByShakingMobile</td>
+        <td>boolean</td>
+        <td>Add the following to allow report bug by shaking mobile.</td>
+        <td>true</td>
+    </tr>
+    <tr>
+        <td>allowToReportBugByScreenCapture</td>
+        <td>boolean</td>
+        <td>Add the following to allow report bug by screenshot capture event.</td>
+        <td>false</td>
+    </tr>
+    <tr>
+        <td>ShakebugLanguage</td>
+        <td>String</td>
+        <td>If you want to set forcefully any language for the bug reporting screen then use following prop.</td>
+        <td>Your Device's language</td>
+    </tr>
+    <tr>
+        <td>allowCrashReport</td>
+        <td>boolean</td>
+        <td>If you want to allow report crash while app get crashed then use following prop.</td>
+        <td>true</td>
+    </tr>
+    <tr>
+        <td>makeLogEnabled</td>
+        <td>boolean</td>
+        <td>If you want to show any logs on console then use following prop.</td>
+        <td>false</td>
+    </tr>
+    <tr>
+        <td>setShakebugSDKEndPointURL</td>
+        <td>Array</td>
+        <td>If you have on-premise hosting plan then following prop will be used.</td>
+        <td></td>
+    </tr>
+</table>
+
+## Methods
+
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Description</th>
+        <th>Usage</th>
+    </tr>
+    <tr>
+        <td>addEventKey</td>
+        <td>If you want add event to any screen or activity use following method</td>
+        <td>addEventKey("Key_name", value)</td>
+    </tr>
+</table>
+
+## Documentation
+
+[View our documentation](https://www.shakebug.com/installation#react). 
+
+## Contact
+
+Visit on: [https://www.shakebug.com](https://www.shakebug.com).
+
+Contact us on [support@shakebug.com](mailto:support@shakebug.com) in case of any use.

package/RecordScreen/src/index.tsx

@@ -0,0 +1,75 @@
+import { NativeModules, Dimensions } from 'react-native';
+
+export const RecordingResult = {
+  Started: 'started',
+  PermissionError: 'permission_error',
+} as const;
+
+export type RecordingStartResponse =
+  (typeof RecordingResult)[keyof typeof RecordingResult];
+
+export type RecordScreenConfigType = {
+  fps?: number;
+  bitrate?: number;
+  mic?: boolean;
+};
+
+export type RecordingSuccessResponse = {
+  status: 'success';
+  result: {
+    outputURL: string;
+  };
+};
+
+export type RecordingErrorResponse = {
+  status: 'error';
+  result: unknown;
+};
+
+export type RecordingResponse =
+  | RecordingSuccessResponse
+  | RecordingErrorResponse;
+
+type RecordScreenNativeModule = {
+  setup(
+    config: RecordScreenConfigType & { width: number; height: number }
+  ): void;
+  startRecording(): Promise<RecordingStartResponse>;
+  stopRecording(): Promise<RecordingResponse>;
+  clean(): Promise<string>;
+};
+
+const { ShakebugSDKRecordScreen } = NativeModules;
+
+const RS = ShakebugSDKRecordScreen as RecordScreenNativeModule;
+
+class ReactNativeRecordScreenClass {
+  private setup(config: RecordScreenConfigType = {}): void {
+    const { width, height } = Dimensions.get('window');
+    RS.setup({
+      mic: true,
+      width,
+      height,
+      fps: 60,
+      bitrate: 1920 * 1080 * 144,
+      ...config,
+    });
+  }
+
+  startRecording(config: RecordScreenConfigType = {}) {
+    this.setup(config);
+    return RS.startRecording();
+  }
+
+  stopRecording() {
+    return RS.stopRecording();
+  }
+
+  clean() {
+    return RS.clean();
+  }
+}
+
+const ReactNativeRecordScreen = new ReactNativeRecordScreenClass();
+
+export default ReactNativeRecordScreen;

package/ScreenShot/src/RNViewShot.js

@@ -0,0 +1,3 @@
+//@flow
+import { NativeModules } from "react-native";
+export default NativeModules.ShakebugSDKRNViewShot

package/ScreenShot/src/RNViewShot.web.js

@@ -0,0 +1,42 @@
+//@flow
+import html2canvas from "html2canvas";
+
+async function captureRef(view, options) {
+  if (options.result === "tmpfile") {
+    console.warn("Tmpfile is not implemented for web. Try base64 or file.\n"+
+                 "For compatibility, it currently returns the same result as data-uri");
+  }
+
+  // TODO: implement snapshotContentContainer option
+
+  const h2cOptions = {};
+  let renderedCanvas = await html2canvas(view, h2cOptions);
+
+  if (options.width && options.height) {
+    // Resize result
+    const resizedCanvas = document.createElement('canvas');
+    const resizedContext = resizedCanvas.getContext('2d');
+    resizedCanvas.height = options.height;
+    resizedCanvas.width = options.width;
+    resizedContext.drawImage(renderedCanvas, 0, 0, resizedCanvas.width, resizedCanvas.height);
+    renderedCanvas = resizedCanvas;
+  }
+
+  const dataUrl = renderedCanvas.toDataURL("image/" + options.format, options.quality);
+  if (options.result === "data-uri" || options.result === "tmpfile") return dataUrl;
+  return dataUrl.replace(/data:image\/(\w+);base64,/, '');
+}
+
+function captureScreen(options) {
+  return captureRef(window.document.body, options);
+}
+
+function releaseCapture(uri) {
+  throw new Error("Tmpfile is not implemented for web. Try base64 or file");
+}
+
+export default {
+  captureRef,
+  captureScreen,
+  releaseCapture
+}