feat: enable auto masking screenshots in RN

Author: AyaMahmoud148

RNInstabug.podspec

@@ -16,5 +16,7 @@ Pod::Spec.new do |s|
   s.source_files = "ios/**/*.{h,m,mm}"
 
   s.dependency 'React-Core'
-  use_instabug!(s)
+  # use_instabug!(s)
+  s.dependency 'Instabug'
+
 end

android/src/main/java/com/instabug/reactlibrary/ArgsRegistry.java

@@ -17,6 +17,7 @@
 import com.instabug.library.invocation.util.InstabugVideoRecordingButtonPosition;
 import com.instabug.library.sessionreplay.model.SessionMetadata;
 import com.instabug.library.ui.onboarding.WelcomeMessage;
+import com.instabug.library.MaskingType;
 
 import java.util.ArrayList;
 import java.util.HashMap;
@@ -60,6 +61,7 @@ static Map<String, Object> getAll() {
             putAll(locales);
             putAll(placeholders);
             putAll(launchType);
+            putAll(autoMaskingTypes);
         }};
     }
 
@@ -253,5 +255,10 @@ static Map<String, Object> getAll() {
         put(SessionMetadata.LaunchType.COLD,"cold");
         put(SessionMetadata.LaunchType.WARM,"warm" );
     }};
-
+    public static final ArgsMap<Integer> autoMaskingTypes = new ArgsMap<Integer>() {{
+        put("labels", MaskingType.LABELS);
+        put("textInputs", MaskingType.TEXT_INPUTS);
+        put("media", MaskingType.MEDIA);
+        put("none", MaskingType.MASK_NOTHING);
+    }};
 }

android/src/main/java/com/instabug/reactlibrary/RNInstabugReactnativeModule.java

@@ -1274,4 +1274,21 @@ public Map<String, Object> getConstants() {
 
         return constants;
     }
+     /**
+     * Sets the auto mask screenshots types.
+     * @param autoMaskingTypes The masking type to be applied.
+     */
+    @ReactMethod
+public void enableAutoMasking(@NonNull ReadableArray autoMaskingTypes) {
+    int[] autoMassingTypesArray = new int[autoMaskingTypes.size()];
+    for (int i=0;i< autoMaskingTypes.size();i++)
+    {
+        String key = autoMaskingTypes.getString(i);
+         
+        autoMassingTypesArray[i]= ArgsRegistry.autoMaskingTypes.get(key);
+        
+    }
+
+        Instabug.setAutoMaskScreenshotsTypes(autoMassingTypesArray);
+}
 }

android/src/test/java/com/instabug/reactlibrary/RNInstabugReactnativeModuleTest.java

@@ -25,6 +25,7 @@
 import com.instabug.library.internal.module.InstabugLocale;
 import com.instabug.library.ui.onboarding.WelcomeMessage;
 import com.instabug.reactlibrary.utils.MainThreadHandler;
+import com.instabug.library.MaskingType;
 
 import org.junit.After;
 import org.junit.Assert;
@@ -662,4 +663,18 @@ public void testW3CCaughtHeaderFlag(){
         boolean expected=internalAPM._isFeatureEnabled(CoreFeature.W3C_ATTACHING_CAPTURED_HEADER);
         verify(promise).resolve(expected);
     }
+
+    @Test
+    public void testEnableAutoMasking(){
+
+            String maskLabel = "labels";
+            String maskTextInputs = "textInputs";
+            String maskMedia = "media";
+            String maskNone = "none";
+    
+    
+            rnModule.enableAutoMasking(JavaOnlyArray.of(maskLabel, maskMedia, maskTextInputs,maskNone));
+    
+            mockInstabug.verify(() -> Instabug.setAutoMaskScreenshotsTypes(MaskingType.LABELS,MaskingType.MEDIA,MaskingType.TEXT_INPUTS,MaskingType.MASK_NOTHING));
+    }
 }

examples/default/ios/Podfile

@@ -15,7 +15,7 @@ target 'InstabugExample' do
   config = use_native_modules!
   rn_maps_path = '../node_modules/react-native-maps'
   pod 'react-native-google-maps', :path => rn_maps_path
-  # Flags change depending on the env values.
+  pod 'Instabug', :podspec => 'https://ios-releases.instabug.com/custom/feature-add-rct-text-view-to-automasked-views/14.2.0/Instabug.podspec'  # Flags change depending on the env values.
   flags = get_default_flags()
 
   use_react_native!(

examples/default/ios/Podfile.lock

@@ -31,7 +31,7 @@ PODS:
   - hermes-engine (0.75.4):
     - hermes-engine/Pre-built (= 0.75.4)
   - hermes-engine/Pre-built (0.75.4)
-  - Instabug (14.1.0)
+  - Instabug (14.2.0)
   - instabug-reactnative-ndk (0.1.0):
     - DoubleConversion
     - glog
@@ -1624,7 +1624,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - RNInstabug (14.1.0):
-    - Instabug (= 14.1.0)
+    - Instabug
     - React-Core
   - RNReanimated (3.16.1):
     - DoubleConversion
@@ -1768,6 +1768,7 @@ DEPENDENCIES:
   - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - Instabug (from `https://ios-releases.instabug.com/custom/feature-add-rct-text-view-to-automasked-views/14.2.0/Instabug.podspec`)
   - instabug-reactnative-ndk (from `../node_modules/instabug-reactnative-ndk`)
   - OCMock
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
@@ -1847,7 +1848,6 @@ SPEC REPOS:
   trunk:
     - Google-Maps-iOS-Utils
     - GoogleMaps
-    - Instabug
     - OCMock
     - SocketRocket
 
@@ -1865,6 +1865,8 @@ EXTERNAL SOURCES:
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2024-08-15-RNv0.75.1-4b3bf912cc0f705b51b71ce1a5b8bd79b93a451b
+  Instabug:
+    :podspec: https://ios-releases.instabug.com/custom/feature-add-rct-text-view-to-automasked-views/14.2.0/Instabug.podspec
   instabug-reactnative-ndk:
     :path: "../node_modules/instabug-reactnative-ndk"
   RCT-Folly:
@@ -2017,7 +2019,7 @@ SPEC CHECKSUMS:
   Google-Maps-iOS-Utils: f77eab4c4326d7e6a277f8e23a0232402731913a
   GoogleMaps: 032f676450ba0779bd8ce16840690915f84e57ac
   hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
-  Instabug: 8cbca8974168c815658133e2813f5ac3a36f8e20
+  Instabug: e55d2b7f7555e4df429795fd528d14de6f150203
   instabug-reactnative-ndk: d765ac289d56e8896398d02760d9abf2562fc641
   OCMock: 589f2c84dacb1f5aaf6e4cec1f292551fe748e74
   RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
@@ -2084,14 +2086,14 @@ SPEC CHECKSUMS:
   ReactCommon: 6a952e50c2a4b694731d7682aaa6c79bc156e4ad
   RNCClipboard: 2821ac938ef46f736a8de0c8814845dde2dcbdfb
   RNGestureHandler: 511250b190a284388f9dd0d2e56c1df76f14cfb8
-  RNInstabug: 96e629f47c0af2e9455fbcf800d12049f980d873
+  RNInstabug: b77a5561ccf3806073944bc085a4e4b31f91d31d
   RNReanimated: f42a5044d121d68e91680caacb0293f4274228eb
   RNScreens: c7ceced6a8384cb9be5e7a5e88e9e714401fd958
   RNSVG: 8b1a777d54096b8c2a0fd38fc9d5a454332bbb4d
   RNVectorIcons: 6382277afab3c54658e9d555ee0faa7a37827136
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 055f92ad73f8c8600a93f0e25ac0b2344c3b07e6
 
-PODFILE CHECKSUM: 63bf073bef3872df95ea45e7c9c023a331ebb3c3
+PODFILE CHECKSUM: 654123f40bb27c9e3d81b1a5e6b2b60fc29432a2
 
-COCOAPODS: 1.14.0
+COCOAPODS: 1.16.2

ios/RNInstabug/ArgsRegistry.h

@@ -25,5 +25,6 @@ typedef NSDictionary<NSString*, NSNumber*> ArgsDictionary;
 + (ArgsDictionary *) launchType;
 
 + (NSDictionary<NSString *, NSString *> *) placeholders;
++ (ArgsDictionary *)autoMaskingTypes;
 
 @end

ios/RNInstabug/ArgsRegistry.m

@@ -21,6 +21,8 @@ + (NSMutableDictionary *) getAll {
     [all addEntriesFromDictionary:ArgsRegistry.nonFatalExceptionLevel];
     [all addEntriesFromDictionary:ArgsRegistry.placeholders];
     [all addEntriesFromDictionary:ArgsRegistry.launchType];
+    [all addEntriesFromDictionary:ArgsRegistry.autoMaskingTypes];
+
 
     return all;
 }
@@ -249,4 +251,12 @@ + (ArgsDictionary *) launchType {
     };
 }
 
++ (ArgsDictionary *)autoMaskingTypes {
+    return @{
+        @"labels" : @(IBGAutoMaskScreenshotOptionLabels),
+        @"textInputs" : @(IBGAutoMaskScreenshotOptionTextInputs),
+        @"media" : @(IBGAutoMaskScreenshotOptionMedia),
+        @"none" : @(IBGAutoMaskScreenshotOptionMaskNothing)
+    };
+}
 @end

ios/RNInstabug/InstabugReactBridge.h

@@ -138,4 +138,6 @@ w3cExternalTraceAttributes:(NSDictionary * _Nullable)w3cExternalTraceAttributes;
 - (void)addFeatureFlags:(NSDictionary *)featureFlagsMap;
 - (void)removeFeatureFlags:(NSArray *)featureFlags;
 - (void)removeAllFeatureFlags;
+- (void)enableAutoMasking:(NSArray *)autoMaskingTypes;
+
 @end

ios/RNInstabug/InstabugReactBridge.m

@@ -439,5 +439,16 @@ + (BOOL)requiresMainQueueSetup
 + (BOOL)iOSVersionIsLessThan:(NSString *)iOSVersion {
     return [iOSVersion compare:[UIDevice currentDevice].systemVersion options:NSNumericSearch] == NSOrderedDescending;
 };
+RCT_EXPORT_METHOD(enableAutoMasking:(NSArray *)autoMaskingTypes) {
 
+   IBGAutoMaskScreenshotOption autoMaskingOptions = 0;
+
+    for (NSNumber *event in autoMaskingTypes) {
+
+        autoMaskingOptions |= [event intValue];
+    }
+
+    [Instabug setAutoMaskScreenshots: autoMaskingOptions];
+
+};
 @end

ios/RNInstabug/RCTConvert+InstabugEnums.m

@@ -109,4 +109,10 @@ @implementation RCTConvert (InstabugEnums)
   integerValue
 );
 
+RCT_ENUM_CONVERTER(
+  IBGAutoMaskScreenshotOption,
+  ArgsRegistry.autoMaskingTypes,
+  IBGAutoMaskScreenshotOptionMaskNothing,
+  integerValue
+);
 @end

src/modules/Instabug.ts

@@ -13,6 +13,7 @@ import Report from '../models/Report';
 import { emitter, NativeEvents, NativeInstabug } from '../native/NativeInstabug';
 import { registerW3CFlagsListener } from '../utils/FeatureFlags';
 import {
+  AutoMaskingType,
   ColorTheme,
   Locale,
   LogLevel,
@@ -678,3 +679,11 @@ export const _registerW3CFlagsChangeListener = (
   });
   NativeInstabug.registerW3CFlagsChangeListener();
 };
+
+/**
+ * Sets the auto mask screenshots types.
+ * @param autoMaskingTypes The masking type to be applied.
+ */
+export const enableAutoMasking = (autoMaskingTypes: AutoMaskingType[]) => {
+  NativeInstabug.enableAutoMasking(autoMaskingTypes);
+};

src/native/NativeConstants.ts

@@ -13,8 +13,8 @@ export type NativeConstants = NativeSdkDebugLogsLevel &
   NativeLocale &
   NativeNonFatalErrorLevel &
   NativeStringKey &
-  NativeLaunchType;
-
+  NativeLaunchType &
+  NativeAutoMaskingType;
 interface NativeSdkDebugLogsLevel {
   sdkDebugLogsLevelVerbose: any;
   sdkDebugLogsLevelDebug: any;
@@ -195,3 +195,10 @@ interface NativeLaunchType {
   warm: any;
   unknown: any;
 }
+
+interface NativeAutoMaskingType {
+  labels: any;
+  textInputs: any;
+  media: any;
+  none: any;
+}

src/native/NativeInstabug.ts

@@ -2,6 +2,7 @@ import { NativeEventEmitter, NativeModule, ProcessedColorValue } from 'react-nat
 
 import type Report from '../models/Report';
 import type {
+  AutoMaskingType,
   ColorTheme,
   InvocationEvent,
   Locale,
@@ -152,6 +153,7 @@ export interface InstabugNativeModule extends NativeModule {
 
   // W3C Feature Flags Listener for Android
   registerW3CFlagsChangeListener(): void;
+  enableAutoMasking(autoMaskingTypes: AutoMaskingType[]): void;
 }
 
 export const NativeInstabug = NativeModules.Instabug;

src/utils/Enums.ts

@@ -241,3 +241,9 @@ export enum LaunchType {
    */
   warm = constants.warm,
 }
+export enum AutoMaskingType {
+  labels = constants.labels,
+  textInputs = constants.textInputs,
+  media = constants.media,
+  none = constants.none,
+}

test/mocks/mockInstabug.ts

@@ -73,6 +73,7 @@ const mockInstabug: InstabugNativeModule = {
   isW3ExternalGeneratedHeaderEnabled: jest.fn(),
   isW3CaughtHeaderEnabled: jest.fn(),
   registerW3CFlagsChangeListener: jest.fn(),
+  enableAutoMasking: jest.fn(),
 };
 
 export default mockInstabug;