> For the complete documentation index, see [llms.txt](https://legacy-docs.usesmileid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.usesmileid.com/integration-options/mobile/theming/ui-components.md).

# UI Components

In addition to the high level orchestrated screens described in [Products](/integration-options/mobile/products.md), we also make available the smaller building-block UI components that are used to build those screens.

{% tabs %}
{% tab title="Android" %}
Details about available components can be found by visiting the reference docs/javadocs at <https://javadoc.io/doc/com.smileidentity/android-sdk/latest/allclasses.html>

{% hint style="info" %}
You must use Jetpack Compose in order to use these lower level UI components
{% endhint %}

For example, if you want to display only the Selfie Instruction screen:

```kotlin
SmartSelfieInstructionsScreen(
    onInstructionsAcknowledged = { /* perform some action */ }
)
```

{% endtab %}

{% tab title="iOS" %}
Details about available components can be found by visiting the reference docs at [https://smileidentity.github.io/ios/documentation/smileid](https://smileidentity.github.io/ios/documentation/smileid/consentdeniedscreen). The UI components are listed under the `Structures` header

{% hint style="info" %}
You must use SwiftUI in order to use these lower level UI components
{% endhint %}

For example, if you want to display only the Selfie Instruction screen:

```swift
SmartSelfieInstructionsScreen()
```

{% endtab %}

{% tab title="Flutter" %}
Customizing the Flutter SDK requires leveraging native SDK capabilities. This page details how to do so for each platform

{% tabs %}
{% tab title="Android" %}
To override strings, create a string resource file in your Android module. It should look something like `android/app/src/main/res/values/strings.xml`, however the exact path could vary depending on your project's structure.

Similarly, to change colors on Android, create a colors resource file, whose path should look something like (but maybe not exactly): `android/app/src/main/res/values/colors.xml`

Then, follow the instructions located at the Android docs under the XML resources tab. [Customization](/integration-options/mobile/theming.md#xml-resources)
{% endtab %}

{% tab title="iOS" %}
To leverage native iOS capabilities, you can define your color scheme as a Swift file in your `ios` module, at `ios/Runner/CustomSmileTheme.swift` (the exact path may vary depending on your project setup). It is recommended to use Xcode to make these changes.

Once the theme has been defined, you must set it in your AppDelegate by calling `SmileID.apply()`. This will most likely be located at `ios/Runner/AppDelegate.swift` (the exact path may vary depending on your project setup).

The full details on how to define the Swift Colors file is available here: [Customization](/integration-options/mobile/theming.md#theming)

Similarly, for localization, create a `Localizable.strings` file in the Xcode project, define an instance of `SmileIDLocalizableStrings` , and set it using `SmileID.appy()`. The full details on how to define the Localizations is available here: [Customization](/integration-options/mobile/theming.md#localization-and-copy)
{% endtab %}
{% endtabs %}
{% endtab %}
{% endtabs %}

## Selfie Capture

We also make available the smaller building-block UI components for selfie capture which goes through the flow and you can configure which screens or step to show which include the below

* Selfie capture instruction screen which can be shown or hidden
* Selfie capture screen
* Selfie confirmation which can be shown or hidden

{% tabs %}
{% tab title="Flutter" %}
{% code fullWidth="false" %}

```dart
SmileIDSmartSelfieCaptureView(
  showConfirmationDialog: true, //if true will show confirmation dialog after a successful selfie capture
  showInstructions: true, //if true will show instruction screen before selfie capture
  showAttribution: true, //if true will show SmileID attribution on the instruction screen
  allowAgentMode: true,//if true will show the switch for agent mode
  onSuccess: (String? result) {
    // Your success handling logic
    Map<String, dynamic> jsonResult = json.decode(result ?? '{}');
    String formattedResult = jsonEncode(jsonResult);
  },
  onError: (String errorMessage) {
    // Your error handling logic
  },
)
```

{% endcode %}
{% endtab %}

{% tab title="React Native" %}

```typescript
 <SmileIDSmartSelfieCaptureView
    allowAgentMode: true, //if true will show the switch for agent mode
    showInstructions: true, //if true will show instruction screen before selfie capture
    showAttribution: true, //if true will show SmileID attribution on the instruction screen
    showConfirmation: true,//if true will show confirmation dialog after a successful selfie capture
    onResult={(event) => {
      if (event.nativeEvent.error) {
        //handle error
        return;
      }
    //handle success
    }}
  />
```

{% endtab %}
{% endtabs %}

## Document Capture

We also make available the smaller building-block UI components for document capture which goes through the flow and you can configure which screens or step to show which include the below

* Document capture instruction screen which can be shown or hidden
* Document capture screen
* Document confirmation which can be shown or hidden

{% tabs %}
{% tab title="Flutter" %}
{% code fullWidth="false" %}

```dart
SmileIDDocumentCaptureView(
 isDocumentFrontSide: true, //if true will show the instruction and prompts for front of document capture
 showInstructions: true, //if true will show instruction screen before document capture
 showAttribution: true, //if true will show SmileID attribution on the instruction screen
 showConfirmationDialog: true,//if true will show confirmation dialog after a successful document capture
 allowGalleryUpload: false,//if true will show the option to upload from gallery in addition to the take photo option
 onSuccess: (String? result) {
    // Your success handling logic
    Map<String, dynamic> jsonResult = json.decode(result ?? '{}');
    String formattedResult = jsonEncode(jsonResult);
  },
 onError: (String errorMessage) {
    // Your error handling logic
  },
)
```

{% endcode %}
{% endtab %}

{% tab title="React Native" %}

```typescript
 <SmileIDDocumentCaptureView
    isDocumentFrontSide: true, //if true will show the instruction and prompts for front of document capture
    showInstructions: true, //if true will show instruction screen before document capture
    showAttribution: true, //if true will show SmileID attribution on the instruction screen
    showConfirmation: true,//if true will show confirmation dialog after a successful document capture
    allowGalleryUpload: false,//if true will show the option to upload from gallery in addition to the take photo option
    onResult={(event) => {
      if (event.nativeEvent.error) {
        //handle error
        return;
      }
    //handle success
    }}
  />
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://legacy-docs.usesmileid.com/integration-options/mobile/theming/ui-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.