feat: Support Advanced UI customization

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [Unreleased](https://github.com/Instabug/Instabug-React-Native/compare/v15.0.1...dev)
+
+### Added
+
+- Add Support Advanced UI customization. ([#1411](https://github.com/Instabug/Instabug-React-Native/pull/1411))
+
 ## [15.0.1](https://github.com/Instabug/Instabug-React-Native/compare/v14.3.0...v15.0.1)
 
 ### Added

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

@@ -6,10 +6,14 @@
 
 import android.app.Application;
 import android.graphics.Bitmap;
+import android.graphics.Color;
+import android.graphics.Typeface;
 import android.net.Uri;
 import android.util.Log;
 import android.view.View;
 
+import com.facebook.react.bridge.ReactApplicationContext;
+
 import androidx.annotation.NonNull;
 import androidx.annotation.UiThread;
 
@@ -45,6 +49,7 @@
 import com.instabug.library.internal.module.InstabugLocale;
 import com.instabug.library.invocation.InstabugInvocationEvent;
 import com.instabug.library.logging.InstabugLog;
+import com.instabug.library.model.IBGTheme;
 import com.instabug.library.model.NetworkLog;
 import com.instabug.library.model.Report;
 import com.instabug.library.ui.onboarding.WelcomeMessage;
@@ -1351,4 +1356,211 @@ public void run() {
             }
         });
     }
+    /**
+     * Sets the theme for Instabug using a configuration object.
+     *
+     * @param themeConfig A ReadableMap containing theme properties such as colors, fonts, and text styles.
+     */
+    @ReactMethod
+    public void setTheme(final ReadableMap themeConfig) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    com.instabug.library.model.IBGTheme.Builder builder = new com.instabug.library.model.IBGTheme.Builder();
+
+                    if (themeConfig.hasKey("primaryColor")) {
+                        builder.setPrimaryColor(getColor(themeConfig, "primaryColor"));
+                    }
+                    if (themeConfig.hasKey("secondaryTextColor")) {
+                        builder.setSecondaryTextColor(getColor(themeConfig, "secondaryTextColor"));
+                    }
+                    if (themeConfig.hasKey("primaryTextColor")) {
+                        builder.setPrimaryTextColor(getColor(themeConfig, "primaryTextColor"));
+                    }
+                    if (themeConfig.hasKey("titleTextColor")) {
+                        builder.setTitleTextColor(getColor(themeConfig, "titleTextColor"));
+                    }
+                    if (themeConfig.hasKey("backgroundColor")) {
+                        builder.setBackgroundColor(getColor(themeConfig, "backgroundColor"));
+                    }
+
+                    if (themeConfig.hasKey("primaryTextStyle")) {
+                        builder.setPrimaryTextStyle(getTextStyle(themeConfig, "primaryTextStyle"));
+                    }
+                    if (themeConfig.hasKey("secondaryTextStyle")) {
+                        builder.setSecondaryTextStyle(getTextStyle(themeConfig, "secondaryTextStyle"));
+                    }
+                    if (themeConfig.hasKey("ctaTextStyle")) {
+                        builder.setCtaTextStyle(getTextStyle(themeConfig, "ctaTextStyle"));
+                    }
+                    setFontIfPresent(themeConfig, builder, "primaryFontPath", "primaryFontAsset", "primary");
+                    setFontIfPresent(themeConfig, builder, "secondaryFontPath", "secondaryFontAsset", "secondary");
+                    setFontIfPresent(themeConfig, builder, "ctaFontPath", "ctaFontAsset", "CTA");
+
+                    IBGTheme theme = builder.build();
+                    Instabug.setTheme(theme);
+
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
+
+    /**
+     * Retrieves a color value from the ReadableMap.
+     * 
+     * @param map The ReadableMap object.
+     * @param key The key to look for.
+     * @return The parsed color as an integer, or black if missing or invalid.
+     */
+    private int getColor(ReadableMap map, String key) {
+        try {
+            if (map != null && map.hasKey(key) && !map.isNull(key)) {
+                String colorString = map.getString(key);
+                return Color.parseColor(colorString);
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return Color.BLACK;
+    }
+
+    /**
+     * Retrieves a text style from the ReadableMap.
+     * 
+     * @param map The ReadableMap object.
+     * @param key The key to look for.
+     * @return The corresponding Typeface style, or Typeface.NORMAL if missing or invalid.
+     */
+    private int getTextStyle(ReadableMap map, String key) {
+        try {
+            if (map != null && map.hasKey(key) && !map.isNull(key)) {
+                String style = map.getString(key);
+                switch (style.toLowerCase()) {
+                    case "bold":
+                        return Typeface.BOLD;
+                    case "italic":
+                        return Typeface.ITALIC;
+                    case "bold_italic":
+                        return Typeface.BOLD_ITALIC;
+                    case "normal":
+                    default:
+                        return Typeface.NORMAL;
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return Typeface.NORMAL; 
+    }
+
+    /**
+     * Sets a font on the theme builder if the font configuration is present in the theme config.
+     * 
+     * @param themeConfig The theme configuration map
+     * @param builder The theme builder
+     * @param fileKey The key for font file path
+     * @param assetKey The key for font asset path
+     * @param fontType The type of font (for logging purposes)
+     */
+    private void setFontIfPresent(ReadableMap themeConfig, com.instabug.library.model.IBGTheme.Builder builder, 
+                                 String fileKey, String assetKey, String fontType) {
+        if (themeConfig.hasKey(fileKey) || themeConfig.hasKey(assetKey)) {
+            Typeface typeface = getTypeface(themeConfig, fileKey, assetKey);
+            if (typeface != null) {
+                switch (fontType) {
+                    case "primary":
+                        builder.setPrimaryTextFont(typeface);
+                        break;
+                    case "secondary":
+                        builder.setSecondaryTextFont(typeface);
+                        break;
+                    case "CTA":
+                        builder.setCtaTextFont(typeface);
+                        break;
+                }
+            } else {
+                Log.e("InstabugModule", "Failed to load " + fontType + " font");
+            }
+        }
+    }
+
+private Typeface getTypeface(ReadableMap map, String fileKey, String assetKey) {
+    try {
+        if (fileKey != null && map.hasKey(fileKey) && !map.isNull(fileKey)) {
+            String fontPath = map.getString(fileKey);
+            String fileName = getFileName(fontPath);
+
+            try {
+                Typeface typeface = Typeface.create(fileName, Typeface.NORMAL);
+                if (typeface != null && !typeface.equals(Typeface.DEFAULT)) {
+                    return typeface;
+                }
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+
+            try {
+                Typeface typeface = Typeface.createFromAsset(getReactApplicationContext().getAssets(), "fonts/" + fileName);
+                return typeface;
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+
+        if (assetKey != null && map.hasKey(assetKey) && !map.isNull(assetKey)) {
+            String assetPath = map.getString(assetKey);
+            String fileName = getFileName(assetPath);
+            try {
+                Typeface typeface = Typeface.createFromAsset(getReactApplicationContext().getAssets(), "fonts/" + fileName);
+                return typeface;
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+    } catch (Exception e) {
+        e.printStackTrace();
+    }
+
+    return Typeface.DEFAULT;
+}
+
+/**
+ * Extracts the filename from a path, removing any directory prefixes.
+ * 
+ * @param path The full path to the file
+ * @return Just the filename with extension
+ */
+private String getFileName(String path) {
+    if (path == null || path.isEmpty()) {
+        return path;
+    }
+
+    int lastSeparator = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'));
+    if (lastSeparator >= 0 && lastSeparator < path.length() - 1) {
+        return path.substring(lastSeparator + 1);
+    }
+
+    return path;
+}
+
+ /**
+     * Enables or disables displaying in full-screen mode, hiding the status and navigation bars.
+     * @param isEnabled A boolean to enable/disable setFullscreen.
+     */
+    @ReactMethod
+    public void setFullscreen(final boolean isEnabled) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                        Instabug.setFullscreen(isEnabled);
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
 }

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

@@ -704,4 +704,72 @@ public void testGetNetworkBodyMaxSize_resolvesPromiseWithExpectedValue() {
         verify(promise).resolve(expected);
     }
 
+    @Test
+    public void testEnablSetFullScreen() {
+        boolean isEnabled = true;
+
+        // when
+        rnModule.setFullscreen(isEnabled);
+
+        // then
+        verify(Instabug.class, times(1));
+        Instabug.setFullscreen(isEnabled);
+    }
+
+    @Test
+    public void testDisableSetFullScreen() {
+        // given
+        boolean isEnabled = false;
+
+        // when
+        rnModule.setFullscreen(isEnabled);
+
+        // then
+        verify(Instabug.class, times(1));
+        Instabug.setFullscreen(isEnabled);
+    }
+
+    @Test
+    public void testSetTheme() {
+        // given
+        JavaOnlyMap themeConfig = new JavaOnlyMap();
+        themeConfig.putString("primaryColor", "#FF0000");
+        themeConfig.putString("primaryTextColor", "#00FF00");
+        themeConfig.putString("secondaryTextColor", "#0000FF");
+        themeConfig.putString("titleTextColor", "#FFFF00");
+        themeConfig.putString("backgroundColor", "#FF00FF");
+        themeConfig.putString("primaryTextStyle", "bold");
+        themeConfig.putString("secondaryTextStyle", "italic");
+        themeConfig.putString("ctaTextStyle", "bold");
+
+        // Mock IBGTheme.Builder
+        com.instabug.library.model.IBGTheme.Builder mockBuilder = mock(com.instabug.library.model.IBGTheme.Builder.class);
+        com.instabug.library.model.IBGTheme mockTheme = mock(com.instabug.library.model.IBGTheme.class);
+
+        try (MockedConstruction<com.instabug.library.model.IBGTheme.Builder> mockedBuilder = mockConstruction(
+                com.instabug.library.model.IBGTheme.Builder.class,
+                (mock, context) -> {
+                    when(mock.setPrimaryColor(anyInt())).thenReturn(mock);
+                    when(mock.setPrimaryTextColor(anyInt())).thenReturn(mock);
+                    when(mock.setSecondaryTextColor(anyInt())).thenReturn(mock);
+                    when(mock.setTitleTextColor(anyInt())).thenReturn(mock);
+                    when(mock.setBackgroundColor(anyInt())).thenReturn(mock);
+                    when(mock.setPrimaryTextStyle(anyInt())).thenReturn(mock);
+                    when(mock.setSecondaryTextStyle(anyInt())).thenReturn(mock);
+                    when(mock.setCtaTextStyle(anyInt())).thenReturn(mock);
+                    when(mock.setPrimaryTextFont(any())).thenReturn(mock);
+                    when(mock.setSecondaryTextFont(any())).thenReturn(mock);
+                    when(mock.setCtaTextFont(any())).thenReturn(mock);
+                    when(mock.build()).thenReturn(mockTheme);
+                })) {
+
+            // when
+            rnModule.setTheme(themeConfig);
+
+            // then
+            verify(Instabug.class, times(1));
+            Instabug.setTheme(mockTheme);
+        }
+    }
+
 }

examples/default/ios/InstabugTests/InstabugSampleTests.m

@@ -651,6 +651,73 @@ - (void)testGetNetworkBodyMaxSize {
 
     OCMVerify(ClassMethod([mock getNetworkBodyMaxSize]));
 }
+- (void)testSetTheme {
+    id mock = OCMClassMock([Instabug class]);
+    id mockTheme = OCMClassMock([IBGTheme class]);
+
+    // Create theme configuration dictionary
+    NSDictionary *themeConfig = @{
+        @"primaryColor": @"#FF0000",
+        @"backgroundColor": @"#00FF00",
+        @"titleTextColor": @"#0000FF",
+        @"subtitleTextColor": @"#FFFF00",
+        @"primaryTextColor": @"#FF00FF",
+        @"secondaryTextColor": @"#00FFFF",
+        @"callToActionTextColor": @"#800080",
+        @"headerBackgroundColor": @"#808080",
+        @"footerBackgroundColor": @"#C0C0C0",
+        @"rowBackgroundColor": @"#FFFFFF",
+        @"selectedRowBackgroundColor": @"#E6E6FA",
+        @"rowSeparatorColor": @"#D3D3D3",
+        @"primaryFontPath": @"TestFont.ttf",
+        @"secondaryFontPath": @"fonts/AnotherFont.ttf",
+        @"ctaFontPath": @"./assets/fonts/CTAFont.ttf"
+    };
+
+    // Mock IBGTheme creation and configuration
+    OCMStub([mockTheme primaryColor]).andReturn([UIColor redColor]);
+    OCMStub([mockTheme backgroundColor]).andReturn([UIColor greenColor]);
+    OCMStub([mockTheme titleTextColor]).andReturn([UIColor blueColor]);
+    OCMStub([mockTheme subtitleTextColor]).andReturn([UIColor yellowColor]);
+    OCMStub([mockTheme primaryTextColor]).andReturn([UIColor magentaColor]);
+    OCMStub([mockTheme secondaryTextColor]).andReturn([UIColor cyanColor]);
+    OCMStub([mockTheme callToActionTextColor]).andReturn([UIColor purpleColor]);
+    OCMStub([mockTheme headerBackgroundColor]).andReturn([UIColor grayColor]);
+    OCMStub([mockTheme footerBackgroundColor]).andReturn([UIColor lightGrayColor]);
+    OCMStub([mockTheme rowBackgroundColor]).andReturn([UIColor whiteColor]);
+    OCMStub([mockTheme selectedRowBackgroundColor]).andReturn([UIColor redColor]);
+    OCMStub([mockTheme rowSeparatorColor]).andReturn([UIColor lightGrayColor]);
+    OCMStub([mockTheme primaryTextFont]).andReturn([UIFont systemFontOfSize:17.0]);
+    OCMStub([mockTheme secondaryTextFont]).andReturn([UIFont systemFontOfSize:17.0]);
+    OCMStub([mockTheme callToActionTextFont]).andReturn([UIFont systemFontOfSize:17.0]);
+
+    // Mock theme property setting
+    OCMStub([mockTheme setPrimaryColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setBackgroundColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setTitleTextColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setSubtitleTextColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setPrimaryTextColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setSecondaryTextColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setCallToActionTextColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setHeaderBackgroundColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setFooterBackgroundColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setRowBackgroundColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setSelectedRowBackgroundColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setRowSeparatorColor:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setPrimaryTextFont:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setSecondaryTextFont:[OCMArg any]]).andReturn(mockTheme);
+    OCMStub([mockTheme setCallToActionTextFont:[OCMArg any]]).andReturn(mockTheme);
+
+    // Mock Instabug.theme property
+    OCMStub([mock theme]).andReturn(mockTheme);
+    OCMStub([mock setTheme:[OCMArg any]]);
+
+    // Call the method
+    [self.instabugBridge setTheme:themeConfig];
+
+    // Verify that setTheme was called
+    OCMVerify([mock setTheme:[OCMArg any]]);
+}
 
 
 @end

examples/default/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  assets: ['./assets/fonts/'],
+};