Android UI customization

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.

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",

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 = '<?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
+}