@momo-kits/calculator-keyboard 0.150.2-beta.13 → 0.150.2-beta.14

package/android/src/main/java/com/calculatorkeyboard/CustomKeyboardView.kt

@@ -9,12 +9,12 @@ import android.widget.Button
 import android.widget.ImageButton
 import androidx.appcompat.app.AppCompatActivity
 import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.core.graphics.ColorUtils
 import com.facebook.react.uimanager.ThemedReactContext
 import org.mariuszgromada.math.mxparser.Expression
 import androidx.core.graphics.toColorInt
-import com.facebook.react.uimanager.PixelUtil.dpToPx
-
+import com.calculatorkeyboard.RCTInputCalculator.Companion.calculatorHeight
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.uimanager.events.RCTEventEmitter
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
 class CustomKeyboardView(
@@ -22,22 +22,26 @@ class CustomKeyboardView(
   private val editText: CalculatorEditText
 ) : ConstraintLayout(context) {
   private val keys = listOf(
-    listOf("AC", "÷", "×", "back"),
-    listOf("7", "8", "9", "-"),
-    listOf("4", "5", "6", "+"),
-    listOf("1", "2", "3", "="),
-    listOf("000", "0")
+    listOf("1", "2", "3", "÷", "back"),
+    listOf("4", "5", "6", "×", "="),
+    listOf("7", "8", "9", "-", "Xong"),
+    listOf("000", "0", "+")
   )
-  private val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
+  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+")
   private val separatorWidth = 8f
   private var specialButtonColor: Int = "#D8D8D8".toColorInt()
 
+  private var customKeyButton: Button? = null
+  private var customKeyButtonBackground: Int = "#D8D8D8".toColorInt()
+  private var customKeyButtonTextColor: Int = Color.BLACK
+  private var customKeyButtonState: Int = 0
+
   init {
     val activity = context.currentActivity as? AppCompatActivity
     if (activity != null) {
       val displayMetrics = resources.displayMetrics
-      val widthButton = (displayMetrics.widthPixels - separatorWidth * 2 - 3 * separatorWidth) / 4f
-      val heightButton = (290.dpToPx() - separatorWidth * 2 - 4 * separatorWidth) / 5
+      val widthButton = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
+      val heightButton = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
 
       renderUI(widthButton, heightButton)
     }
@@ -46,16 +50,19 @@ class CustomKeyboardView(
 
   private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
     var yOffset = separatorWidth
-    for ((_, row) in keys.withIndex()) {
+    for ((rowIndex, row) in keys.withIndex()) {
       var xOffset = separatorWidth
-      for ((_, key) in row.withIndex()) {
+      for ((colIndex, key) in row.withIndex()) {
+        val isCustomKey = rowIndex == 2 && colIndex == 4
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (key == "=") buttonWidth + separatorWidth else buttonHeight
+        val height = if (isCustomKey) buttonHeight * 2 + separatorWidth else buttonHeight
 
         val button = if (key == "back") {
           createImageButton(key, xOffset, yOffset, buttonWidth.toInt(), buttonHeight.toInt())
         } else {
-          createButton(key, xOffset, yOffset, width.toInt(), height.toInt())
+          createButton(key, xOffset, yOffset, width.toInt(), height.toInt(), isCustomKey).also { b ->
+            if (isCustomKey) customKeyButton = b
+          }
         }
 
         addView(button)
@@ -72,8 +79,8 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
+    isCustomKey: Boolean
   ): Button {
-    val specialKeys = listOf("=", "-", "×", "÷", "AC", "back", "+")
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
         shape = GradientDrawable.RECTANGLE
@@ -85,9 +92,11 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = 24.toFloat()
+      textSize = (if (isCustomKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
+      maxLines = 1
+      isAllCaps = false
       layoutParams = LayoutParams(
         buttonWidth,
         buttonHeight
@@ -107,7 +116,7 @@ class CustomKeyboardView(
 
       translationX = xOffset.toInt().toFloat()
       translationY = yOffset.toInt().toFloat()
-      setOnClickListener { onKeyPress(key) }
+      setOnClickListener { onKeyPress(key, isCustomKey) }
     }
   }
 
@@ -136,7 +145,7 @@ class CustomKeyboardView(
       translationY = yOffset
       setImageResource(android.R.drawable.ic_input_delete)
       setImageTintList(ColorStateList.valueOf(Color.BLACK))
-      setOnClickListener { onKeyPress(key) }
+      setOnClickListener { onKeyPress(key, false) }
     }
   }
 
@@ -172,25 +181,18 @@ class CustomKeyboardView(
     }
   }
 
-  private fun onKeyPress(key: String) {
-    when (key) {
-      "AC" -> {
-        clearText()
-      }
-
-      "back" -> {
-        onBackSpace()
-      }
-
-      "=" -> {
-        calculateResult()
-      }
+  private fun onKeyPress(key: String, isCustomKey: Boolean) {
+    if (isCustomKey) {
+      emitCustomKey()
+      return
+    }
 
+    emitKeyPress(key)
+    when (key) {
+      "back" -> onBackSpace()
+      "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
-
-      else -> {
-        editText.text?.insert(editText.selectionStart, key)
-      }
+      else -> editText.text?.insert(editText.selectionStart, key)
     }
   }
 
@@ -199,10 +201,6 @@ class CustomKeyboardView(
     editText.text?.replace(editText.selectionStart, editText.selectionEnd, key)
   }
 
-  private fun clearText() {
-    editText.text?.clear()
-  }
-
   private fun onBackSpace() {
     val start = editText.selectionStart
     val end = editText.selectionEnd
@@ -239,4 +237,52 @@ class CustomKeyboardView(
     }
   }
 
+  private fun emitKeyPress(key: String) {
+    val reactContext = context as ThemedReactContext
+    val params = Arguments.createMap().apply {
+      putString("key", key)
+    }
+    reactContext.getJSModule(RCTEventEmitter::class.java)
+      .receiveEvent(editText.id, "onKeyPress", params)
+  }
+
+  private fun emitCustomKey() {
+    val reactContext = context as ThemedReactContext
+    reactContext.getJSModule(RCTEventEmitter::class.java)
+      .receiveEvent(editText.id, "onCustomKeyEvent", null)
+  }
+
+  fun setCustomKeyText(text: String) {
+    customKeyButton?.text = text
+  }
+
+  fun setCustomKeyBackground(background: Int) {
+    customKeyButtonBackground = background
+    updateCustomKeyUI(background, customKeyButtonTextColor, customKeyButtonState)
+  }
+
+  fun setCustomKeyTextColor(textColor: Int) {
+    customKeyButtonTextColor = textColor
+    updateCustomKeyUI(customKeyButtonBackground, textColor, customKeyButtonState)
+  }
+
+
+  fun setCustomKeyState(state: Int) {
+    customKeyButtonState = state
+    customKeyButton?.isEnabled = state == 0
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor, state)
+  }
+
+  private fun updateCustomKeyUI(background: Int, textColor: Int, state: Int){
+    val backgroundColor = if(state == 1) "#EBEBF2".toColorInt() else background
+    val textColor = if (state == 1) Color.WHITE else textColor
+
+    customKeyButton?.background = GradientDrawable().apply {
+      shape = GradientDrawable.RECTANGLE
+      cornerRadius = 24f
+      setColor(backgroundColor)
+    }
+    customKeyButton?.setTextColor(textColor)
+  }
+
 }

package/android/src/main/java/com/calculatorkeyboard/RCTInputCalculator.kt

@@ -2,40 +2,49 @@ package com.calculatorkeyboard
 
 import android.annotation.SuppressLint
 import android.app.Activity
-import android.graphics.PixelFormat
-import android.graphics.drawable.ColorDrawable
+import android.content.Context
+import android.content.ContextWrapper
+import android.graphics.Color
 import android.view.Gravity
 import android.view.KeyEvent
 import android.view.View
-import android.view.WindowInsets
 import android.view.WindowManager
+import android.view.animation.DecelerateInterpolator
+import android.view.inputmethod.InputMethodManager
 import android.widget.PopupWindow
-import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.graphics.Insets
+import androidx.core.graphics.drawable.toDrawable
 import androidx.core.graphics.toColorInt
+import androidx.core.view.OnApplyWindowInsetsListener
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.textinput.ReactTextInputManager
-import androidx.core.graphics.drawable.toDrawable
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
-import com.facebook.react.uimanager.PixelUtil.dpToPx
 
 class RCTInputCalculator : ReactTextInputManager() {
 
   private var keyboardView: CustomKeyboardView? = null
-  private var calculatorHeight: Int = 290.dpToPx().toInt()
   private var popup: PopupWindow? = null
   private val animationDuration = 250L
 
   private lateinit var editText: CalculatorEditText
 
+  private var fakeImeListener: OnApplyWindowInsetsListener? = null
+  private var fakeImeAttachedTo: View? = null
+
+  private lateinit var imm: InputMethodManager
+
+
   override fun getName() = REACT_CLASS
 
   companion object {
     const val REACT_CLASS = "RCTInputCalculator"
+    val calculatorHeight: Int = 240.dpToPx().toInt()
   }
 
   @ReactProp(name = "value")
@@ -56,6 +65,27 @@ class RCTInputCalculator : ReactTextInputManager() {
     }
   }
 
+  @ReactProp(name = "customKeyText")
+  fun setCustomKeyText(view: ReactEditText, text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Xong")
+  }
+
+  @ReactProp(name = "customKeyBackground")
+  fun setCustomKeyBackground(view: ReactEditText, background: String?) {
+    keyboardView?.setCustomKeyBackground((background?: "#d8d8d8").toColorInt())
+  }
+
+  @ReactProp(name = "customKeyTextColor")
+  fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
+    keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
+  }
+
+
+  @ReactProp(name = "customKeyState")
+  fun setCustomKeyState(view: ReactEditText, state: Int?) {
+    keyboardView?.setCustomKeyState(state ?: 0)
+  }
+
   @ReactProp(name = "keyboardColor")
   fun setKeyboardColor(view: ReactEditText, color: String) {
     keyboardView?.updateButtonColors(color.toColorInt())
@@ -63,8 +93,10 @@ class RCTInputCalculator : ReactTextInputManager() {
 
   @SuppressLint("ClickableViewAccessibility")
   override fun createViewInstance(context: ThemedReactContext): ReactEditText {
+    imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+
     editText = CalculatorEditText(context).apply {
-      showSoftInputOnFocus = false
+      showSoftInputOnFocus = true
     }
 
     keyboardView = CustomKeyboardView(context, editText).apply {
@@ -107,6 +139,24 @@ class RCTInputCalculator : ReactTextInputManager() {
     }
   }
 
+  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomBubblingEventTypeConstants().toMutableMap()
+
+    base["onKeyPress"] = mapOf(
+      "phasedRegistrationNames" to mapOf(
+        "bubbled" to "onKeyPress"
+      )
+    )
+
+    return base
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomDirectEventTypeConstants().toMutableMap()
+    base["onCustomKeyEvent"] = mapOf("registrationName" to "onCustomKeyEvent")
+    return base
+  }
+
   private fun ensurePopup() {
     if (popup != null) return
     val content = keyboardView ?: return
@@ -136,33 +186,143 @@ class RCTInputCalculator : ReactTextInputManager() {
     val p = popup ?: return
     if (p.isShowing) return
 
-    val root = keyboardView ?: return
+    disableSystemImeFor(editText)
 
-    root.translationY = calculatorHeight.toFloat()
+    p.animationStyle = 0
+    p.height = calculatorHeight + bottomInsetFrom(anchor.rootView)
     p.showAtLocation(anchor.rootView, Gravity.BOTTOM or Gravity.START, 0, 0)
 
-    root.animate()
-      ?.translationY(0f)
-      ?.setDuration(animationDuration)
-      ?.start()
+    val content = p.contentView
+
+    val h = content.height.takeIf { it > 0 } ?: p.height
+    content.translationY = h.toFloat()
+
+    content.post {
+      content.animate()
+        .translationY(0f)
+        .setDuration(animationDuration)
+        .setInterpolator(DecelerateInterpolator())
+        .withStartAction { content.setLayerType(View.LAYER_TYPE_HARDWARE, null) }
+        .withEndAction { content.setLayerType(View.LAYER_TYPE_NONE, null) }
+        .start()
+    }
+
+    content.post {
+      findActivityFrom(content)?.let { act ->
+        setFakeIme(act.window.decorView, true, calculatorHeight)
+      }
+    }
   }
 
   private fun hideKeyboardPopup() {
-    val p = popup ?: return
-    if (!p.isShowing) return
-    val root = keyboardView ?: return
+    val p = popup ?: run {
+      enableSystemImeFor(editText, requestShow = false)
+      return
+    }
+    if (!p.isShowing) {
+      enableSystemImeFor(editText, requestShow = false)
+      popup = null
+      return
+    }
+    val content = p.contentView
+
+    content.animate().cancel()
 
-    root.animate()
-      .translationY(calculatorHeight.toFloat())
+    val distance = (content.height.takeIf { it > 0 } ?: p.height).toFloat()
+
+    content.animate()
+      .translationY(distance)
       .setDuration(animationDuration)
+      .setInterpolator(DecelerateInterpolator())
       .withEndAction {
-        try {
-          if (p.isShowing) p.dismiss()
-        } catch (_: Throwable) { }
+        try { if (p.isShowing) p.dismiss() } catch (_: Throwable) {}
+        popup = null
+        content.translationY = 0f
+        content.setLayerType(View.LAYER_TYPE_NONE, null)
+
+        findActivityFrom(content)?.let { act ->
+          setFakeIme(act.window.decorView, false, 0)
+        }
+        enableSystemImeFor(editText, requestShow = false)
+
       }
       .start()
+  }
+
+  private fun disableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = false
+    if (android.os.Build.VERSION.SDK_INT >= 30) {
+      ViewCompat.getWindowInsetsController(v)?.hide(WindowInsetsCompat.Type.ime())
+    }
+    imm.hideSoftInputFromWindow(v.windowToken, 0)
+  }
 
-    popup = null
+
+  private fun enableSystemImeFor(v: ReactEditText, requestShow: Boolean) {
+    v.showSoftInputOnFocus = true
+    if (requestShow && v.isFocused) {
+      v.post {
+        if (android.os.Build.VERSION.SDK_INT >= 30) {
+          ViewCompat.getWindowInsetsController(v)?.show(WindowInsetsCompat.Type.ime())
+        } else {
+          imm.showSoftInput(v, InputMethodManager.SHOW_IMPLICIT)
+        }
+      }
+    }
+  }
+
+  private fun setFakeIme(rootView: View, show: Boolean, heightPx: Int) {
+    if (show) {
+      if (fakeImeListener != null && fakeImeAttachedTo === rootView) {
+        ViewCompat.requestApplyInsets(rootView)
+        return
+      }
+      fakeImeAttachedTo?.let { ViewCompat.setOnApplyWindowInsetsListener(it, null) }
+      fakeImeAttachedTo = rootView
+
+      val listener = OnApplyWindowInsetsListener { _, insets ->
+        val curBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+        val newBarsBottom = maxOf(curBars.bottom, heightPx)
+
+        WindowInsetsCompat.Builder(insets)
+          .setInsets(WindowInsetsCompat.Type.ime(), Insets.of(0, 0, 0, heightPx))
+          .setVisible(WindowInsetsCompat.Type.ime(), true)
+          .setInsets(
+            WindowInsetsCompat.Type.systemBars(),
+            Insets.of(curBars.left, curBars.top, curBars.right, newBarsBottom)
+          )
+          .build()
+      }
+
+      fakeImeListener = listener
+      ViewCompat.setOnApplyWindowInsetsListener(rootView, listener)
+      ViewCompat.requestApplyInsets(rootView)
+    } else {
+      fakeImeAttachedTo?.let { ViewCompat.setOnApplyWindowInsetsListener(it, null) }
+      fakeImeListener = null
+      fakeImeAttachedTo = null
+
+      ViewCompat.requestApplyInsets(rootView)
+
+      if (android.os.Build.VERSION.SDK_INT >= 30) {
+        rootView.rootWindowInsets?.let { wi ->
+          rootView.dispatchApplyWindowInsets(wi)
+        }
+      }
+    }
+  }
+
+  private fun findActivityFrom(view: View): Activity? {
+    var ctx: Context? = view.context
+    if (ctx is ThemedReactContext) {
+      ctx.currentActivity?.let { return it }
+      ctx = ctx.baseContext
+    }
+    while (ctx is ContextWrapper) {
+      if (ctx is Activity) return ctx
+      ctx = ctx.baseContext
+    }
+    return null
   }
 
   private fun focus() {

package/ios/CalculatorKeyboardView.swift

@@ -8,14 +8,20 @@ class CalculatorKeyboardView: UIView {
   weak var input: InputCalculator?
   
   private let keys: [[String]] = [
-    ["AC", "÷", "×", "back"],
-    ["7", "8", "9", "-"],
-    ["4", "5", "6", "+"],
-    ["1", "2", "3", "="],
-    ["000", "0"]
+    ["1", "2", "3", "÷", "back"],
+    ["4", "5", "6", "×", "="],
+    ["7", "8", "9", "-", "Xong"],
+    ["000", "0", "+"],
   ]
   private let SEPARATOR_WIDTH: CGFloat = 4
-  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "AC", "back", "+"]
+  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+"]
+  
+  var customKeyText: String? { didSet { updateCustomKeyTitle() } }
+  var customKeyBackground: String? { didSet { updateCustomKeyBackground() } }
+  var customKeyTextColor: String? { didSet { updateCustomKeyBackground() } }
+  var customKeyState: Int? { didSet { updateCustomKeyBackground() } }
+  private weak var customKeyButton: UIButton?
+
   
   override init(frame: CGRect) {
     super.init(frame: frame)
@@ -34,8 +40,8 @@ class CalculatorKeyboardView: UIView {
     self.subviews.forEach { $0.removeFromSuperview() }
     
     backgroundColor = UIColor(hex: "#f2f2f6")
-    let buttonWidth = (UIScreen.main.bounds.width - SEPARATOR_WIDTH * 2 - 3 * SEPARATOR_WIDTH) / 4
-    let buttonHeight: CGFloat = (290 - SEPARATOR_WIDTH * 2 - 4 * SEPARATOR_WIDTH) / 5
+    let buttonWidth = (UIScreen.main.bounds.width - SEPARATOR_WIDTH * 2 - 4 * SEPARATOR_WIDTH) / 5
+    let buttonHeight: CGFloat = (240 - SEPARATOR_WIDTH * 2 - 3 * SEPARATOR_WIDTH) / 4
     
     // Create a wrapper view
     let contentView = UIView()
@@ -52,19 +58,22 @@ class CalculatorKeyboardView: UIView {
     
     // Add buttons to the wrapper view
     var yOffset: CGFloat = 0
-    for row in keys {
+    for (rowIndex, row) in keys.enumerated() {
       var xOffset: CGFloat = 0
-      for key in row {
+      for (colIndex, key) in row.enumerated() {
+        let isCustomKey = colIndex == 4 && rowIndex == 2
         let button = UIButton(type: .system)
         button.backgroundColor = UIColor.white
         button.layer.cornerRadius = 8
-        button.setTitle(key, for: .normal)
+        let title = isCustomKey ? (customKeyText ?? key) : key
+        button.setTitle(title, for: .normal)
         button.setTitleColor(.black, for: .normal)
-        button.titleLabel?.font = UIFont.systemFont(ofSize: 24, weight: .medium)
+        button.titleLabel?.font = UIFont.systemFont(ofSize: isCustomKey ? 18 : 24, weight: .medium)
         button.nativeID = key
+        button.tag = isCustomKey ? 1 : 0
         
         var buttonFrame = CGRect(x: xOffset, y: yOffset, width: buttonWidth, height: buttonHeight)
-        if key == "=" {
+        if isCustomKey {
           buttonFrame.size.height = buttonHeight * 2 + SEPARATOR_WIDTH
         }
         if key == "000" {
@@ -85,6 +94,10 @@ class CalculatorKeyboardView: UIView {
           button.backgroundColor = color
         }
         
+        if isCustomKey {
+          self.customKeyButton = button
+        }
+        
         button.addTarget(self, action: #selector(keyPressed(_:)), for: .touchUpInside)
         contentView.addSubview(button)
         
@@ -96,12 +109,49 @@ class CalculatorKeyboardView: UIView {
     }
   }
   
+  private func updateCustomKeyTitle() {
+      guard let btn = customKeyButton, let title = customKeyText else { return }
+      btn.setTitle(title, for: .normal)
+      btn.setImage(nil, for: .normal)
+    }
+  
+  private func updateCustomKeyBackground() {
+    guard let btn = customKeyButton,
+            let background = customKeyBackground,
+            let textColor = customKeyTextColor,
+            let state = customKeyState else { return }
+    
+    let bgColor: String
+    if state == 1 {
+      bgColor = "#EBEBF2"
+    } else {
+      bgColor = background
+    }
+    
+    let txtColor: UIColor
+    if state == 1 {
+      txtColor = .white
+    } else {
+      txtColor = UIColor(hex: textColor)
+    }
+    
+    btn.isEnabled = state == 0
+    btn.backgroundColor =  UIColor(hex: bgColor)
+    btn.setTitleColor(txtColor, for: .normal)
+
+  }
+
   
   @objc private func keyPressed(_ sender: UIButton) {
     guard let key = sender.nativeID else { return }
+    let isCustomKey = sender.tag == 1
+    if (isCustomKey) {
+      input?.emitCustomKey()
+      return
+    }
+    
+    input?.emitKeyPress(key)
     switch key {
-    case "AC":
-      input?.clearText()
     case "back":
       input?.onBackSpace()
     case "=":

package/ios/InputCalculator.m

@@ -56,6 +56,8 @@ RCT_EXPORT_SHADOW_PROPERTY(onContentSizeChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(value, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyPress, RCTBubblingEventBlock) 
+RCT_EXPORT_VIEW_PROPERTY(onCustomKeyEvent, RCTDirectEventBlock)
 
 RCT_EXPORT_METHOD(focus : (nonnull NSNumber *)viewTag)
 {
@@ -74,6 +76,10 @@ RCT_EXPORT_METHOD(blur : (nonnull NSNumber *)viewTag)
 }
 
 RCT_EXPORT_VIEW_PROPERTY(keyboardColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(customKeyText, NSString)
+RCT_EXPORT_VIEW_PROPERTY(customKeyBackground, NSString)
+RCT_EXPORT_VIEW_PROPERTY(customKeyTextColor, NSString)
+RCT_EXPORT_VIEW_PROPERTY(customKeyState, NSNumber)
 
 @end
 

package/ios/InputCalculator.swift

@@ -19,6 +19,24 @@ class InputCalculator: RCTSinglelineTextInputView {
 
   @objc var onFocus: RCTBubblingEventBlock?
   @objc var onBlur:  RCTBubblingEventBlock?
+  @objc var onKeyPress: RCTBubblingEventBlock?
+  @objc var onCustomKeyEvent: RCTDirectEventBlock?
+
+  @objc var customKeyText: String? {
+    didSet { keyboardView?.customKeyText = customKeyText as String? }
+  }
+  
+  @objc var customKeyBackground: String? {
+    didSet { keyboardView?.customKeyBackground = customKeyBackground }
+  }
+  
+  @objc var customKeyTextColor: String? {
+    didSet { keyboardView?.customKeyTextColor = customKeyTextColor }
+  }
+  
+  @objc var customKeyState: NSNumber? {
+    didSet { keyboardView?.customKeyState = customKeyState?.intValue }
+  }
 
   @objc func beginEditingInput(_ note: Notification) { onFocus?([:]) }
   @objc func endEditingInput(_ note: Notification)   { onBlur?([:])  }
@@ -50,7 +68,7 @@ class InputCalculator: RCTSinglelineTextInputView {
     super.init(bridge: bridge)
     self.bridge = bridge
     self.keyboardView = CalculatorKeyboardView()
-    self.keyboardView!.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 290 + getbottomInset())
+    self.keyboardView!.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 240 + getbottomInset())
     self.keyboardView!.input = self
 
     backedTextInputView.inputView = self.keyboardView
@@ -79,19 +97,12 @@ class InputCalculator: RCTSinglelineTextInputView {
   func keyDidPress(_ key: String) {
     backedTextInputView.insertText(key)
     value += key
+        
     if let bridge = bridge {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "\(key)", eventCount: 1)
     }
   }
 
-  func clearText() {
-    value = ""
-    (backedTextInputView as? UITextField)?.text = ""
-    if let bridge = bridge {
-      bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "clear", eventCount: 1)
-    }
-  }
-
   func onBackSpace() {
     value = value.dropLast().description
     DispatchQueue.main.async {
@@ -102,7 +113,7 @@ class InputCalculator: RCTSinglelineTextInputView {
         self.backedTextInputView.replace(newRange, withText: "")
       }
     }
-
+    
     if let bridge = bridge {
       bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "back", eventCount: 1)
     }
@@ -124,6 +135,7 @@ class InputCalculator: RCTSinglelineTextInputView {
       if let result = expression.expressionValue(with: nil, context: nil) as? NSNumber {
         textField.text = result.stringValue
         value = result.stringValue
+                
         if let bridge = bridge {
           bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "=", eventCount: 1)
         }
@@ -133,6 +145,14 @@ class InputCalculator: RCTSinglelineTextInputView {
       print("Invalid expression")
     }
   }
+  
+  func emitCustomKey() {
+    onCustomKeyEvent?([:])
+  }
+  
+  func emitKeyPress(_ key: String) {
+    onKeyPress?(["key": key])
+  }
 
 }
 

package/lib/commonjs/index.js

@@ -3,14 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.CustomKeyState = exports.CustomKeyBackground = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NAME = 'RCTInputCalculator';
 const NativeInput = (0, _reactNative.requireNativeComponent)(NAME);
-const InputCalculator = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+let CustomKeyBackground = exports.CustomKeyBackground = /*#__PURE__*/function (CustomKeyBackground) {
+  CustomKeyBackground[CustomKeyBackground["Default"] = 0] = "Default";
+  CustomKeyBackground[CustomKeyBackground["Primary"] = 1] = "Primary";
+  return CustomKeyBackground;
+}({});
+/**
+ * export enum CustomKeyBackground {
+ *   Default = 'default',
+ *   Primary = 'primary',
+ * }
+ */
+let CustomKeyState = exports.CustomKeyState = /*#__PURE__*/function (CustomKeyState) {
+  CustomKeyState[CustomKeyState["Default"] = 0] = "Default";
+  CustomKeyState[CustomKeyState["Disabled"] = 1] = "Disabled";
+  return CustomKeyState;
+}({});
+/**
+ * export enum CustomKeyState {
+ *   Default = 'default',
+ *   Disable = 'disable',
+ * }
+ */
+const InputCalculator = /*#__PURE__*/_react.default.forwardRef(({
+  customKeyBackground = 'default',
+  keyboardColor = '',
+  customKeyText,
+  onKeyPress,
+  customKeyState = CustomKeyState.Default,
+  onCustomKeyEvent,
+  ...props
+}, ref) => {
   const nativeRef = _react.default.useRef(null);
   const _onChange = event => {
     const currentText = event.nativeEvent.text;
@@ -18,6 +48,16 @@ const InputCalculator = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     props.onChangeText && props.onChangeText(currentText);
   };
   const text = props.text ?? props.defaultValue ?? '';
+  let keyBackground = '#D8D8D8';
+  let textKeyColor = '#000000';
+  if (customKeyBackground === CustomKeyBackground.Primary) {
+    keyBackground = '#EB2F96';
+    textKeyColor = '#FFFFFF';
+  }
+
+  /**
+   * expose methods to parent component
+   */
   _react.default.useImperativeHandle(ref, () => ({
     focus() {
       const node = (0, _reactNative.findNodeHandle)(nativeRef.current);
@@ -40,8 +80,14 @@ const InputCalculator = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ...props,
     ref: nativeRef,
     onChange: _onChange,
+    onKeyPress: onKeyPress,
     value: text,
-    keybardColor: (0, _reactNative.processColor)(props.keyboardColor)
+    keybardColor: (0, _reactNative.processColor)(keyboardColor),
+    customKeyText: customKeyText,
+    customKeyBackground: keyBackground,
+    customKeyTextColor: textKeyColor,
+    customKeyState: customKeyState,
+    onCustomKeyEvent: onCustomKeyEvent
   });
 });
 var _default = exports.default = InputCalculator;

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_jsxRuntime","e","__esModule","default","NAME","NativeInput","requireNativeComponent","InputCalculator","React","forwardRef","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","useImperativeHandle","focus","node","findNodeHandle","current","config","UIManager","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","jsx","value","keybardColor","processColor","keyboardColor","_default","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAQsB,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAGtB,MAAMG,IAAI,GAAG,oBAAoB;AACjC,MAAMC,WAAW,GAAG,IAAAC,mCAAsB,EAAMF,IAAI,CAAC;AAYrD,MAAMG,eAAe,gBAAGC,cAAK,CAACC,UAAU,CACtC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAMC,SAAS,GAAGJ,cAAK,CAACK,MAAM,CAAM,IAAI,CAAC;EAEzC,MAAMC,SAAS,GACbC,KAAqD,IAClD;IACH,MAAMC,WAAW,GAAGD,KAAK,CAACE,WAAW,CAACC,IAAI;IAC1CR,KAAK,CAACS,QAAQ,IAAIT,KAAK,CAACS,QAAQ,CAACJ,KAAK,CAAC;IACvCL,KAAK,CAACU,YAAY,IAAIV,KAAK,CAACU,YAAY,CAACJ,WAAW,CAAC;EACvD,CAAC;EAED,MAAME,IAAI,GAAGR,KAAK,CAACQ,IAAI,IAAIR,KAAK,CAACW,YAAY,IAAI,EAAE;EAEnDb,cAAK,CAACc,mBAAmB,CAACX,GAAG,EAAE,OAAO;IACpCY,KAAKA,CAAA,EAAG;MACN,MAAMC,IAAI,GAAG,IAAAC,2BAAc,EAACb,SAAS,CAACc,OAAO,CAAC;MAC9C,IAAI,CAACF,IAAI,EAAE;MACX,MAAMG,MAAM,GAAGC,sBAAS,CAACC,oBAAoB,CAACzB,IAAI,CAAC;MACnD,IAAIuB,MAAM,EAAEG,QAAQ,EAAEP,KAAK,IAAI,IAAI,EAAE;QACnCK,sBAAS,CAACG,0BAA0B,CAACP,IAAI,EAAEG,MAAM,CAACG,QAAQ,CAACP,KAAK,EAAE,EAAE,CAAC;MACvE;IACF,CAAC;IACDS,IAAIA,CAAA,EAAG;MACL,MAAMR,IAAI,GAAG,IAAAC,2BAAc,EAACb,SAAS,CAACc,OAAO,CAAC;MAC9C,IAAI,CAACF,IAAI,EAAE;MACX,MAAMG,MAAM,GAAGC,sBAAS,CAACC,oBAAoB,CAACzB,IAAI,CAAC;MACnD,IAAIuB,MAAM,EAAEG,QAAQ,EAAEE,IAAI,IAAI,IAAI,EAAE;QAClCJ,sBAAS,CAACG,0BAA0B,CAACP,IAAI,EAAEG,MAAM,CAACG,QAAQ,CAACE,IAAI,EAAE,EAAE,CAAC;MACtE;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACE,IAAAhC,WAAA,CAAAiC,GAAA,EAAC5B,WAAW;IAAA,GACNK,KAAK;IACTC,GAAG,EAAEC,SAAU;IACfO,QAAQ,EAAEL,SAAU;IACpBoB,KAAK,EAAEhB,IAAK;IACZiB,YAAY,EAAE,IAAAC,yBAAY,EAAC1B,KAAK,CAAC2B,aAAa;EAAE,CACjD,CAAC;AAEN,CACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEaI,eAAe","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_jsxRuntime","e","__esModule","default","NAME","NativeInput","requireNativeComponent","CustomKeyBackground","exports","CustomKeyState","InputCalculator","React","forwardRef","customKeyBackground","keyboardColor","customKeyText","onKeyPress","customKeyState","Default","onCustomKeyEvent","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","keyBackground","textKeyColor","Primary","useImperativeHandle","focus","node","findNodeHandle","current","config","UIManager","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","jsx","value","keybardColor","processColor","customKeyTextColor","_default"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -1,12 +1,45 @@
 "use strict";
 
 import React from 'react';
-import { processColor, UIManager, findNodeHandle } from 'react-native';
-import { requireNativeComponent } from 'react-native';
+import { findNodeHandle, processColor, requireNativeComponent, UIManager } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NAME = 'RCTInputCalculator';
 const NativeInput = requireNativeComponent(NAME);
-const InputCalculator = /*#__PURE__*/React.forwardRef((props, ref) => {
+export let CustomKeyBackground = /*#__PURE__*/function (CustomKeyBackground) {
+  CustomKeyBackground[CustomKeyBackground["Default"] = 0] = "Default";
+  CustomKeyBackground[CustomKeyBackground["Primary"] = 1] = "Primary";
+  return CustomKeyBackground;
+}({});
+
+/**
+ * export enum CustomKeyBackground {
+ *   Default = 'default',
+ *   Primary = 'primary',
+ * }
+ */
+
+export let CustomKeyState = /*#__PURE__*/function (CustomKeyState) {
+  CustomKeyState[CustomKeyState["Default"] = 0] = "Default";
+  CustomKeyState[CustomKeyState["Disabled"] = 1] = "Disabled";
+  return CustomKeyState;
+}({});
+
+/**
+ * export enum CustomKeyState {
+ *   Default = 'default',
+ *   Disable = 'disable',
+ * }
+ */
+
+const InputCalculator = /*#__PURE__*/React.forwardRef(({
+  customKeyBackground = 'default',
+  keyboardColor = '',
+  customKeyText,
+  onKeyPress,
+  customKeyState = CustomKeyState.Default,
+  onCustomKeyEvent,
+  ...props
+}, ref) => {
   const nativeRef = React.useRef(null);
   const _onChange = event => {
     const currentText = event.nativeEvent.text;
@@ -14,6 +47,16 @@ const InputCalculator = /*#__PURE__*/React.forwardRef((props, ref) => {
     props.onChangeText && props.onChangeText(currentText);
   };
   const text = props.text ?? props.defaultValue ?? '';
+  let keyBackground = '#D8D8D8';
+  let textKeyColor = '#000000';
+  if (customKeyBackground === CustomKeyBackground.Primary) {
+    keyBackground = '#EB2F96';
+    textKeyColor = '#FFFFFF';
+  }
+
+  /**
+   * expose methods to parent component
+   */
   React.useImperativeHandle(ref, () => ({
     focus() {
       const node = findNodeHandle(nativeRef.current);
@@ -36,8 +79,14 @@ const InputCalculator = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props,
     ref: nativeRef,
     onChange: _onChange,
+    onKeyPress: onKeyPress,
     value: text,
-    keybardColor: processColor(props.keyboardColor)
+    keybardColor: processColor(keyboardColor),
+    customKeyText: customKeyText,
+    customKeyBackground: keyBackground,
+    customKeyTextColor: textKeyColor,
+    customKeyState: customKeyState,
+    onCustomKeyEvent: onCustomKeyEvent
   });
 });
 export default InputCalculator;

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","processColor","UIManager","findNodeHandle","requireNativeComponent","jsx","_jsx","NAME","NativeInput","InputCalculator","forwardRef","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","useImperativeHandle","focus","node","current","config","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","value","keybardColor","keyboardColor"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAKEC,YAAY,EACZC,SAAS,EACTC,cAAc,QACT,cAAc;AACrB,SAASC,sBAAsB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,MAAMC,IAAI,GAAG,oBAAoB;AACjC,MAAMC,WAAW,GAAGJ,sBAAsB,CAAMG,IAAI,CAAC;AAYrD,MAAME,eAAe,gBAAGT,KAAK,CAACU,UAAU,CACtC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAMC,SAAS,GAAGb,KAAK,CAACc,MAAM,CAAM,IAAI,CAAC;EAEzC,MAAMC,SAAS,GACbC,KAAqD,IAClD;IACH,MAAMC,WAAW,GAAGD,KAAK,CAACE,WAAW,CAACC,IAAI;IAC1CR,KAAK,CAACS,QAAQ,IAAIT,KAAK,CAACS,QAAQ,CAACJ,KAAK,CAAC;IACvCL,KAAK,CAACU,YAAY,IAAIV,KAAK,CAACU,YAAY,CAACJ,WAAW,CAAC;EACvD,CAAC;EAED,MAAME,IAAI,GAAGR,KAAK,CAACQ,IAAI,IAAIR,KAAK,CAACW,YAAY,IAAI,EAAE;EAEnDtB,KAAK,CAACuB,mBAAmB,CAACX,GAAG,EAAE,OAAO;IACpCY,KAAKA,CAAA,EAAG;MACN,MAAMC,IAAI,GAAGtB,cAAc,CAACU,SAAS,CAACa,OAAO,CAAC;MAC9C,IAAI,CAACD,IAAI,EAAE;MACX,MAAME,MAAM,GAAGzB,SAAS,CAAC0B,oBAAoB,CAACrB,IAAI,CAAC;MACnD,IAAIoB,MAAM,EAAEE,QAAQ,EAAEL,KAAK,IAAI,IAAI,EAAE;QACnCtB,SAAS,CAAC4B,0BAA0B,CAACL,IAAI,EAAEE,MAAM,CAACE,QAAQ,CAACL,KAAK,EAAE,EAAE,CAAC;MACvE;IACF,CAAC;IACDO,IAAIA,CAAA,EAAG;MACL,MAAMN,IAAI,GAAGtB,cAAc,CAACU,SAAS,CAACa,OAAO,CAAC;MAC9C,IAAI,CAACD,IAAI,EAAE;MACX,MAAME,MAAM,GAAGzB,SAAS,CAAC0B,oBAAoB,CAACrB,IAAI,CAAC;MACnD,IAAIoB,MAAM,EAAEE,QAAQ,EAAEE,IAAI,IAAI,IAAI,EAAE;QAClC7B,SAAS,CAAC4B,0BAA0B,CAACL,IAAI,EAAEE,MAAM,CAACE,QAAQ,CAACE,IAAI,EAAE,EAAE,CAAC;MACtE;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACEzB,IAAA,CAACE,WAAW;IAAA,GACNG,KAAK;IACTC,GAAG,EAAEC,SAAU;IACfO,QAAQ,EAAEL,SAAU;IACpBiB,KAAK,EAAEb,IAAK;IACZc,YAAY,EAAEhC,YAAY,CAACU,KAAK,CAACuB,aAAa;EAAE,CACjD,CAAC;AAEN,CACF,CAAC;AAED,eAAezB,eAAe","ignoreList":[]}
+{"version":3,"names":["React","findNodeHandle","processColor","requireNativeComponent","UIManager","jsx","_jsx","NAME","NativeInput","CustomKeyBackground","CustomKeyState","InputCalculator","forwardRef","customKeyBackground","keyboardColor","customKeyText","onKeyPress","customKeyState","Default","onCustomKeyEvent","props","ref","nativeRef","useRef","_onChange","event","currentText","nativeEvent","text","onChange","onChangeText","defaultValue","keyBackground","textKeyColor","Primary","useImperativeHandle","focus","node","current","config","getViewManagerConfig","Commands","dispatchViewManagerCommand","blur","value","keybardColor","customKeyTextColor"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/commonjs/src/index.d.ts

@@ -1,8 +1,38 @@
 import React from 'react';
-import { type TextInputProps, type ColorValue } from 'react-native';
+import { type ColorValue, type TextInputProps } from 'react-native';
+type KeyPressEvent = {
+    nativeEvent: {
+        key: string;
+    };
+};
+export declare enum CustomKeyBackground {
+    Default = 0,
+    Primary = 1
+}
+/**
+ * export enum CustomKeyBackground {
+ *   Default = 'default',
+ *   Primary = 'primary',
+ * }
+ */
+export declare enum CustomKeyState {
+    Default = 0,
+    Disabled = 1
+}
+/**
+ * export enum CustomKeyState {
+ *   Default = 'default',
+ *   Disable = 'disable',
+ * }
+ */
 interface InputCalculatorProps extends TextInputProps {
     text?: string | undefined;
     keyboardColor?: ColorValue;
+    onKeyPress?: (e: KeyPressEvent) => void;
+    customKeyText?: string | undefined;
+    customKeyBackground?: CustomKeyBackground;
+    customKeyState?: CustomKeyState;
+    onCustomKeyEvent?: () => void;
 }
 export type InputCalculatorRef = {
     focus: () => void;

package/lib/typescript/commonjs/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EAIhB,MAAM,cAAc,CAAC;AAMtB,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGA2CpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,UAAU,EAMf,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,KAAK,aAAa,GAAG;IAAE,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAEtD,oBAAY,mBAAmB;IAC7B,OAAO,IAAI;IACX,OAAO,IAAI;CACZ;AAED;;;;;GAKG;AAEH,oBAAY,cAAc;IACxB,OAAO,IAAI;IACX,QAAQ,IAAI;CACb;AAED;;;;;GAKG;AAEH,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGAyEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/module/src/index.d.ts

@@ -1,8 +1,38 @@
 import React from 'react';
-import { type TextInputProps, type ColorValue } from 'react-native';
+import { type ColorValue, type TextInputProps } from 'react-native';
+type KeyPressEvent = {
+    nativeEvent: {
+        key: string;
+    };
+};
+export declare enum CustomKeyBackground {
+    Default = 0,
+    Primary = 1
+}
+/**
+ * export enum CustomKeyBackground {
+ *   Default = 'default',
+ *   Primary = 'primary',
+ * }
+ */
+export declare enum CustomKeyState {
+    Default = 0,
+    Disabled = 1
+}
+/**
+ * export enum CustomKeyState {
+ *   Default = 'default',
+ *   Disable = 'disable',
+ * }
+ */
 interface InputCalculatorProps extends TextInputProps {
     text?: string | undefined;
     keyboardColor?: ColorValue;
+    onKeyPress?: (e: KeyPressEvent) => void;
+    customKeyText?: string | undefined;
+    customKeyBackground?: CustomKeyBackground;
+    customKeyState?: CustomKeyState;
+    onCustomKeyEvent?: () => void;
 }
 export type InputCalculatorRef = {
     focus: () => void;

package/lib/typescript/module/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,UAAU,EAIhB,MAAM,cAAc,CAAC;AAMtB,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGA2CpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,UAAU,EAMf,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAKtB,KAAK,aAAa,GAAG;IAAE,WAAW,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAEtD,oBAAY,mBAAmB;IAC7B,OAAO,IAAI;IACX,OAAO,IAAI;CACZ;AAED;;;;;GAKG;AAEH,oBAAY,cAAc;IACxB,OAAO,IAAI;IACX,QAAQ,IAAI;CACb;AAED;;;;;GAKG;AAEH,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,eAAe,iGAyEpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-beta.13",
+    "version": "0.150.2-beta.14",
     "description": "react native calculator keyboard",
     "source": "./src/index.tsx",
     "main": "./lib/commonjs/index.js",

package/src/index.tsx

@@ -1,21 +1,52 @@
 import React from 'react';
 import {
+  type ColorValue,
+  findNodeHandle,
   type NativeSyntheticEvent,
+  processColor,
+  requireNativeComponent,
   type TextInputChangeEventData,
   type TextInputProps,
-  type ColorValue,
-  processColor,
   UIManager,
-  findNodeHandle,
 } from 'react-native';
-import { requireNativeComponent } from 'react-native';
 
 const NAME = 'RCTInputCalculator';
 const NativeInput = requireNativeComponent<any>(NAME);
 
+type KeyPressEvent = { nativeEvent: { key: string } };
+
+export enum CustomKeyBackground {
+  Default = 0,
+  Primary = 1,
+}
+
+/**
+ * export enum CustomKeyBackground {
+ *   Default = 'default',
+ *   Primary = 'primary',
+ * }
+ */
+
+export enum CustomKeyState {
+  Default = 0,
+  Disabled = 1,
+}
+
+/**
+ * export enum CustomKeyState {
+ *   Default = 'default',
+ *   Disable = 'disable',
+ * }
+ */
+
 interface InputCalculatorProps extends TextInputProps {
   text?: string | undefined;
   keyboardColor?: ColorValue;
+  onKeyPress?: (e: KeyPressEvent) => void;
+  customKeyText?: string | undefined;
+  customKeyBackground?: CustomKeyBackground;
+  customKeyState?: CustomKeyState;
+  onCustomKeyEvent?: () => void;
 }
 
 export type InputCalculatorRef = {
@@ -23,8 +54,22 @@ export type InputCalculatorRef = {
   blur: () => void;
 };
 
-const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProps>(
-  (props, ref) => {
+const InputCalculator = React.forwardRef<
+  InputCalculatorRef,
+  InputCalculatorProps
+>(
+  (
+    {
+      customKeyBackground = 'default',
+      keyboardColor = '',
+      customKeyText,
+      onKeyPress,
+      customKeyState = CustomKeyState.Default,
+      onCustomKeyEvent,
+      ...props
+    },
+    ref
+  ) => {
     const nativeRef = React.useRef<any>(null);
 
     const _onChange = (
@@ -36,7 +81,17 @@ const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProp
     };
 
     const text = props.text ?? props.defaultValue ?? '';
+    let keyBackground = '#D8D8D8';
+    let textKeyColor = '#000000';
+
+    if (customKeyBackground === CustomKeyBackground.Primary) {
+      keyBackground = '#EB2F96';
+      textKeyColor = '#FFFFFF';
+    }
 
+    /**
+     * expose methods to parent component
+     */
     React.useImperativeHandle(ref, () => ({
       focus() {
         const node = findNodeHandle(nativeRef.current);
@@ -61,8 +116,14 @@ const InputCalculator = React.forwardRef<InputCalculatorRef, InputCalculatorProp
         {...props}
         ref={nativeRef}
         onChange={_onChange}
+        onKeyPress={onKeyPress}
         value={text}
-        keybardColor={processColor(props.keyboardColor)}
+        keybardColor={processColor(keyboardColor)}
+        customKeyText={customKeyText}
+        customKeyBackground={keyBackground}
+        customKeyTextColor={textKeyColor}
+        customKeyState={customKeyState}
+        onCustomKeyEvent={onCustomKeyEvent}
       />
     );
   }