android/src/main/java/com/alpha0010/settings/IconFontDrawable.kt

@@ -1,12 +1,11 @@
 package com.alpha0010.settings
 
 import android.content.res.Resources
-import android.graphics.Canvas
-import android.graphics.ColorFilter
-import android.graphics.Paint
+import android.graphics.*
 import android.graphics.drawable.Drawable
 import androidx.annotation.ColorInt
 import com.facebook.react.views.text.ReactFontManager
+import kotlin.math.ceil
 import kotlin.math.max
 
 class IconFontDrawable(
@@ -17,54 +16,51 @@ class IconFontDrawable(
   res: Resources
 ) : Drawable() {
   val signature = "$charCode-$fg-$bg"
+  private val dim: Int
+  private val iconBounds = Rect()
   private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
   private val text = String(intArrayOf(charCode), 0, 1)
-  private val tWidth: Float
-  private val tHeight: Float
 
   init {
+    val scale = res.displayMetrics.density
+    dim = 2 * ceil(17.9 * scale).toInt()
+
     paint.style = Paint.Style.FILL
     paint.typeface = ReactFontManager.getInstance().getTypeface(font, 0, res.assets)
 
     // Compute symbol size.
-    paint.textSize = 100f
-    val maxDim = max(
-      paint.measureText(text, 0, text.length),
-      paint.getFontMetricsInt(null).toFloat()
-    )
-    paint.textSize = 8100f / maxDim
+    paint.textSize = 200f
+    paint.getTextBounds(text, 0, text.length, iconBounds)
+    val maxDim = max(iconBounds.width(), iconBounds.height())
 
-    tWidth = paint.measureText(text, 0, text.length)
-    tHeight = paint.getFontMetricsInt(null).toFloat()
+    paint.textSize = 4420 * scale / maxDim
+    paint.getTextBounds(text, 0, text.length, iconBounds)
   }
 
   override fun draw(canvas: Canvas) {
+    val dHalf = dim / 2f
     paint.color = bg
-    canvas.drawCircle(47f, 47f, 47f, paint)
+    canvas.drawCircle(dHalf, dHalf, dHalf, paint)
 
     paint.color = fg
     canvas.drawText(
       text,
       0,
       text.length,
-      (94 - tWidth) / 2,
-      (94 + tWidth) / 2,
+      dHalf - iconBounds.centerX(),
+      dHalf - iconBounds.centerY(),
       paint
     )
   }
 
-  override fun getIntrinsicWidth() = 94
-
-  override fun getIntrinsicHeight() = 94
-
-  override fun setAlpha(alpha: Int) {
-    paint.alpha = alpha
-  }
+  override fun getIntrinsicWidth() = dim
+  override fun getIntrinsicHeight() = dim
+  override fun setAlpha(alpha: Int) = Unit
 
   override fun setColorFilter(colorFilter: ColorFilter?) {
     paint.colorFilter = colorFilter
   }
 
   @Deprecated("Deprecated in Java")
-  override fun getOpacity() = paint.alpha
+  override fun getOpacity() = PixelFormat.TRANSLUCENT
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-native-settings-view",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Native component based settings view for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/NativeSettingsView.ts

@@ -1,4 +1,5 @@
 import {
+  Appearance,
   ColorValue,
   NativeSyntheticEvent,
   Platform,
@@ -94,7 +95,14 @@ export const NativeSettingsView =
         throw new Error(LINKING_ERROR);
       };
 
+// Note: This does not handle runtime theme changes.
 export const defaultColors = {
-  fg: processColor(Platform.OS === 'android' ? '#737373' : 'white'),
+  fg: processColor(
+    Platform.OS === 'android'
+      ? Appearance.getColorScheme() === 'dark'
+        ? '#c6c5d0'
+        : '#737373'
+      : 'white'
+  ),
   bg: processColor(Platform.OS === 'android' ? 'transparent' : '#8e8e93'),
 };