UI Color & Theme

This section covers how to customize how Luciq appears in your app in order to match your design and brand palette for React Native apps.

SDK Theme

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

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

JavaScript

import Luciq, { ColorTheme } from '@luciq/react-native';

Luciq.setColorTheme(ColorTheme.dark);

Here are the possible color themes.

JavaScript

ColorTheme.light
ColorTheme.dark

Setting the Primary Color

Customize interactive UI elements like buttons and links by setting your primary color. Pass a color literal string as follows.

Use React Native's processColor method as an argument to this method. First, you need to add the following import line:

JavaScript

import Luciq from '@luciq/react-native';

Luciq.setTheme({ primaryColor: '#ff0000' });

Floating Button Position

If your invocation event is a floating button, you can set its position in your app. You can set the edge and the offset, which specifies the position on the y-axis.

JavaScript

import { BugReporting, FloatingButtonPosition } from '@luciq/react-native';

BugReporting.setFloatingButtonEdge(FloatingButtonPosition.right, 250);

Video Recording Button

If you've enabled video recordings as attachments, you can change the position of the red recording button displayed in the screenshot below. The default position of the button is bottom right.

1041

An example of the video recording button placed in the bottom right of an app.

Use this method below to set the position of the video recording button.

JavaScript

import { RecordingButtonPosition } from '@luciq/react-native';

BugReporting.setVideoRecordingFloatingButtonPosition(RecordingButtonPosition.topLeft);

Here are the possible values:

JavaScript

RecordingButtonPosition.topLeft
RecordingButtonPosition.topRight
RecordingButtonPosition.bottomLeft
RecordingButtonPosition.bottomRight