Implement resolveColor (#21)

* Implement resolvePlatformColor on iOS

* Add Android implementation

* Fix alpha channel on Android

README.md

@@ -146,6 +146,17 @@ Example:
 }
 ```
 
+### Getting hex value from dynamic color
+
+> Note: You must first make sure you've added `@klarna/platform-colors` as a dependency and recompiled the app.
+
+```js
+import { PlatformColor } from 'react-native';
+import { resolveColorSync } from '@klarna/platform-colors';
+
+const hexColor = resolveColorSync(PlatformColor('colorName'));
+```
+
 ## Development Setup
 
 Install dependencies and make sure the tests are working

android/.npmignore

@@ -0,0 +1,10 @@
+*.iml
+.DS_Store
+.gradle/
+.idea/
+.npmignore
+build/
+gradle/
+gradlew
+gradlew.bat
+local.properties

android/build.gradle

@@ -0,0 +1,48 @@
+buildscript {
+    if (project == rootProject) {
+        repositories {
+            google()
+            jcenter()
+        }
+        dependencies {
+            classpath 'com.android.tools.build:gradle:4.1.2'
+        }
+    }
+}
+
+apply plugin: 'com.android.library'
+
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+android {
+    compileSdkVersion safeExtGet('compileSdkVersion', 30)
+    buildToolsVersion safeExtGet('buildToolsVersion', "30.0.2")
+
+    defaultConfig {
+        minSdkVersion safeExtGet('minSdkVersion', 18)
+        targetSdkVersion safeExtGet('targetSdkVersion', 30)
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+}
+
+repositories {
+    if (project == rootProject) {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
+        google()
+        jcenter()
+    }
+}
+
+dependencies {
+    //noinspection GradleDynamicVersion
+    implementation "com.facebook.react:react-native:+"
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  package="com.klarna.platformcolors"
+  >
+</manifest>

android/src/main/java/com/klarna/platformcolors/PlatformColorsModule.java

@@ -0,0 +1,47 @@
+package com.klarna.platformcolors;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ColorPropConverter;
+
+public class PlatformColorsModule extends ReactContextBaseJavaModule {
+  public static final String PLATFORM_COLORS_MODULE = "KLAPlatformColors";
+  private static final String LOG_TAG = PlatformColorsModule.class.getSimpleName();
+  private final @Nullable ReactApplicationContext appContext;
+
+  /** Default constructor. */
+  public PlatformColorsModule(@NonNull final ReactApplicationContext reactContext) {
+    super(reactContext);
+    appContext = reactContext;
+  }
+
+  /** {@inheritDoc} */
+  @Override
+  @NonNull
+  public String getName() {
+    return PLATFORM_COLORS_MODULE;
+  }
+
+  protected String getHexColor(@Nullable ReadableMap color) {
+    int resolvedColor = ColorPropConverter.getColor(color, appContext);
+    String hexColor = Integer.toHexString(resolvedColor);
+    return "#" + hexColor.substring(2) + hexColor.substring(0, 2);
+  }
+
+  @ReactMethod
+  public void resolveColor(@Nullable ReadableMap color,
+                           @NonNull final Promise promise) {
+    promise.resolve(getHexColor(color));
+  }
+
+  @ReactMethod(isBlockingSynchronousMethod = true)
+  public String resolveColorSync(@Nullable ReadableMap color) {
+    return getHexColor(color);
+  }
+}

android/src/main/java/com/klarna/platformcolors/PlatformColorsPackage.java

@@ -0,0 +1,26 @@
+package com.klarna.platformcolors;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Collections;
+import java.util.List;
+
+@SuppressWarnings("unused")
+public class PlatformColorsPackage implements ReactPackage {
+  @Override
+  @NonNull
+  public List<NativeModule> createNativeModules(@NonNull final ReactApplicationContext reactContext) {
+    return Collections.singletonList(new PlatformColorsModule(reactContext));
+  }
+
+  @Override
+  @NonNull
+  public List<ViewManager> createViewManagers(@NonNull final ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

examples/ColorViewerApp/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Platform,
   StyleSheet,
   ScrollView,
   View,
@@ -9,6 +8,7 @@ import {
   StatusBar,
   ColorValue,
 } from 'react-native';
+import {resolveColor, resolveColorSync} from '@klarna/platform-colors';
 
 import logo from './logo.png';
 import * as Colors from './colors';
@@ -28,6 +28,12 @@ const ColorRow = ({label, color}: {label: string; color: ColorValue}) => (
 );
 
 const App = () => {
+  const [asyncColor, setAsyncColor] = React.useState(null);
+  const syncColor = resolveColorSync(Colors.contrasted);
+  React.useEffect(() => {
+    resolveColor(Colors.contrasted).then((color) => setAsyncColor(color));
+  }, []);
+
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -38,6 +44,8 @@ const App = () => {
         {Object.entries(Colors).map(([name, color]) => (
           <ColorRow key={name} label={name} color={color} />
         ))}
+        <ColorRow label="resolveColor" color={asyncColor} />
+        <ColorRow label="resolveColorSync" color={syncColor} />
       </ScrollView>
     </>
   );

examples/ColorViewerApp/android/app/src/main/res/values-night/colors.xml

@@ -2,5 +2,5 @@
 <resources>
   <color name="background">#000000</color>
   <color name="text">#ffffff</color>
-  <color name="contrasted">#333333</color>
+  <color name="contrasted">#99333333</color>
 </resources>

examples/ColorViewerApp/android/app/src/main/res/values/colors.xml

@@ -3,5 +3,5 @@
   <color name="background">#ffffff</color>
   <color name="text">#000000</color>
   <color name="accent">#ffc0cb</color>
-  <color name="contrasted">#cccccc</color>
+  <color name="contrasted">#99cccccc</color>
 </resources>

examples/ColorViewerApp/colors/index.d.ts

@@ -1,4 +1,6 @@
-export const background: unknown;
-export const text: unknown;
-export const accent: unknown;
-export const contrasted: unknown;
+import { OpaqueColorValue } from 'react-native';
+
+export const background: OpaqueColorValue;
+export const text: OpaqueColorValue;
+export const accent: OpaqueColorValue;
+export const contrasted: OpaqueColorValue;

examples/ColorViewerApp/ios/ColorViewerApp/Images.xcassets/contrasted.colorset/Contents.json

@@ -4,7 +4,7 @@
       "color": {
         "color-space": "srgb",
         "components": {
-          "alpha": "1.000",
+          "alpha": "0.600",
           "blue": "0.800",
           "green": "0.800",
           "red": "0.800"
@@ -22,7 +22,7 @@
       "color": {
         "color-space": "srgb",
         "components": {
-          "alpha": "1.000",
+          "alpha": "0.600",
           "blue": "0.200",
           "green": "0.200",
           "red": "0.200"

examples/ColorViewerApp/ios/Podfile.lock

@@ -19,6 +19,8 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
+  - platform-colors (0.1.0):
+    - React-Core
   - RCTRequired (0.63.4)
   - RCTTypeSafety (0.63.4):
     - FBLazyVector (= 0.63.4)
@@ -253,6 +255,7 @@ DEPENDENCIES:
   - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
   - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - "platform-colors (from `../node_modules/@klarna/platform-colors`)"
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../node_modules/react-native/`)
@@ -292,6 +295,8 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
   glog:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  platform-colors:
+    :path: "../node_modules/@klarna/platform-colors"
   RCTRequired:
     :path: "../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
@@ -337,11 +342,12 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  platform-colors: f1fdc8092bbebb36990b5c4dd8fc3065ee20dd4d
   RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
   RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
   React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
@@ -366,4 +372,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 9f32a9f0394857f0c736da029705b1f2e1c10f56
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.1

examples/ColorViewerApp/package.json

@@ -7,13 +7,12 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "postinstall": "patch-package",
+    "postinstall": "patch-package && DESTINATION='node_modules/@klarna/platform-colors' LIB_FILE=`cd ../.. && echo \\`pwd\\`/\\`npm pack\\`` && (rm -rf $DESTINATION || true) && mkdir $DESTINATION && tar -xvzf $LIB_FILE -C $DESTINATION --strip-components 1 && rm $LIB_FILE",
     "colors": "../../bin/platform-colors",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "patch-package": "^6.4.6",
-    "postinstall-postinstall": "^2.1.0",
+    "@klarna/platform-colors": "*",
     "react": "16.13.1",
     "react-native": "0.63.4"
   },
@@ -28,6 +27,8 @@
     "eslint": "^6.5.1",
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.59.0",
+    "patch-package": "^6.4.6",
+    "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "16.13.1",
     "typescript": "^3.8.3"
   },

examples/ColorViewerApp/platform-colors.config.js

@@ -10,9 +10,9 @@ module.exports = {
     },
     accent: 'pink',
     contrasted: {
-      light: '#ccc',
+      light: '#ccc9',
       highContrastLight: '#fff',
-      dark: '#333',
+      dark: '#3339',
       highContrastDark: '#000',
     },
   },