From b8851ac3ad215f2fcf190b84bd73349ce64288d7 Mon Sep 17 00:00:00 2001 From: Andrei Behel Date: Tue, 29 Mar 2022 17:05:16 +0300 Subject: [PATCH 1/2] feat: android customization script --- package.json | 3 +- scripts/bootstrap.js | 29 ------------- scripts/customize_android.js | 83 ++++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 30 deletions(-) delete mode 100644 scripts/bootstrap.js create mode 100644 scripts/customize_android.js diff --git a/package.json b/package.json index b97e6ab..8a9d9f2 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "android", "ios", "cpp", + "scripts", "react-native-onfido-auth-sdk.podspec", "!lib/typescript/example", "!android/build", @@ -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", diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js deleted file mode 100644 index b2922b5..0000000 --- a/scripts/bootstrap.js +++ /dev/null @@ -1,29 +0,0 @@ -const os = require('os'); -const path = require('path'); -const child_process = require('child_process'); - -const root = path.resolve(__dirname, '..'); -const args = process.argv.slice(2); -const options = { - cwd: process.cwd(), - env: process.env, - stdio: 'inherit', - encoding: 'utf-8', -}; - -if (os.type() === 'Windows_NT') { - options.shell = true -} - -let result; - -if (process.cwd() !== root || args.length) { - // We're not in the root of the project, or additional arguments were passed - // In this case, forward the command to `yarn` - result = child_process.spawnSync('yarn', args, options); -} else { - // If `yarn` is run without arguments, perform bootstrap - result = child_process.spawnSync('yarn', ['bootstrap'], options); -} - -process.exitCode = result.status; diff --git a/scripts/customize_android.js b/scripts/customize_android.js new file mode 100644 index 0000000..eb6d3a3 --- /dev/null +++ b/scripts/customize_android.js @@ -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 = '\n' + fileContent += '\n' + Object.keys(colors).forEach((color) => { + fileContent += '\t" + fileContent += colors[color] + fileContent += "\n" + }) + fileContent += "" + return fileContent +} + +function generateDimensFileContent(borderRadius) { + let fileContent = '\n' + fileContent += '\t" + fileContent += borderRadius + fileContent += "dp" + fileContent += "\n" + fileContent += "" + return fileContent +} From 633c5f42ba520b252540e01481b48193a7468a8f Mon Sep 17 00:00:00 2001 From: Andrei Date: Tue, 29 Mar 2022 17:19:24 +0300 Subject: [PATCH 2/2] Update README.md --- README.md | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/README.md b/README.md index 4c5e405..f490ce7 100644 --- a/README.md +++ b/README.md @@ -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.