Skip to content

Commit f76e322

Browse files
DanielAraldiDanielAraldi
committed
docs: add documentation about custom fonts and some theme types adjustments
1 parent c559e78 commit f76e322

1 file changed

Lines changed: 117 additions & 22 deletions

File tree

‎docs/THEME.md‎

Lines changed: 117 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Theme 💅
22

3-
The Aziface SDK provides the ability to change the theme of each flow. You can modify background colors, borders, text, border radius, among other things. We recommend changing the theme before calling the `initialized` method so that the style changes are applied.
3+
The Aziface SDK provides the ability to change the theme of each flow. You can modify background colors, borders, text, border radius, among other things. We recommend changing the theme before calling the `initialized` function so that the style changes are applied.
44

55
<hr/>
66

@@ -22,11 +22,14 @@ The Aziface SDK provides the ability to change the theme of each flow. You can m
2222
- [`ThemeButton`](#themebutton)
2323
- [`ThemeGuidance`](#themeguidance)
2424
- [`ThemeGuidanceRetryScreen`](#themeguidanceretryscreen)
25+
- [`ThemeGuidanceReadyScreen`](#themeguidancereadyscreen)
26+
- [`ThemeGuidanceImages`](#themeguidanceimages)
2527
- [`ThemeOval`](#themeoval)
2628
- [`ThemeFeedback`](#themefeedback)
2729
- [`FeedbackBackgroundColor` (iOS only)](#feedbackbackgroundcolor-ios-only)
2830
- [`Point`](#point)
2931
- [`ThemeResultScreen`](#themeresultscreen)
32+
- [`ThemeSessionAbortAnimation`](#themesessionabortanimation)
3033
- [`ThemeResultAnimation`](#themeresultanimation)
3134
- [`ThemeIdScan`](#themeidscan)
3235
- [`ThemeIdScanSelectionScreen`](#themeidscanselectionscreen)
@@ -36,17 +39,21 @@ The Aziface SDK provides the ability to change the theme of each flow. You can m
3639
- [`ThemeShadowInsets`](#themeshadowinsets)
3740
- [`ThemeShadowOffset`](#themeshadowoffset)
3841
- [How to add images in Aziface SDK module?](#how-to-add-images-in-aziface-sdk-module)
39-
- [How to add images in Android?](#how-to-add-images-in-android)
40-
- [How to add images in iOS?](#how-to-add-images-in-ios)
41-
- [Example with images added](#example-with-images-added)
42+
- [Android](#android)
43+
- [iOS](#ios)
44+
- [Example](#example)
45+
- [Custom Fonts](#custom-fonts)
46+
- [Android](#android-1)
47+
- [iOS](#ios-1)
48+
- [Example](#example-1)
4249
- [Colors Support](#colors-support)
4350

4451
<hr/>
4552

4653
## Usage
4754

4855
```tsx
49-
// It's recommended to use it before calling the initialize method
56+
// It's recommended to use it before calling the initialize function
5057
setTheme({
5158
overlayBackgroundColor: '#f1f1f1',
5259
// ...
@@ -246,6 +253,7 @@ An object containing the button styles used in the Aziface SDK.
246253
| `cornerRadius` | `number` | All | ❌ | `undefined` |
247254
| `borderWidth` | `number` | All | ❌ | `undefined` |
248255
| `borderColor` | `number` | All | ❌ | `undefined` |
256+
| `font` | `string` | All | ❌ | `undefined` |
249257

250258
#### `ThemeGuidance`
251259

@@ -255,6 +263,8 @@ An object containing the styles used in the guidance view.
255263
| ----------------- | ------------------------------------------------------- | -------- | -------- | ------------------------------------------------------ |
256264
| `backgroundColor` | `string` or `string[]` | All | ❌ | `#ffffff` (Android) and `['#ffffff', '#ffffff']` (iOS) |
257265
| `foregroundColor` | `string` | All | ❌ | `#272937` |
266+
| `headerFont` | `string` | All | ❌ | `undefined` |
267+
| `subtextFont` | `string` | All | ❌ | `undefined` |
258268
| `button` | [`ThemeButton`](#themebutton) | All | ❌ | `undefined` |
259269
| `retryScreen` | [`ThemeGuidanceRetryScreen`](#themeguidanceretryscreen) | All | ❌ | `undefined` |
260270
| `readyScreen` | [`ThemeGuidanceReadyScreen`](#themeguidancereadyscreen) | All | ❌ | `undefined` |
@@ -264,13 +274,18 @@ An object containing the styles used in the guidance view.
264274

265275
An object containing the styles used in the guidance retry screen.
266276

267-
| `ThemeGuidanceRetryScreen` | type | Platform | Required | Default |
268-
| -------------------------- | -------- | -------- | -------- | ----------- |
269-
| `imageBorderColor` | `string` | All | ❌ | `#ffffff` |
270-
| `imageBorderWidth` | `number` | All | ❌ | `undefined` |
271-
| `imageCornerRadius` | `number` | All | ❌ | `undefined` |
272-
| `ovalStrokeColor` | `string` | All | ❌ | `#ffffff` |
273-
| `subtextColor` | `string` | All | ❌ | `#000000` |
277+
| `ThemeGuidanceRetryScreen` | type | Platform | Required | Default |
278+
| ----------------------------- | -------- | -------- | -------- | ----------- |
279+
| `imageBorderColor` | `string` | All | ❌ | `#ffffff` |
280+
| `imageBorderWidth` | `number` | All | ❌ | `undefined` |
281+
| `imageCornerRadius` | `number` | All | ❌ | `undefined` |
282+
| `ovalStrokeColor` | `string` | All | ❌ | `#ffffff` |
283+
| `headerTextColor` | `string` | All | ❌ | `#000000` |
284+
| `headerFont` | `string` | All | ❌ | `undefined` |
285+
| `subtextColor` | `string` | All | ❌ | `#000000` |
286+
| `subtextFont` | `string` | All | ❌ | `undefined` |
287+
| `textBackgroundColor` | `string` | All | ❌ | `undefined` |
288+
| `textBackgroundCornersRadius` | `number` | All | ❌ | `undefined` |
274289

275290
##### `ThemeGuidanceReadyScreen`
276291

@@ -279,8 +294,10 @@ An object containing the styles used in the guidance ready screen.
279294
| `ThemeGuidanceReadyScreen` | type | Platform | Required | Default |
280295
| -------------------------- | -------- | -------- | -------- | ------------- |
281296
| `headerTextColor` | `string` | All | ❌ | `#000000` |
297+
| `headerFont` | `string` | All | ❌ | `undefined` |
282298
| `ovalFillColor` | `string` | All | ❌ | `transparent` |
283299
| `subtextColor` | `string` | All | ❌ | `#000000` |
300+
| `subtextFont` | `string` | All | ❌ | `undefined` |
284301

285302
##### `ThemeGuidanceImages`
286303

@@ -313,6 +330,7 @@ An object containing the oval styles used in the Aziface SDK.
313330
| `backgroundColor` | `string` | Android | ❌ | `#026ff4` |
314331
| [`backgroundColors`](#feedbackbackgroundcolor-ios-only) | `string` | iOS | ❌ | `undefined` |
315332
| `textColor` | `string` | All | ❌ | `#ffffff` |
333+
| `font` | `string` | All | ❌ | `undefined` |
316334
| `cornerRadius` | `number` | All | ❌ | `undefined` |
317335
| `elevation` | `number` | Android | ❌ | `0` |
318336
| `shadow` | [`ThemeShadow`](#themeshadow-ios-only) | iOS | ❌ | `undefined` |
@@ -346,6 +364,7 @@ An object containing the styles used in the result screen.
346364
| ---------------------------------------- | ----------------------------------------------------------- | -------- | -------- | ------------------------------------------------------ |
347365
| `backgroundColor` | `string` or `string[]` | All | ❌ | `#ffffff` (Android) and `['#ffffff', '#ffffff']` (iOS) |
348366
| `foregroundColor` | `string` | All | ❌ | `#272937` |
367+
| `font` | `string` | All | ❌ | `undefined` |
349368
| `activityIndicatorColor` | `string` | All | ❌ | `#026ff4` |
350369
| `indicatorImage` | `string` | All | ❌ | `undefined` |
351370
| `indicatorRotationInterval` | `number` | All | ❌ | `1000` |
@@ -389,6 +408,8 @@ An object containing the styles used in the ID scan screens.
389408

390409
| `ThemeIdScan` | type | Platform | Required | Default |
391410
| ----------------- | ----------------------------------------------------------- | -------- | -------- | ----------- |
411+
| `headerFont` | `string` | All | ❌ | `undefined` |
412+
| `subtextFont` | `string` | All | ❌ | `undefined` |
392413
| `selectionScreen` | [`ThemeIdScanSelectionScreen`](#themeidscanselectionscreen) | All | ❌ | `undefined` |
393414
| `reviewScreen` | [`ThemeIdScanReviewScreen`](#themeidscanreviewscreen) | All | ❌ | `undefined` |
394415
| `captureScreen` | [`ThemeIdScanCaptureScreen`](#themeidscancapturescreen) | All | ❌ | `undefined` |
@@ -417,12 +438,13 @@ An object containing the styles used in the ID scan review screen.
417438

418439
An object containing the styles used in the ID scan capture screen.
419440

420-
| `ThemeIdScanCaptureScreen` | type | Platform | Required | Default |
421-
| -------------------------- | -------- | -------- | -------- | --------- |
422-
| `foregroundColor` | `string` | All | ❌ | `#ffffff` |
423-
| `textBackgroundColor` | `string` | All | ❌ | `#ffffff` |
424-
| `backgroundColor` | `string` | All | ❌ | `#026ff4` |
425-
| `frameStrokeColor` | `string` | All | ❌ | `#ffffff` |
441+
| `ThemeIdScanCaptureScreen` | type | Platform | Required | Default |
442+
| -------------------------- | -------- | -------- | -------- | ----------- |
443+
| `foregroundColor` | `string` | All | ❌ | `#ffffff` |
444+
| `textBackgroundColor` | `string` | All | ❌ | `#ffffff` |
445+
| `backgroundColor` | `string` | All | ❌ | `#026ff4` |
446+
| `frameStrokeColor` | `string` | All | ❌ | `#ffffff` |
447+
| `font` | `string` | All | ❌ | `undefined` |
426448

427449
#### `ThemeShadow` (iOS only)
428450

@@ -462,19 +484,19 @@ An object containing the shadow offset styles used in screen.
462484

463485
The `branding` and `cancel` properties represents your branding and icon of the button cancel. Does not possible to remove them from the module. Default are [Azify](https://www.azify.com/) images and `.png` format. By default in `Android` the branding image is shown, but on `iOS` it isn't shown, It's necessary to add manually.
464486

465-
### How to add images in Android?
487+
### Android
466488

467489
To add your images in `Android`, you must go to your project's `android/src/main/res/drawable` directory. If in your project `drawable` folder doesn't exist, it create one. Inside the `drawable` folder, you must put your images and done!
468490

469491
**Important**: The filename of the image can't have uppercase letters, Android doesn't accept these characters in the image name.
470492

471-
### How to add images in iOS?
493+
### iOS
472494

473495
In `iOS`, open your XCode and go to your project's `ios/<YOUR_PROJECT_NAME>/Images.xcassets` directory. Open the `Images.xcassets` folder and only put your images inside there.
474496

475-
### Example with images added
497+
### Example
476498

477-
Now, go back to where you want to apply the styles, import `setTheme` method and add only the image name, no extension format, in image property (`branding` or `cancel`). **Note**: If the image is not founded the default image will be showed. Check the code example below:
499+
Now, go back to where you want to apply the styles, import `setTheme` function and add only the image name, no extension format, in image property (`branding` or `cancel`). **Note**: If the image is not founded the default image will be showed. Check the code example below:
478500

479501
```tsx
480502
import { useEffect } from 'react';
@@ -514,6 +536,79 @@ export default function App() {
514536

515537
<hr/>
516538

539+
## Custom Fonts
540+
541+
The Aziface SDK allows changing the font family style to each the session.
542+
543+
### Android
544+
545+
In Android, you should add all fonts in the `android/app/main/assets/fonts` directory path (if your project's `assets/fonts` isn't exists, you should create it), but if the font isn't found, the Aziface SDK uses the default system font. By default, the Aziface SDK searches for your custom fonts there.
546+
547+
All extension fonts are supported.
548+
549+
### iOS
550+
551+
To add a font file to your XCode project, select File > Add Files to "Your Project Name" from the menu bar, or drag the file from Finder and drop it into your XCode project. You can add True Type Font (`.ttf`) and Open Type Font (`.otf`) files. Also, make sure the font file is a target member of your App, otherwise, the font file will not be distributed as part of your App.
552+
553+
After adding the font file to your project, you need to let iOS know about the font. To do this, add the key "Fonts provided by application" to `Info.plist` (the raw key name is `UIAppFonts`). XCode creates an array value for the key, add the name of the font file as an item of the array. Be sure to include the file extension as part of the name.
554+
555+
That's **optional**, but you can add the key "Application fonts resource path" to `Info.plist` (the raw key to be used like a font file's resource path). XCode creates a string value for the key, add the directory path of the font file, if your font file is in the main directory you should add a dot (`.`) like value for the key, otherwise, you should provides the path directory correctly the font files. If custom fonts isn't found, the Aziface SDK uses the default system font.
556+
557+
Extension fonts supported are: `.ttf` and `.otf`.
558+
559+
### Example
560+
561+
You should call the `setTheme` function and provides **filename string** as value of the font. If the font isn't found, the Aziface SDK uses the default font.
562+
563+
```tsx
564+
import { useEffect } from 'react';
565+
// ...
566+
import {
567+
initialize,
568+
setTheme,
569+
type Params /* ... */,
570+
} from '@azify/aziface-mobile';
571+
572+
export default function App() {
573+
useEffect(() => {
574+
const params: Params = {
575+
isDevelopment: true,
576+
deviceKeyIdentifier: 'YOUR_DEVICE_KEY_IDENTIFIER',
577+
baseUrl: 'YOUR_BASE_URL',
578+
};
579+
580+
async function initialize() {
581+
// You call setTheme after initialize.
582+
setTheme({
583+
guidance: {
584+
headerFont: 'Roboto-Bold.otf',
585+
subtextFont: 'OpenSans-Medium.ttf',
586+
button: {
587+
font: 'NotoSans-Regular.otf',
588+
},
589+
readyScreen: {
590+
headerFont: 'Roboto-Bold.otf',
591+
subtextFont: 'OpenSans-Medium.ttf',
592+
},
593+
retryScreen: {
594+
headerFont: 'Roboto-Bold.otf',
595+
subtextFont: 'OpenSans-Medium.ttf',
596+
},
597+
},
598+
});
599+
600+
await initialize({ params });
601+
}
602+
603+
initialize();
604+
}, []);
605+
606+
// ...
607+
}
608+
```
609+
610+
<hr/>
611+
517612
## Colors Support
518613

519614
Currently, the Aziface SDK theme accepts only hexadecimal colors in this format:

0 commit comments

Comments
 (0)