Skip to content

Commit

Permalink
Android UI customization (#3)
Browse files Browse the repository at this point in the history
* feat: android customization script

* Update README.md

Co-authored-by: Andrei Behel <[email protected]>
  • Loading branch information
AndreiBehel and Andrei Behel authored Mar 29, 2022
1 parent 2e3db97 commit 592552b
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 30 deletions.
66 changes: 66 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,72 @@ OnfidoAuth.start({ sdkToken: 'sdkToken' })
.catch(/* ... */);
```

## UI Customization

### iOS

T.B.D.

### Android
You can customize the Android UI by adding a `customization.android.json` file to your project at the same level as your `node_modules` directory. The file should contain a single json object with the desired keys and values. For example:

```json
{
"onfidoColorPrimaryDark": "",
"onfidoTextColorPrimary": "",

"onfidoPrimaryButtonTextColor": "#FFFFFF",
"onfidoPrimaryButtonDisabledTextColor": "#FFFFFF",
"onfidoPrimaryButtonColor": "#4BC0B1",
"onfidoPrimaryButtonColorPressed": "#2EAC9C",
"onfidoPrimaryButtonColorDisabled": "",

"onfidoSecondaryButtonColor": "",
"onfidoSecondaryButtonColorPressed": "",

"onfidoColorAccent": "#4BC0B1",
"onfidoAuthDualSpinnerColor": "",
"onfidoAuthRetryScreenOvalStrokeColor": "",
"onfidoUploadProgressFillColor": "",

"onfidoPrimaryButtonColorDynamicDimmingMode": "",
"onfidoPrimaryButtonColorPressedDynamicDimmingMode": "",
"onfidoPrimaryButtonColorDisabledDynamicDimmingMode": "",

"onfidoButtonCornerRadius": 32
}

```
Below is a description of all available keys:

| Color | Description |
| -----|-------|
| `onfidoColorPrimaryDark` | Color of the status bar |
| `onfidoColorAccent` | Default color of certain UI elements such as dual spinner around selfie preview, oval around images in retry screen, and upload progress color. These elements can also be customised individually |
| `onfidoTextColorPrimary` | Primary color of the texts used throughout the screens |
| `onfidoPrimaryButtonTextColor` | Color of the text inside the primary action buttons |
| `onfidoPrimaryButtonDisabledTextColor` | Color of the text inside the primary action buttons when disabled |
| `onfidoPrimaryButtonColor` | Background color of the primary action buttons |
| `onfidoPrimaryButtonColorPressed` | Background color of the primary action buttons when pressed |
| `onfidoPrimaryButtonColorDisabled` | Background color of the primary action buttons when disabled |
| `onfidoSecondaryButtonColor` | Background color of the secondary action buttons |
| `onfidoSecondaryButtonColorPressed` | Background color of the secondary action buttons when pressed |
| `onfidoAuthDualSpinnerColor` | Color of dual spinner rotating around selfie preview. This will override the default color provided by `onfidoColorAccent` |
| `onfidoAuthRetryScreenOvalStrokeColor` | Stroke color of oval on ideal selfie image in retry screen. This will override the default color provided by `onfidoColorAccent` |
| `onfidoUploadProgressFillColor` | Fill color of the uploading progress indicator bar. This will override the default color provided by `onfidoColorAccent` |
| `onfidoPrimaryButtonColorDynamicDimmingMode` | Background color of the primary action buttons in dark mode |
| `onfidoPrimaryButtonColorPressedDynamicDimmingMode` | Background color of the primary action buttons when pressed in dark mode |
| `onfidoPrimaryButtonColorDisabledDynamicDimmingMode` | Background color of the primary action buttons when disabledin dark mode |


You can customize the corner radius of all buttons by providing `onfidoButtonCornerRadius` in your `customization.android.json` resource file.

Once you've added the customization.android.json to your project, you should run the following command at the same level of your `node_modules` directory.

```shell
$ npm --prefix node_modules/react-native-onfido-auth-sdk/ run customizeAndroid
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"android",
"ios",
"cpp",
"scripts",
"react-native-onfido-auth-sdk.podspec",
"!lib/typescript/example",
"!android/build",
Expand All @@ -29,7 +30,7 @@
"release": "release-it",
"example": "yarn --cwd example",
"pods": "cd example && pod-install --quiet",
"bootstrap": "yarn example && yarn && yarn pods"
"updateColors": "node scripts/customize_android.js"
},
"keywords": [
"react-native",
Expand Down
29 changes: 0 additions & 29 deletions scripts/bootstrap.js

This file was deleted.

83 changes: 83 additions & 0 deletions scripts/customize_android.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/**
* This script adds the values from colors.json to a colors.xml resource for android
*
* Note: This script was written to work with ES5
*/
const fs = require('fs');
try {
if (fs.existsSync('../../customization.android.json')) {
fs.readFile('../../customization.android.json', 'utf8', function (err, data) {
let customization = JSON.parse(data)
console.log(customization)
const colors = {}
Object.keys(customization)
.filter((item) => item !== 'onfidoButtonCornerRadius' && customization[item])
.forEach(colorKey => colors[colorKey] = customization[colorKey])

// Explictly check and create needed directories to support older js versions
if (!fs.existsSync('android')) {
fs.mkdirSync('android')
}
if (!fs.existsSync('android/src')) {
fs.mkdirSync('android/src')
}
if (!fs.existsSync('android/src/main')) {
fs.mkdirSync('android/src/main')
}
if (!fs.existsSync('android/src/main/res')) {
fs.mkdirSync('android/src/main/res')
}
if (!fs.existsSync('android/src/main/res/values')) {
fs.mkdirSync('android/src/main/res/values')
}

fs.writeFile('android/src/main/res/values/colors.xml', generateColorsFileContent(colors), function (e) {
if (e != null) {
console.log('\nAn error occured while trying to update colors:\n' + e + '\n')
} else {
console.log("\nColors were successfully updated\n")
}
})

if (customization.onfidoButtonCornerRadius) {
fs.writeFile('android/src/main/res/values/dimens.xml', generateDimensFileContent(customization.onfidoButtonCornerRadius), function (e) {
if (e != null) {
console.log('\nAn error occured while trying to update border radius:\n' + e + '\n')
} else {
console.log("\Border radius was successfully updated\n")
}
})
}
});
} else {
console.log('\nNo colors.json was found. Ensure it is at the same level as your node-modules directory\n')
}
} catch (e) {
console.log(e)
}

function generateColorsFileContent(colors) {
let fileContent = '<?xml version="1.0" encoding="utf-8"?>\n'
fileContent += '<resources>\n'
Object.keys(colors).forEach((color) => {
fileContent += '\t<color name=\"'
fileContent += color
fileContent += "\">"
fileContent += colors[color]
fileContent += "</color>\n"
})
fileContent += "</resources>"
return fileContent
}

function generateDimensFileContent(borderRadius) {
let fileContent = '<resources>\n'
fileContent += '\t<dimen name=\"'
fileContent += 'onfidoButtonCornerRadius'
fileContent += "\">"
fileContent += borderRadius
fileContent += "dp"
fileContent += "</dimen>\n"
fileContent += "</resources>"
return fileContent
}

0 comments on commit 592552b

Please sign in to comment.