Customise the React Native SDK

You can customise the colours and fonts used in the React Native SDK. Customisation options are unique for iOS and Android and you must pass them when you process a payment or mandate.

Android

To customise the look of the SDK on Android devices, you must pass a theme object with the following options:

const androidTheme =  {
  lightColors: {
    primary: "#FF32a852",
    background: "#888888",
    surface: "#888888",
    error: "#000000"
  },
  darkColors: {
    primary: "#888888",
    background: "#000000",
    error: "#cccccc"
  },
  typography: {
    bodyLarge: {
      font: "rainbow_2000"
    }
  }
}

const theme =  {
  android: androidTheme
}

When you customise this theme:

• Colours require a hex code and support both RGB and ARGB.
• Fonts support both .ttf and .otf formats. You must place any needed fonts in the android/app/src/main/res/font folder. The file must be named in <a href="https://en.wikipedia.org/wiki/Snake_case" target=_blank">snake case to be recognised. You then use the name of the file (without the file extension) in your theme object.

After your theme is appropriately customised, you then provide this theme to the configure method:

TrueLayerPaymentsSDKWrapper.configure(Environment.Sandbox, theme).then(
  () => {
    log('Configure success')
  },
  reason => {
    log('Configure failed ' + reason)
  },
)

iOS

To customise the look of the SDK on iOS devices, you must pass a theme object with the following options:

const iOSTheme =  {
  lightColors: {
    backgroundPrimary: "#131313",
    ...
  },
  darkColors: {
    contentSecondary: "#ABABAB",
    ...
  },
  fontFamilyName: "Kanit"
}

const theme =  {
  ios: iOSTheme,
}

When you customise this theme:

• Colours are expected to be a hex code. They may start with the pound sign (#) but this isn't required. It supports hex codes of 3, 4 and 6 digits.
• The font (.ttf) should be added to the project and referenced in the .plist file. Then, only the family name should be passed to the SDK. If the SDK fails to fetch the font, it falls back to the native iOS font.

After your theme is appropriately customised, you then provide this theme to the configure method:

TrueLayerPaymentsSDKWrapper.configure(Environment.Sandbox, theme).then(
  () => {
    log('Configure success')
  },
  reason => {
    log('Configure failed ' + reason)
  },
)