react-native-keyboard-controller 1.17.4 → 1.18.0

package/README.md

@@ -10,12 +10,15 @@ A universal keyboard handling solution for React Native — lightweight, fully c
 
 - 🧬 Map keyboard movement to animated values
 - 🧪 `keyboardWillShow` / `keyboardWillHide` events now available on Android
-- ⚡ Change soft input mode on Android
+- 🔮 Change soft input mode on Android
+- ⚡ Preload keyboard to avoid first-time focus lag
 - 🚀 Reanimated support
 - 📱 Interactive keyboard dismissing 👆📱
 - 📚 Prebuilt components (`KeyboardStickyView`, `KeyboardAwareScrollView`, reworked `KeyboardAvoidingView`)
 - 📐 `KeyboardToolbar` with customizable _**previous**_, _**next**_, and _**done**_ buttons
 - 🌐 Display anything over the keyboard (without dismissing it) using `OverKeyboardView`
+- 🎨 Match keyboard background with `KeyboardBackgroundView`
+- 🧩 Extend keyboard with custom buttons/UI via `KeyboardExtender`
 - 📝 Easy retrieval of focused input info
 - 🧭 Compatible with any navigation library
 - ✨ More coming soon... stay tuned! 😊

package/android/src/base/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt

@@ -7,7 +7,7 @@ import com.facebook.react.module.model.ReactModuleInfo
 import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 import com.reactnativekeyboardcontroller.modules.KeyboardControllerModuleImpl
-import com.reactnativekeyboardcontroller.modules.StatusBarManagerCompatModuleImpl
+import com.reactnativekeyboardcontroller.modules.statusbar.StatusBarManagerCompatModuleImpl
 
 class KeyboardControllerPackage : BaseReactPackage() {
   override fun getModule(
@@ -44,7 +44,7 @@ class KeyboardControllerPackage : BaseReactPackage() {
         ReactModuleInfo(
           StatusBarManagerCompatModuleImpl.NAME,
           StatusBarManagerCompatModuleImpl.NAME,
-          false, // canOverrideExistingModule
+          true, // canOverrideExistingModule
           false, // needsEagerInit
           false, // isCxxModule
           isTurboModule, // isTurboModule
@@ -54,8 +54,9 @@ class KeyboardControllerPackage : BaseReactPackage() {
 
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
     listOf(
-      KeyboardControllerViewManager(reactContext),
-      KeyboardGestureAreaViewManager(reactContext),
-      OverKeyboardViewManager(reactContext),
+      KeyboardControllerViewManager(),
+      KeyboardGestureAreaViewManager(),
+      OverKeyboardViewManager(),
+      KeyboardBackgroundViewManager(),
     )
 }

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardBackgroundViewManager.kt

@@ -0,0 +1,19 @@
+package com.reactnativekeyboardcontroller
+
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.viewmanagers.KeyboardBackgroundViewManagerInterface
+import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.views.view.ReactViewManager
+import com.reactnativekeyboardcontroller.managers.KeyboardBackgroundViewManagerImpl
+import com.reactnativekeyboardcontroller.views.background.KeyboardBackgroundViewGroup
+
+class KeyboardBackgroundViewManager :
+  ReactViewManager(),
+  KeyboardBackgroundViewManagerInterface<ReactViewGroup> {
+  private val manager = KeyboardBackgroundViewManagerImpl()
+
+  override fun getName(): String = KeyboardBackgroundViewManagerImpl.NAME
+
+  override fun createViewInstance(context: ThemedReactContext): KeyboardBackgroundViewGroup =
+    manager.createViewInstance(context)
+}

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerModule.kt

@@ -18,6 +18,10 @@ class KeyboardControllerModule(
     module.setDefaultMode()
   }
 
+  override fun preload() {
+    module.preload()
+  }
+
   override fun dismiss(keepFocus: Boolean) {
     module.dismiss(keepFocus)
   }

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt

@@ -1,6 +1,5 @@
 package com.reactnativekeyboardcontroller
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -11,11 +10,10 @@ import com.facebook.react.views.view.ReactViewManager
 import com.reactnativekeyboardcontroller.managers.KeyboardControllerViewManagerImpl
 import com.reactnativekeyboardcontroller.views.EdgeToEdgeReactViewGroup
 
-class KeyboardControllerViewManager(
-  mReactContext: ReactApplicationContext,
-) : ReactViewManager(),
+class KeyboardControllerViewManager :
+  ReactViewManager(),
   KeyboardControllerViewManagerInterface<ReactViewGroup> {
-  private val manager = KeyboardControllerViewManagerImpl(mReactContext)
+  private val manager = KeyboardControllerViewManagerImpl()
   private val mDelegate = KeyboardControllerViewManagerDelegate(this)
 
   // region Lifecycle

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardGestureAreaViewManager.kt

@@ -1,6 +1,5 @@
 package com.reactnativekeyboardcontroller
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -11,11 +10,10 @@ import com.facebook.react.views.view.ReactViewManager
 import com.reactnativekeyboardcontroller.managers.KeyboardGestureAreaViewManagerImpl
 import com.reactnativekeyboardcontroller.views.KeyboardGestureAreaReactViewGroup
 
-class KeyboardGestureAreaViewManager(
-  mReactContext: ReactApplicationContext,
-) : ReactViewManager(),
+class KeyboardGestureAreaViewManager :
+  ReactViewManager(),
   KeyboardGestureAreaManagerInterface<ReactViewGroup> {
-  private val manager = KeyboardGestureAreaViewManagerImpl(mReactContext)
+  private val manager = KeyboardGestureAreaViewManagerImpl()
   private val mDelegate = KeyboardGestureAreaManagerDelegate(this)
 
   override fun getDelegate(): ViewManagerDelegate<ReactViewGroup> = mDelegate

package/android/src/fabric/java/com/reactnativekeyboardcontroller/OverKeyboardViewManager.kt

@@ -1,6 +1,5 @@
 package com.reactnativekeyboardcontroller
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.LayoutShadowNode
 import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.StateWrapper
@@ -14,11 +13,10 @@ import com.reactnativekeyboardcontroller.managers.OverKeyboardViewManagerImpl
 import com.reactnativekeyboardcontroller.views.overlay.OverKeyboardHostShadowNode
 import com.reactnativekeyboardcontroller.views.overlay.OverKeyboardHostView
 
-class OverKeyboardViewManager(
-  mReactContext: ReactApplicationContext,
-) : ViewGroupManager<OverKeyboardHostView>(),
+class OverKeyboardViewManager :
+  ViewGroupManager<OverKeyboardHostView>(),
   OverKeyboardViewManagerInterface<OverKeyboardHostView> {
-  private val manager = OverKeyboardViewManagerImpl(mReactContext)
+  private val manager = OverKeyboardViewManagerImpl()
   private val mDelegate = OverKeyboardViewManagerDelegate(this)
 
   override fun getDelegate(): ViewManagerDelegate<OverKeyboardHostView> = mDelegate

package/android/src/fabric/java/com/reactnativekeyboardcontroller/StatusBarManagerCompatModule.kt

@@ -1,7 +1,7 @@
 package com.reactnativekeyboardcontroller
 
 import com.facebook.react.bridge.ReactApplicationContext
-import com.reactnativekeyboardcontroller.modules.StatusBarManagerCompatModuleImpl
+import com.reactnativekeyboardcontroller.modules.statusbar.StatusBarManagerCompatModuleImpl
 
 class StatusBarManagerCompatModule(
   mReactContext: ReactApplicationContext,
@@ -10,6 +10,8 @@ class StatusBarManagerCompatModule(
 
   override fun getName(): String = StatusBarManagerCompatModuleImpl.NAME
 
+  override fun getConstants(): MutableMap<String, Any>? = module.getConstants()
+
   override fun setHidden(hidden: Boolean) {
     module.setHidden(hidden)
   }

package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/Context.kt

@@ -1,9 +1,11 @@
 package com.reactnativekeyboardcontroller.extensions
 
 import android.annotation.SuppressLint
+import android.content.ComponentName
 import android.content.Context
 import android.graphics.Point
 import android.os.Build
+import android.provider.Settings
 import android.view.Display
 import android.view.WindowManager
 import android.view.WindowMetrics
@@ -36,3 +38,21 @@ fun Context.getDisplaySize(): Point {
 
   return size
 }
+
+fun Context.isSystemDarkMode(): Boolean =
+  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+    (getSystemService(Context.UI_MODE_SERVICE) as? android.app.UiModeManager)
+      ?.nightMode == android.app.UiModeManager.MODE_NIGHT_YES
+  } else {
+    false
+  }
+
+fun Context.currentImePackage(): String? {
+  val id =
+    Settings.Secure.getString(
+      contentResolver,
+      Settings.Secure.DEFAULT_INPUT_METHOD,
+    ) ?: return null
+
+  return ComponentName.unflattenFromString(id)?.packageName
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ThemedReactContext.kt

@@ -1,7 +1,5 @@
 package com.reactnativekeyboardcontroller.extensions
 
-import android.content.Context
-import android.os.Build
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.WritableMap
@@ -55,15 +53,7 @@ fun ThemedReactContext?.keepShadowNodesInSync(viewId: Int) {
 val ThemedReactContext?.appearance: String
   get() =
     when {
-      this == null -> "default"
-      isSystemDarkMode(this) -> "dark"
+      this == null -> "light"
+      isSystemDarkMode() -> "dark"
       else -> "light"
     }
-
-private fun isSystemDarkMode(context: Context): Boolean =
-  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-    (context.getSystemService(Context.UI_MODE_SERVICE) as? android.app.UiModeManager)
-      ?.nightMode == android.app.UiModeManager.MODE_NIGHT_YES
-  } else {
-    false
-  }

package/android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardBackgroundViewManagerImpl.kt

@@ -0,0 +1,13 @@
+package com.reactnativekeyboardcontroller.managers
+
+import com.facebook.react.uimanager.ThemedReactContext
+import com.reactnativekeyboardcontroller.views.background.KeyboardBackgroundViewGroup
+
+class KeyboardBackgroundViewManagerImpl {
+  fun createViewInstance(reactContext: ThemedReactContext): KeyboardBackgroundViewGroup =
+    KeyboardBackgroundViewGroup(reactContext)
+
+  companion object {
+    const val NAME = "KeyboardBackgroundView"
+  }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardControllerViewManagerImpl.kt

@@ -1,6 +1,5 @@
 package com.reactnativekeyboardcontroller.managers
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativekeyboardcontroller.events.FocusedInputLayoutChangedEvent
@@ -10,10 +9,7 @@ import com.reactnativekeyboardcontroller.events.KeyboardTransitionEvent
 import com.reactnativekeyboardcontroller.listeners.WindowDimensionListener
 import com.reactnativekeyboardcontroller.views.EdgeToEdgeReactViewGroup
 
-@Suppress("detekt:UnusedPrivateProperty")
-class KeyboardControllerViewManagerImpl(
-  mReactContext: ReactApplicationContext,
-) {
+class KeyboardControllerViewManagerImpl {
   private var listener: WindowDimensionListener? = null
 
   fun createViewInstance(reactContext: ThemedReactContext): EdgeToEdgeReactViewGroup {
@@ -32,7 +28,7 @@ class KeyboardControllerViewManagerImpl(
     view: EdgeToEdgeReactViewGroup,
     enabled: Boolean,
   ) {
-    view.setActive(enabled)
+    view.active = enabled
   }
 
   fun setStatusBarTranslucent(

package/android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardGestureAreaViewManagerImpl.kt

@@ -1,13 +1,9 @@
 package com.reactnativekeyboardcontroller.managers
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativekeyboardcontroller.views.KeyboardGestureAreaReactViewGroup
 
-@Suppress("detekt:UnusedPrivateProperty")
-class KeyboardGestureAreaViewManagerImpl(
-  mReactContext: ReactApplicationContext,
-) {
+class KeyboardGestureAreaViewManagerImpl {
   fun createViewInstance(reactContext: ThemedReactContext): KeyboardGestureAreaReactViewGroup =
     KeyboardGestureAreaReactViewGroup(reactContext)
 

package/android/src/main/java/com/reactnativekeyboardcontroller/managers/OverKeyboardViewManagerImpl.kt

@@ -1,13 +1,9 @@
 package com.reactnativekeyboardcontroller.managers
 
-import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ThemedReactContext
 import com.reactnativekeyboardcontroller.views.overlay.OverKeyboardHostView
 
-@Suppress("detekt:UnusedPrivateProperty")
-class OverKeyboardViewManagerImpl(
-  mReactContext: ReactApplicationContext,
-) {
+class OverKeyboardViewManagerImpl {
   fun createViewInstance(reactContext: ThemedReactContext): OverKeyboardHostView = OverKeyboardHostView(reactContext)
 
   fun setVisible(

package/android/src/main/java/com/reactnativekeyboardcontroller/modules/KeyboardControllerModuleImpl.kt

@@ -22,6 +22,10 @@ class KeyboardControllerModuleImpl(
     setSoftInputMode(mDefaultMode)
   }
 
+  fun preload() {
+    // no-op on Android
+  }
+
   fun dismiss(keepFocus: Boolean) {
     val activity = mReactContext.currentActivity
     val view: View? = FocusedInputHolder.get()

package/android/src/main/java/com/reactnativekeyboardcontroller/modules/{StatusBarManagerCompatModuleImpl.kt → statusbar/StatusBarManagerCompatModuleImpl.kt}

@@ -1,4 +1,4 @@
-package com.reactnativekeyboardcontroller.modules
+package com.reactnativekeyboardcontroller.modules.statusbar
 
 import android.animation.ArgbEvaluator
 import android.animation.ValueAnimator
@@ -19,10 +19,15 @@ private val TAG = StatusBarManagerCompatModuleImpl::class.qualifiedName
 class StatusBarManagerCompatModuleImpl(
   private val mReactContext: ReactApplicationContext,
 ) {
+  private var original = StatusBarModuleProxy(mReactContext)
   private var controller: WindowInsetsControllerCompat? = null
   private var lastActivity = WeakReference<Activity?>(null)
 
   fun setHidden(hidden: Boolean) {
+    if (!isEnabled()) {
+      return original.setHidden(hidden)
+    }
+
     UiThreadUtil.runOnUiThread {
       if (hidden) {
         getController()?.hide(WindowInsetsCompat.Type.statusBars())
@@ -37,9 +42,16 @@ class StatusBarManagerCompatModuleImpl(
     color: Int,
     animated: Boolean,
   ) {
+    if (!isEnabled()) {
+      return original.setColor(color.toDouble(), animated)
+    }
+
     val activity = mReactContext.currentActivity
     if (activity == null) {
-      Logger.w(TAG, "StatusBarManagerCompatModule: Ignored status bar change, current activity is null.")
+      Logger.w(
+        TAG,
+        "StatusBarManagerCompatModule: Ignored status bar change, current activity is null.",
+      )
       return
     }
 
@@ -61,18 +73,27 @@ class StatusBarManagerCompatModuleImpl(
   }
 
   fun setTranslucent(translucent: Boolean) {
+    if (!isEnabled()) {
+      return original.setTranslucent(translucent)
+    }
+
     UiThreadUtil.runOnUiThread {
-      val view = mReactContext.rootView?.findViewWithTag<EdgeToEdgeReactViewGroup>(EdgeToEdgeReactViewGroup.VIEW_TAG)
-      view?.forceStatusBarTranslucent(translucent)
+      view()?.forceStatusBarTranslucent(translucent)
     }
   }
 
   fun setStyle(style: String) {
+    if (!isEnabled()) {
+      return original.setStyle(style)
+    }
+
     UiThreadUtil.runOnUiThread {
       getController()?.isAppearanceLightStatusBars = style == "dark-content"
     }
   }
 
+  fun getConstants(): MutableMap<String, Any>? = original.getConstants()
+
   private fun getController(): WindowInsetsControllerCompat? {
     val activity = mReactContext.currentActivity
 
@@ -94,8 +115,13 @@ class StatusBarManagerCompatModuleImpl(
     return this.controller
   }
 
+  private fun isEnabled(): Boolean = view()?.active ?: false
+
+  private fun view(): EdgeToEdgeReactViewGroup? =
+    mReactContext.rootView?.findViewWithTag<EdgeToEdgeReactViewGroup>(EdgeToEdgeReactViewGroup.VIEW_TAG)
+
   companion object {
-    const val NAME = "StatusBarManagerCompat"
+    const val NAME = "StatusBarManager"
     private const val DEFAULT_ANIMATION_TIME = 300L
   }
 }

package/android/src/main/java/com/reactnativekeyboardcontroller/modules/statusbar/StatusBarModuleProxy.kt

@@ -0,0 +1,86 @@
+@file:Suppress("detekt:TooGenericExceptionCaught")
+
+package com.reactnativekeyboardcontroller.modules.statusbar
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.reactnativekeyboardcontroller.log.Logger
+import java.lang.reflect.Method
+
+private val TAG = StatusBarModuleProxy::class.qualifiedName
+
+/**
+ * For the sake of better compatibility with the old/new version of the react-native, we are using reflection
+ * to call the methods of the module. In RN 0.78 the `StatusBarModule` was public, but in RN 0.80
+ * it's internal (kotlin-only). So we are using reflection to call the methods of the module.
+ */
+class StatusBarModuleProxy(
+  reactContext: ReactApplicationContext,
+) {
+  private var instance: Any? = null
+
+  private var setHiddenMethod: Method? = null
+  private var setColorMethod: Method? = null
+  private var setTranslucentMethod: Method? = null
+  private var setStyleMethod: Method? = null
+  private var getConstantsMethod: Method? = null
+
+  init {
+    try {
+      val clazz = Class.forName("com.facebook.react.modules.statusbar.StatusBarModule")
+      val constructor = clazz.getConstructor(ReactApplicationContext::class.java)
+      instance = constructor.newInstance(reactContext)
+
+      setHiddenMethod = clazz.getMethod("setHidden", Boolean::class.java)
+      setColorMethod = clazz.getMethod("setColor", Double::class.java, Boolean::class.java)
+      setTranslucentMethod = clazz.getMethod("setTranslucent", Boolean::class.java)
+      setStyleMethod = clazz.getMethod("setStyle", String::class.java)
+      getConstantsMethod = clazz.getMethod("getConstants")
+    } catch (e: Exception) {
+      Logger.w(TAG, "Failed to initialize StatusBarModule via reflection", e)
+    }
+  }
+
+  fun setHidden(hidden: Boolean) {
+    try {
+      setHiddenMethod?.invoke(instance, hidden)
+    } catch (e: Exception) {
+      Logger.w(TAG, "Error invoking StatusBarModule.setHidden method", e)
+    }
+  }
+
+  fun setColor(
+    color: Double,
+    animated: Boolean,
+  ) {
+    try {
+      setColorMethod?.invoke(instance, color, animated)
+    } catch (e: Exception) {
+      Logger.w(TAG, "Error invoking StatusBarModule.setColor method", e)
+    }
+  }
+
+  fun setTranslucent(translucent: Boolean) {
+    try {
+      setTranslucentMethod?.invoke(instance, translucent)
+    } catch (e: Exception) {
+      Logger.w(TAG, "Error invoking StatusBarModule.setTranslucent method", e)
+    }
+  }
+
+  fun setStyle(style: String) {
+    try {
+      setStyleMethod?.invoke(instance, style)
+    } catch (e: Exception) {
+      Logger.w(TAG, "Error invoking StatusBarModule.setStyle method", e)
+    }
+  }
+
+  fun getConstants(): MutableMap<String, Any>? =
+    try {
+      @Suppress("UNCHECKED_CAST")
+      getConstantsMethod?.invoke(instance) as? MutableMap<String, Any>
+    } catch (e: Exception) {
+      Logger.w(TAG, "Error invoking StatusBarModule.getConstants method", e)
+      null
+    }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt

@@ -31,8 +31,16 @@ class EdgeToEdgeReactViewGroup(
   private var isStatusBarTranslucent = false
   private var isNavigationBarTranslucent = false
   private var isPreservingEdgeToEdge = false
-  private var active = false
   private var isEdgeToEdge = false
+  var active: Boolean = false
+    set(value) {
+      field = value
+      if (value) {
+        enable()
+      } else {
+        disable()
+      }
+    }
 
   // internal class members
   private var eventView: ReactViewGroup? = null
@@ -223,16 +231,6 @@ class EdgeToEdgeReactViewGroup(
   fun setPreserveEdgeToEdge(isPreservingEdgeToEdge: Boolean) {
     this.isPreservingEdgeToEdge = isPreservingEdgeToEdge
   }
-
-  fun setActive(active: Boolean) {
-    this.active = active
-
-    if (active) {
-      this.enable()
-    } else {
-      this.disable()
-    }
-  }
   // endregion
 
   // region external methods

package/android/src/main/java/com/reactnativekeyboardcontroller/views/background/KeyboardBackgroundViewGroup.kt

@@ -0,0 +1,35 @@
+package com.reactnativekeyboardcontroller.views.background
+
+import android.annotation.SuppressLint
+import android.content.res.Configuration
+import android.view.WindowInsets
+import com.facebook.react.uimanager.BackgroundStyleApplicator
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+@SuppressLint("ViewConstructor")
+class KeyboardBackgroundViewGroup(
+  private val reactContext: ThemedReactContext,
+) : ReactViewGroup(reactContext) {
+  // view mounted
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    BackgroundStyleApplicator.setBackgroundColor(this, reactContext.getInputMethodColor())
+  }
+
+  // theme changed
+  override fun onConfigurationChanged(newConfig: Configuration?) {
+    super.onConfigurationChanged(newConfig)
+    BackgroundStyleApplicator.setBackgroundColor(this, reactContext.getInputMethodColor())
+  }
+
+  // keyboard changed
+  override fun onApplyWindowInsets(insets: WindowInsets?): WindowInsets {
+    BackgroundStyleApplicator.setBackgroundColor(this, reactContext.getInputMethodColor())
+    return super.onApplyWindowInsets(insets)
+  }
+
+  override fun setBackgroundColor(color: Int) {
+    // do nothing, since we manage background color on our own
+  }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/views/background/Skins.kt

@@ -0,0 +1,91 @@
+package com.reactnativekeyboardcontroller.views.background
+
+import android.content.Context
+import android.graphics.Color
+import android.os.Build
+import androidx.annotation.ColorInt
+import com.facebook.react.uimanager.ThemedReactContext
+import com.reactnativekeyboardcontroller.R
+import com.reactnativekeyboardcontroller.extensions.currentImePackage
+import com.reactnativekeyboardcontroller.extensions.isSystemDarkMode
+import com.reactnativekeyboardcontroller.log.Logger
+
+private const val TAG = "Skins"
+private const val MAX_RGB_VALUE = 255
+
+object ImePackages {
+  const val AOSP = "com.android.inputmethod.latin"
+  const val GBOARD = "com.google.android.inputmethod.latin"
+  const val SWIFT_KEY = "com.touchtype.swiftkey"
+  const val GBOARD_TTS = "com.google.android.googlequicksearchbox"
+  const val GOOGLE_TTS = "com.google.android.tts"
+  const val YANDEX = "ru.yandex.androidkeyboard"
+  const val SAMSUNG = "com.samsung.android.honeyboard"
+}
+
+val imeColorMap: Map<String, Pair<Int, Int>> =
+  mapOf(
+    ImePackages.AOSP to (R.style.aosp_light to R.style.aosp_light),
+    ImePackages.GBOARD to (R.style.gboard_light to R.style.gboard_dark),
+    ImePackages.SWIFT_KEY to (R.style.swiftkey_light to R.style.swiftkey_dark),
+    ImePackages.GBOARD_TTS to (R.style.gboard_tts_light to R.style.gboard_tts_dark),
+    ImePackages.GOOGLE_TTS to (R.style.gboard_tts_light to R.style.gboard_tts_dark),
+    ImePackages.YANDEX to (R.style.yandex_light to R.style.yandex_dark),
+    ImePackages.SAMSUNG to (R.style.samsung_light to R.style.samsung_dark),
+  )
+
+data class ColorProperties(
+  @ColorInt val color: Int,
+  val tone: Int = 0,
+) {
+  @get:ColorInt
+  val blend: Int
+    get() = shiftRgbChannels(color, tone)
+}
+
+fun Context.getColorProperties(styleResId: Int): ColorProperties {
+  val attrs = obtainStyledAttributes(styleResId, R.styleable.ColorProperties)
+  try {
+    return ColorProperties(
+      color = attrs.getColor(R.styleable.ColorProperties_color, Color.BLACK),
+      tone = attrs.getInt(R.styleable.ColorProperties_tone, 0),
+    )
+  } finally {
+    attrs.recycle()
+  }
+}
+
+@ColorInt
+fun shiftRgbChannels(
+  @ColorInt color: Int,
+  shift: Int = 4,
+): Int {
+  val red = (Color.red(color) + shift).coerceIn(0, MAX_RGB_VALUE)
+  val green = (Color.green(color) + shift).coerceIn(0, MAX_RGB_VALUE)
+  val blue = (Color.blue(color) + shift).coerceIn(0, MAX_RGB_VALUE)
+
+  return Color.argb(
+    Color.alpha(color),
+    red,
+    green,
+    blue,
+  )
+}
+
+@ColorInt
+fun ThemedReactContext.getInputMethodColor(): Int {
+  val imePackage = currentImePackage()
+  val isDark = isSystemDarkMode()
+
+  Logger.i(TAG, "Current IME: $imePackage")
+
+  val (lightColorRes, darkColorRes) =
+    imeColorMap[imePackage]
+      ?: (R.style.gboard_light to R.style.gboard_dark)
+
+  // on Android 10 dark theme doesn't affect keyboard color
+  val resId = if (isDark && Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) darkColorRes else lightColorRes
+  val color = getColorProperties(resId).blend
+
+  return color
+}

package/android/src/main/jni/reactnativekeyboardcontroller.h

@@ -13,6 +13,7 @@
 #include <react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardControllerViewComponentDescriptor.h>
 #include <react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardGestureAreaComponentDescriptor.h>
 #include <react/renderer/components/reactnativekeyboardcontroller/RNKCOverKeyboardViewComponentDescriptor.h>
+#include <react/renderer/components/reactnativekeyboardcontroller/RNKCKeyboardBackgroundViewComponentDescriptor.h>
 
 #include <memory>
 #include <string>

package/android/src/main/res/values/attrs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <declare-styleable name="ColorProperties">
+    <attr name="color" format="color" />
+    <attr name="tone" format="integer" />
+  </declare-styleable>
+</resources>