Design

This section covers how to customize the SDK look to match your app's design.

Color Theme

The SDK UI has 2 color themes: light and dark.

You can set which theme to use with the following method.

Instabug.setColorTheme(Instabug.colorTheme.dark);

Possible color themes.

Instabug.colorTheme.light
Instabug.colorTheme.dark

Primary Color

You can also set the color of UI elements indicating interactivity or call to action to match your app.
You should use react native's processColor method as an argument to this method. First, you need to add the following import line: import {processColor} from 'react-native';

Instabug.setPrimaryColor(processColor('#ff0000'));
// Open android/app/src/main/java/[...]/MainApplication.java
// Change the primary color
@Override
protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
	new MainReactPackage(),
	new new RNInstabugReactnativePackage.Builder("YOUR_APP_TOKEN", MainApplication.this)
    		.setInvocationEvent("shake")
   		  .setPrimaryColor("#1D82DC")
    		.setFloatingEdge("left")
    		.setFloatingButtonOffsetFromTop(250)
    		.build()
}

Floating Button

If you set the invocation event to be through the floating button, you have the option to set its position. You can set the edge and the offset which specifies the position on the y-axis.

Instabug.setFloatingButtonEdge(Instabug.floatingButtonEdge.right, 250);
// Open android/app/src/main/java/[...]/MainApplication.java
// Change the edge and offset of the button
@Override
protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
	new MainReactPackage(),
	new new RNInstabugReactnativePackage.Builder("YOUR_APP_TOKEN", MainApplication.this)
    		.setInvocationEvent("shake")
    		.setPrimaryColor("#1D82DC")
    		.setFloatingEdge("left")
    		.setFloatingButtonOffsetFromTop(250)
    		.build()
}

Video Recording Button

If the video recording attachment type is enabled, you can change the position of the red recording button displayed in the screenshot below. The default position of the button is bottom right.

Instabug.setVideoRecordingFloatingButtonPosition(Instabug.IBGPosition.topLeft);

Here are the possible values:

IBGPosition.topLeft
IBGPosition.topRight
IBGPosition.bottomLeft
IBGPosition.bottomRight