App UI Customization

Setup

Colors

Fonts

Localization

Layout

Set the corner radius for primary buttons:

You can set the corner radius as follows:

Property	Description
`primaryButtonCornerRadius`	The corner radius for primary buttons.

Android & iOS examples

Example code:

import com.fourthline.orca.core.flavor.OrcaFlavor
import com.fourthline.orca.core.flavor.OrcaLayouts

val customFlavor = OrcaFlavor(
    layouts = OrcaLayouts(primaryButtonCornerRadius = 0) // Rectangular buttons
    // layouts = OrcaLayouts(primaryButtonCornerRadius = 8) // Corner radius = 8 dp
    // layouts = OrcaLayouts(primaryButtonCornerRadius = OrcaLayouts.Round) // Fully rounded
)

// Usage
import com.fourthline.orca.Orca
import com.fourthline.orca.[product].[Product]CustomizationConfig
import com.fourthline.orca.[product].[product]

val customizationConfig = [Product]CustomizationConfig(flavor = customFlavor)

Orca.[product](context)
  // ...
  .customize(config = customizationConfig)
  // ...

var flavor = OrcaFlavor()
flavor.layouts.primaryButtonCornerRadius = .zero // Rectangular buttons
// flavor.layouts.primaryButtonCornerRadius = 8 // Corner radius = 8
// flavor.layouts.primaryButtonCornerRadius = OrcaLayout.CornerRadius.round // Fully rounded

// Add to the Orca KYC builder
Orca
  .builder
  .withDefaultFlow()
  .addDataSource(localDataSource)
  .addFlavor(flavor)
  .present { completionReason in
    switch completionReason {
    case .completed(let kycInfo):
      print("Finished Orca with kyc info: \(kycInfo)")
    default:
      break
    }
  }

Plugin examples

Example configuration JSON:

{
  "primaryButtonCornerRadius": 0
}

primaryButtonCornerRadius can have the following values:

-1: Fully rounded button
≥ 0: Corner radius equal to the value

Example code:

var orcaLayout = `{
  "primaryButtonCornerRadius": 8
}`;
var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "layouts": ${orcaLayout}
    }
  }
}`;
Fourthline.startKyc(
  config,
  function (kycJson) {
    var jsonResult = JSON.parse(kycJson);
  },
  function (error) {
    var jsonError = JSON.parse(error);
  }
);

String orcaLayout = '{"primaryButtonCornerRadius": 8}';
String config = """
{
  "flowType": "customFlow",
  "configuration": {
    "flowSteps": ["selfieFlow", "addressFlow"],
    "flavor": {
      "layouts": $orcaLayout
    }
  }
}
""";
try {
  String result = await _fourthlinePlugin.startKyc(config) ?? "Could not start Orca";
  print('The success response is: $result');
} on PlatformException catch (e) {
  String error = e.toString();
}
// Instance variable defined in your Dart class
final _fourthlinePlugin = Fourthline();

import { NativeModules } from 'react-native';

var orcaLayout = `{
  "primaryButtonCornerRadius": 8
}`;
var config = `{
  "flowType": "defaultFlow",
  "configuration": {
    "flavor": {
      "layouts": ${orcaLayout}
    }
  }
}`;
NativeModules.Fourthline.startKyc(config)
  .then((kycJson) => {
    var jsonResult = JSON.parse(kycJson);
  })
  .catch((error) => {
    var jsonError = JSON.parse(error.message);
  });