@momo-kits/calculator-keyboard 0.150.2-beta.20 → 0.150.2-beta.20-sp.2

package/README.md

@@ -10,15 +10,57 @@ npm install react-native-calculator-keyboard
 
 ## Usage
 
-
 ```js
-import { CalculatorKeyboardView } from "react-native-calculator-keyboard";
+import InputCalculator from '@momo-kits/calculator-keyboard';
 
 // ...
 
-<CalculatorKeyboardView color="tomato" />
+<InputCalculator
+  mode="NumDefault"
+  customKeyText="Next"
+  onCustomKeyEvent={() => console.log('Custom key pressed')}
+/>;
+```
+
+## Requirements
+
+**React Native 0.80+** with **Fabric (New Architecture) enabled**.
+
+This library is **pure Fabric** implementation with:
+
+- ✅ Zero RCTBridge dependencies
+- ✅ Native C++ ComponentView on iOS
+- ✅ Fabric ViewManager with codegen delegates on Android
+- ✅ All Props, Events, Commands auto-generated by codegen
+- ❌ No Paper (old architecture) support
+
+### Android Setup
+
+Add to your `gradle.properties`:
+
+```properties
+newArchEnabled=true
+```
+
+Then rebuild:
+
+```bash
+cd android && ./gradlew clean && cd ..
+npx react-native run-android
+```
+
+### iOS Setup
+
+**Required**: Set the environment variable before installing pods:
+
+```bash
+cd ios
+RCT_NEW_ARCH_ENABLED=1 pod install
+cd ..
+npx react-native run-ios
 ```
 
+**Note**: This library uses Fabric ComponentView (`.mm` files) and will not work without `RCT_NEW_ARCH_ENABLED=1`.
 
 ## Contributing
 

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

@@ -12,6 +12,6 @@ class CalculatorKeyboardPackage : ReactPackage {
   }
 
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return listOf(RCTInputCalculator())
+    return listOf(InputCalculatorManager())
   }
 }

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

@@ -7,7 +7,6 @@ import android.graphics.drawable.GradientDrawable
 import android.view.Gravity
 import android.widget.Button
 import android.widget.ImageButton
-import androidx.appcompat.app.AppCompatActivity
 import androidx.constraintlayout.widget.ConstraintLayout
 import com.facebook.react.uimanager.ThemedReactContext
 import org.mariuszgromada.math.mxparser.Expression
@@ -21,53 +20,57 @@ class CustomKeyboardView(
   context: ThemedReactContext,
   private val editText: CalculatorEditText
 ) : ConstraintLayout(context) {
-  private val keys = listOf(
+  private val numWithCTAKeys = listOf(
     listOf("1", "2", "3", "÷", "back"),
     listOf("4", "5", "6", "×", "="),
-    listOf("7", "8", "9", "-", "Xong"),
+    listOf("7", "8", "9", "-", "Tiếp"),
     listOf("000", "0", "+")
   )
-  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+")
+  private val defaultKeys = listOf(
+    listOf("1", "2", "3", "÷", "AC"),
+    listOf("4", "5", "6", "×", "back"),
+    listOf("7", "8", "9", "-", "="),
+    listOf("000", "0", "+")
+  )
+  private val specialKeys = listOf("=", "-", "×", "÷", "back", "+", "AC")
   private val separatorWidth = 8f
   private var specialButtonColor: Int = "#D8D8D8".toColorInt()
 
+  private var keyboardMode: String = "NumDefault"
+
   private var customKeyButton: Button? = null
   private var customKeyButtonBackground: Int = "#D8D8D8".toColorInt()
   private var customKeyButtonTextColor: Int = Color.BLACK
   private var customKeyButtonState: String = "default"
 
   init {
-    val activity = context.currentActivity as? AppCompatActivity
-    if (activity != null) {
-      val displayMetrics = resources.displayMetrics
-      val widthButton = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
-      val heightButton = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
-
       isClickable = false
       isFocusable = false
       isFocusableInTouchMode = false
       clipToPadding = false
       clipChildren = false
-
-      renderUI(widthButton, heightButton)
-    }
-
   }
 
-  private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
+  private fun renderUI() {
+    val displayMetrics = resources.displayMetrics
+    val buttonWidth = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
+    val buttonHeight = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
+
     var yOffset = separatorWidth
+    val keys = if (keyboardMode == "NumWithCTA") numWithCTAKeys else defaultKeys
     for ((rowIndex, row) in keys.withIndex()) {
       var xOffset = separatorWidth
       for ((colIndex, key) in row.withIndex()) {
-        val isCustomKey = rowIndex == 2 && colIndex == 4
+        val isMainKey = rowIndex == 2 && colIndex == 4
+        val isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (isCustomKey) buttonHeight * 2 + separatorWidth else buttonHeight
+        val height = if (isMainKey) 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(), isCustomKey).also { b ->
-            if (isCustomKey) customKeyButton = b
+          createButton(key, xOffset, yOffset, width.toInt(), height.toInt(), isMainKey, isMainCTAKey).also { b ->
+            if (isMainCTAKey) customKeyButton = b
           }
         }
 
@@ -85,7 +88,8 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
-    isCustomKey: Boolean
+    isMainKey: Boolean,
+    isMainCTAKey: Boolean
   ): Button {
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
@@ -98,7 +102,7 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = (if (isCustomKey) 18 else 24).toFloat()
+      textSize = (if (isMainCTAKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
       maxLines = 1
@@ -110,7 +114,7 @@ class CustomKeyboardView(
         constrainedWidth = false
       }
 
-      if (specialKeys.contains(key)) {
+      if (specialKeys.contains(key) || isMainKey) {
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
@@ -125,7 +129,7 @@ class CustomKeyboardView(
 
       translationX = xOffset.toInt().toFloat()
       translationY = yOffset.toInt().toFloat()
-      setOnClickListener { onKeyPress(key, isCustomKey) }
+      setOnClickListener { onKeyPress(key, isMainCTAKey) }
     }
   }
 
@@ -195,14 +199,15 @@ class CustomKeyboardView(
     }
   }
 
-  private fun onKeyPress(key: String, isCustomKey: Boolean) {
-    if (isCustomKey) {
+  private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
+    if (isMainCTAKey) {
       emitCustomKey()
       return
     }
 
     emitKeyPress(key)
     when (key) {
+      "AC" -> clearText()
       "back" -> onBackSpace()
       "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
@@ -215,6 +220,10 @@ 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
@@ -270,25 +279,29 @@ class CustomKeyboardView(
     customKeyButton?.text = text
   }
 
+  fun setMode(mode: String) {
+    keyboardMode = mode
+    renderUI()
+  }
+
   fun setCustomKeyBackground(background: Int) {
     customKeyButtonBackground = background
-    updateCustomKeyUI(background, customKeyButtonTextColor, customKeyButtonState)
+    updateCustomKeyUI(background, customKeyButtonTextColor)
   }
 
   fun setCustomKeyTextColor(textColor: Int) {
     customKeyButtonTextColor = textColor
-    updateCustomKeyUI(customKeyButtonBackground, textColor, customKeyButtonState)
+    updateCustomKeyUI(customKeyButtonBackground, textColor)
   }
 
 
   fun setCustomKeyState(state: String) {
     customKeyButtonState = state
     customKeyButton?.isEnabled = state != "disable"
-    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor, state)
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor)
   }
 
-  private fun updateCustomKeyUI(background: Int, textColor: Int, state: String){
-
+  private fun updateCustomKeyUI(background: Int, textColor: Int){
     customKeyButton?.background = GradientDrawable().apply {
       shape = GradientDrawable.RECTANGLE
       cornerRadius = 24f
@@ -297,5 +310,4 @@ class CustomKeyboardView(
     customKeyButton?.setTextColor(textColor)
   }
 
-
 }

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

@@ -8,15 +8,20 @@ import android.view.inputmethod.InputMethodManager
 import androidx.core.graphics.toColorInt
 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 com.facebook.react.viewmanagers.NativeInputCalculatorManagerDelegate
+import com.facebook.react.viewmanagers.NativeInputCalculatorManagerInterface
+import com.facebook.react.uimanager.ViewManagerDelegate
+import androidx.annotation.Nullable
 
-class RCTInputCalculator : ReactTextInputManager() {
+// Fabric-only manager with codegen name `NativeInputCalculator`
+class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorManagerInterface<ReactEditText> {
+
+  private val mDelegate: ViewManagerDelegate<ReactEditText> = NativeInputCalculatorManagerDelegate(this)
 
   private var keyboardView: CustomKeyboardView? = null
   private lateinit var editText: CalculatorEditText
@@ -30,12 +35,11 @@ class RCTInputCalculator : ReactTextInputManager() {
   override fun getName() = REACT_CLASS
 
   companion object {
-    const val REACT_CLASS = "RCTInputCalculator"
+    const val REACT_CLASS = "NativeInputCalculator"
     val calculatorHeight: Int = 240.dpToPx().toInt()
   }
 
-  @ReactProp(name = "value")
-  fun setValue(view: ReactEditText, value: String?) {
+  override fun setValue(view: ReactEditText, @Nullable value: String?) {
     UiThreadUtil.runOnUiThread {
       val e = view.editableText ?: run { view.setText(value ?: ""); return@runOnUiThread }
       val newText = value ?: ""
@@ -48,29 +52,28 @@ class RCTInputCalculator : ReactTextInputManager() {
     }
   }
 
-  @ReactProp(name = "customKeyText")
-  fun setCustomKeyText(view: ReactEditText, text: String?) {
-    keyboardView?.setCustomKeyText(text ?: "Xong")
+  override fun setMode(view: ReactEditText, @Nullable mode: String?) {
+    keyboardView?.setMode(mode ?: "NumDefault")
+  }
+
+  override fun setCustomKeyText(view: ReactEditText, @Nullable text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Tiếp")
   }
 
-  @ReactProp(name = "customKeyBackground")
-  fun setCustomKeyBackground(view: ReactEditText, background: String?) {
+  override fun setCustomKeyBackground(view: ReactEditText, @Nullable background: String?) {
     keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
   }
 
-  @ReactProp(name = "customKeyTextColor")
-  fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
+  override fun setCustomKeyTextColor(view: ReactEditText, @Nullable textColor: String?) {
     keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
   }
 
-  @ReactProp(name = "customKeyState")
-  fun setCustomKeyState(view: ReactEditText, state: String?) {
+  override fun setCustomKeyState(view: ReactEditText, @Nullable state: String?) {
     keyboardView?.setCustomKeyState(state ?: "default")
   }
 
-  @ReactProp(name = "keyboardColor")
-  fun setKeyboardColor(view: ReactEditText, color: String) {
-    keyboardView?.updateButtonColors(color.toColorInt())
+  override fun setKeyboardColor(view: ReactEditText, @Nullable color: Int?) {
+    color?.let { keyboardView?.updateButtonColors(it) }
   }
 
   @SuppressLint("ClickableViewAccessibility")
@@ -165,26 +168,17 @@ class RCTInputCalculator : ReactTextInputManager() {
     v.showSoftInputOnFocus = true
   }
 
-  override fun getCommandsMap(): Map<String, Int> = mapOf("blur" to 1, "focus" to 2)
+  override fun getDelegate(): ViewManagerDelegate<ReactEditText> = mDelegate
 
-  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
-    when (commandId) {
-      1 -> blur()
-      2 -> focus()
-    }
+  override fun focus(view: ReactEditText) {
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
   }
 
-  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
-    val base = super.getExportedCustomBubblingEventTypeConstants().toMutableMap()
-    base["onKeyPress"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onKeyPress"))
-    return base
+  override fun blur(view: ReactEditText) {
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 
-  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
-    val base = super.getExportedCustomDirectEventTypeConstants().toMutableMap()
-    base["onCustomKeyEvent"] = mapOf("registrationName" to "onCustomKeyEvent")
-    return base
-  }
+  // Events are emitted from CustomKeyboardView using RCTEventEmitter.
 
   private fun focus() {
     UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
@@ -194,4 +188,3 @@ class RCTInputCalculator : ReactTextInputManager() {
     UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 }
-

package/ios/CalculatorKeyboardView.h

@@ -0,0 +1,30 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@protocol CalculatorKeyboardInput <NSObject>
+
+- (void)keyDidPress:(NSString *)key;
+- (void)clearText;
+- (void)onBackSpace;
+- (void)calculateResult;
+- (void)emitCustomKey;
+- (void)emitKeyPress:(NSString *)key;
+
+@end
+
+@interface CalculatorKeyboardView : UIView
+
+@property (nonatomic, weak, nullable) id<CalculatorKeyboardInput> input;
+@property (nonatomic, strong, nullable) NSString *keyboardMode;
+@property (nonatomic, strong, nullable) NSString *customKeyText;
+@property (nonatomic, strong, nullable) NSString *customKeyBackground;
+@property (nonatomic, strong, nullable) NSString *customKeyTextColor;
+@property (nonatomic, strong, nullable) NSString *customKeyState;
+
+- (void)setKeyboardColor:(UIColor *)color;
+
+@end
+
+NS_ASSUME_NONNULL_END
+

package/ios/CalculatorKeyboardView.mm

@@ -0,0 +1,231 @@
+#import "CalculatorKeyboardView.h"
+
+@interface CalculatorKeyboardView ()
+@property (nonatomic, strong) NSArray<NSArray<NSString *> *> *numWithCTAKeys;
+@property (nonatomic, strong) NSArray<NSArray<NSString *> *> *defaultKeys;
+@property (nonatomic, strong) NSSet<NSString *> *specialKeys;
+@property (nonatomic, weak) UIButton *customKeyButton;
+@end
+
+@implementation CalculatorKeyboardView {
+  CGFloat _separatorWidth;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    _separatorWidth = 4.0;
+    
+    _numWithCTAKeys = @[
+      @[@"1", @"2", @"3", @"÷", @"back"],
+      @[@"4", @"5", @"6", @"×", @"="],
+      @[@"7", @"8", @"9", @"-", @"Tiếp"],
+      @[@"000", @"0", @"+"]
+    ];
+    
+    _defaultKeys = @[
+      @[@"1", @"2", @"3", @"÷", @"AC"],
+      @[@"4", @"5", @"6", @"×", @"back"],
+      @[@"7", @"8", @"9", @"-", @"="],
+      @[@"000", @"0", @"+"]
+    ];
+    
+    _specialKeys = [NSSet setWithArray:@[@"=", @"-", @"×", @"÷", @"back", @"+", @"AC"]];
+    
+    [self setup];
+  }
+  return self;
+}
+
+- (void)setKeyboardMode:(NSString *)keyboardMode
+{
+  if ([_keyboardMode isEqualToString:keyboardMode]) {
+    return;
+  }
+  _keyboardMode = keyboardMode;
+  [self setup];
+}
+
+- (void)setCustomKeyText:(NSString *)customKeyText
+{
+  _customKeyText = customKeyText;
+  [self updateCustomKeyTitle];
+}
+
+- (void)setCustomKeyBackground:(NSString *)customKeyBackground
+{
+  _customKeyBackground = customKeyBackground;
+  [self updateCustomKeyBackground];
+}
+
+- (void)setCustomKeyTextColor:(NSString *)customKeyTextColor
+{
+  _customKeyTextColor = customKeyTextColor;
+  [self updateCustomKeyBackground];
+}
+
+- (void)setCustomKeyState:(NSString *)customKeyState
+{
+  _customKeyState = customKeyState;
+  [self updateCustomKeyBackground];
+}
+
+- (void)setKeyboardColor:(UIColor *)color
+{
+  [self setup];
+}
+
+- (void)setup
+{
+  // Remove all subviews
+  for (UIView *subview in self.subviews) {
+    [subview removeFromSuperview];
+  }
+  
+  self.backgroundColor = [self colorFromHex:@"#f2f2f6"];
+  
+  CGFloat buttonWidth = (UIScreen.mainScreen.bounds.size.width - _separatorWidth * 2 - 4 * _separatorWidth) / 5;
+  CGFloat buttonHeight = (240 - _separatorWidth * 2 - 3 * _separatorWidth) / 4;
+  
+  // Create content view
+  UIView *contentView = [[UIView alloc] init];
+  contentView.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:contentView];
+  
+  // Set contentView constraints
+  [NSLayoutConstraint activateConstraints:@[
+    [contentView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:_separatorWidth],
+    [contentView.trailingAnchor constraintEqualToAnchor:self.trailingAnchor constant:-_separatorWidth],
+    [contentView.topAnchor constraintEqualToAnchor:self.topAnchor constant:_separatorWidth],
+    [contentView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-_separatorWidth]
+  ]];
+  
+  CGFloat yOffset = 0;
+  NSArray<NSArray<NSString *> *> *keys = [_keyboardMode isEqualToString:@"NumDefault"] ? _defaultKeys : _numWithCTAKeys;
+  
+  for (NSInteger rowIndex = 0; rowIndex < keys.count; rowIndex++) {
+    NSArray<NSString *> *row = keys[rowIndex];
+    CGFloat xOffset = 0;
+    
+    for (NSInteger colIndex = 0; colIndex < row.count; colIndex++) {
+      NSString *key = row[colIndex];
+      BOOL isMainKey = (colIndex == 4 && rowIndex == 2);
+      BOOL isMainCTAKey = isMainKey && [_keyboardMode isEqualToString:@"NumWithCTA"];
+      
+      UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
+      button.backgroundColor = UIColor.whiteColor;
+      button.layer.cornerRadius = 8;
+      
+      NSString *title = isMainCTAKey ? (_customKeyText ?: key) : key;
+      [button setTitle:title forState:UIControlStateNormal];
+      [button setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
+      button.titleLabel.font = [UIFont systemFontOfSize:isMainCTAKey ? 18 : 24 weight:UIFontWeightMedium];
+      button.accessibilityIdentifier = key;
+      button.tag = isMainCTAKey ? 1 : 0;
+      
+      CGRect buttonFrame = CGRectMake(xOffset, yOffset, buttonWidth, buttonHeight);
+      if (isMainKey) {
+        buttonFrame.size.height = buttonHeight * 2 + _separatorWidth;
+      }
+      if ([key isEqualToString:@"000"]) {
+        buttonFrame.size.width = buttonWidth * 2 + _separatorWidth;
+      }
+      
+      button.frame = buttonFrame;
+      
+      if ([key isEqualToString:@"back"]) {
+        [button setTitle:@"" forState:UIControlStateNormal];
+        UIImageSymbolConfiguration *config = [UIImageSymbolConfiguration configurationWithWeight:UIImageSymbolWeightBold];
+        UIImage *image = [UIImage systemImageNamed:@"delete.backward" withConfiguration:config];
+        [button setImage:image forState:UIControlStateNormal];
+        button.tintColor = UIColor.blackColor;
+      }
+      
+      if ([_specialKeys containsObject:key] || isMainKey) {
+        [button setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
+        button.backgroundColor = [self colorFromHex:@"#d8d8d8"];
+      }
+      
+      if (isMainKey) {
+        self.customKeyButton = button;
+      }
+      
+      [button addTarget:self action:@selector(keyPressed:) forControlEvents:UIControlEventTouchUpInside];
+      [contentView addSubview:button];
+      
+      xOffset += buttonFrame.size.width + _separatorWidth;
+    }
+    
+    yOffset += buttonHeight + _separatorWidth;
+  }
+}
+
+- (void)updateCustomKeyTitle
+{
+  if (!self.customKeyButton || !_customKeyText) {
+    return;
+  }
+  [self.customKeyButton setTitle:_customKeyText forState:UIControlStateNormal];
+  [self.customKeyButton setImage:nil forState:UIControlStateNormal];
+}
+
+- (void)updateCustomKeyBackground
+{
+  if (!self.customKeyButton || !_keyboardMode || !_customKeyBackground || !_customKeyTextColor || !_customKeyState) {
+    return;
+  }
+  
+  if ([_keyboardMode isEqualToString:@"numWithCTA"]) {
+    self.customKeyButton.enabled = ![_customKeyState isEqualToString:@"disable"];
+  } else {
+    self.customKeyButton.enabled = YES;
+  }
+  
+  self.customKeyButton.backgroundColor = [self colorFromHex:_customKeyBackground];
+  [self.customKeyButton setTitleColor:[self colorFromHex:_customKeyTextColor] forState:UIControlStateNormal];
+}
+
+- (void)keyPressed:(UIButton *)sender
+{
+  NSString *key = sender.accessibilityIdentifier;
+  if (!key) {
+    return;
+  }
+  
+  BOOL isCustomKeyCTA = (sender.tag == 1);
+  if (isCustomKeyCTA) {
+    [self.input emitCustomKey];
+    return;
+  }
+  
+  [self.input emitKeyPress:key];
+  
+  if ([key isEqualToString:@"AC"]) {
+    [self.input clearText];
+  } else if ([key isEqualToString:@"back"]) {
+    [self.input onBackSpace];
+  } else if ([key isEqualToString:@"="]) {
+    [self.input calculateResult];
+  } else if ([key isEqualToString:@"+"] || [key isEqualToString:@"-"] || 
+             [key isEqualToString:@"÷"] || [key isEqualToString:@"×"]) {
+    [self.input keyDidPress:[NSString stringWithFormat:@" %@ ", key]];
+  } else {
+    [self.input keyDidPress:key];
+  }
+}
+
+- (UIColor *)colorFromHex:(NSString *)hexString
+{
+  unsigned rgbValue = 0;
+  NSString *cleanHex = [hexString stringByReplacingOccurrencesOfString:@"#" withString:@""];
+  NSScanner *scanner = [NSScanner scannerWithString:cleanHex];
+  [scanner scanHexInt:&rgbValue];
+  
+  return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16) / 255.0
+                         green:((rgbValue & 0x00FF00) >> 8) / 255.0
+                          blue:(rgbValue & 0x0000FF) / 255.0
+                         alpha:1.0];
+}
+
+@end
+

package/ios/NativeInputCalculator.h

@@ -0,0 +1,11 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeInputCalculator : RCTViewComponentView
+
+@end
+
+NS_ASSUME_NONNULL_END
+