@momo-kits/calculator-keyboard 0.150.2-beta.21 → 0.150.2-beta.22

package/ios/CalculatorKeyboardView.swift

@@ -0,0 +1,153 @@
+import UIKit
+import Foundation
+
+import UIKit
+import Foundation
+
+class CalculatorKeyboardView: UIView {
+  weak var input: InputCalculator?
+  
+  private let keys: [[String]] = [
+    ["1", "2", "3", "÷", "back"],
+    ["4", "5", "6", "×", "="],
+    ["7", "8", "9", "-", "Xong"],
+    ["000", "0", "+"],
+  ]
+  private let SEPARATOR_WIDTH: CGFloat = 4
+  private let specialKeys: Set<String> = ["=", "-", "×", "÷", "back", "+"]
+  
+  var customKeyText: String? { didSet { updateCustomKeyTitle() } }
+  var customKeyBackground: String? { didSet { updateCustomKeyBackground() } }
+  var customKeyTextColor: String? { didSet { updateCustomKeyBackground() } }
+  var customKeyState: String? { didSet { updateCustomKeyBackground() } }
+  private weak var customKeyButton: UIButton?
+
+  
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setup()
+  }
+  
+  required init?(coder aDecoder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+  
+  public func setKeyboardColor(_ color: UIColor) {
+    self.setup(color)
+  }
+  
+  private func setup(_ color: UIColor = UIColor(hex: "#d8d8d8")) {
+    self.subviews.forEach { $0.removeFromSuperview() }
+    
+    backgroundColor = UIColor(hex: "#f2f2f6")
+    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()
+    contentView.translatesAutoresizingMaskIntoConstraints = false
+    addSubview(contentView)
+    
+    // Set contentView constraints
+    NSLayoutConstraint.activate([
+      contentView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: SEPARATOR_WIDTH),
+      contentView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -SEPARATOR_WIDTH),
+      contentView.topAnchor.constraint(equalTo: topAnchor, constant: SEPARATOR_WIDTH),
+      contentView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -SEPARATOR_WIDTH)
+    ])
+    
+    // Add buttons to the wrapper view
+    var yOffset: CGFloat = 0
+    for (rowIndex, row) in keys.enumerated() {
+      var xOffset: CGFloat = 0
+      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
+        let title = isCustomKey ? (customKeyText ?? key) : key
+        button.setTitle(title, for: .normal)
+        button.setTitleColor(.black, for: .normal)
+        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 isCustomKey {
+          buttonFrame.size.height = buttonHeight * 2 + SEPARATOR_WIDTH
+        }
+        if key == "000" {
+          buttonFrame.size.width = buttonWidth * 2 + SEPARATOR_WIDTH
+        }
+        
+        button.frame = buttonFrame
+        
+        if key == "back" {
+          button.setTitle("", for: .normal)
+          let image = UIImage(systemName: "delete.backward", withConfiguration: UIImage.SymbolConfiguration(weight: .bold))
+          button.setImage(image, for: .normal)
+          button.tintColor = .black
+        }
+        
+        if specialKeys.contains(key) {
+          button.setTitleColor(.black, for: .normal)
+          button.backgroundColor = color
+        }
+        
+        if isCustomKey {
+          self.customKeyButton = button
+        }
+        
+        button.addTarget(self, action: #selector(keyPressed(_:)), for: .touchUpInside)
+        contentView.addSubview(button)
+        
+        // Adjust xOffset for the next button in the row
+        xOffset += buttonFrame.width + SEPARATOR_WIDTH
+      }
+      // Adjust yOffset for the next row
+      yOffset += buttonHeight + SEPARATOR_WIDTH
+    }
+  }
+  
+  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 }
+    
+   
+    
+    btn.isEnabled = state != "disable"
+    btn.backgroundColor =  UIColor(hex: background)
+    btn.setTitleColor(UIColor(hex: textColor), 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 "back":
+      input?.onBackSpace()
+    case "=":
+      input?.calculateResult()
+    case "+", "-", "÷", "×":
+      input?.keyDidPress(" \(key) ")
+    default:
+      input?.keyDidPress(key)
+    }
+  }
+}

package/ios/InputCalculator-Bridging-Header.h

@@ -0,0 +1,23 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+#import <React/RCTBaseTextInputViewManager.h>
+#import <React/RCTSinglelineTextInputView.h>
+#import <React/RCTUITextField.h>
+#import <React/RCTBaseTextInputViewManager.h>
+
+#import <React/RCTBridge.h>
+#import <React/RCTConvert.h>
+#import <React/RCTFont.h>
+#import <React/RCTShadowView+Layout.h>
+#import <React/RCTShadowView.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTUIManagerObserverCoordinator.h>
+#import <React/RCTUIManagerUtils.h>
+
+#import <React/RCTBaseTextInputShadowView.h>
+#import <React/RCTBaseTextInputView.h>
+#import <React/RCTConvert+Text.h>
+
+@interface Calculator : NSObject <RCTBridgeModule>
+
+@end

package/ios/InputCalculator.m

@@ -0,0 +1,85 @@
+#import <InputCalculator-Bridging-Header.h>
+
+@implementation Calculator
+
+- (dispatch_queue_t)methodQueue
+{
+  return dispatch_get_main_queue();
+}
+
+RCT_EXPORT_MODULE()
+
+@end
+
+@interface RCT_EXTERN_MODULE(RCTInputCalculator, RCTViewManager)
+
+RCT_REMAP_VIEW_PROPERTY(autoCapitalize, backedTextInputView.autocapitalizationType, UITextAutocapitalizationType)
+RCT_REMAP_VIEW_PROPERTY(autoCorrect, backedTextInputView.autocorrectionType, UITextAutocorrectionType)
+RCT_REMAP_VIEW_PROPERTY(contextMenuHidden, backedTextInputView.contextMenuHidden, BOOL)
+RCT_REMAP_VIEW_PROPERTY(editable, backedTextInputView.editable, BOOL)
+RCT_REMAP_VIEW_PROPERTY(enablesReturnKeyAutomatically, backedTextInputView.enablesReturnKeyAutomatically, BOOL)
+RCT_REMAP_VIEW_PROPERTY(keyboardAppearance, backedTextInputView.keyboardAppearance, UIKeyboardAppearance)
+RCT_REMAP_VIEW_PROPERTY(placeholder, backedTextInputView.placeholder, NSString)
+RCT_REMAP_VIEW_PROPERTY(placeholderTextColor, backedTextInputView.placeholderColor, UIColor)
+RCT_REMAP_VIEW_PROPERTY(returnKeyType, backedTextInputView.returnKeyType, UIReturnKeyType)
+RCT_REMAP_VIEW_PROPERTY(selectionColor, backedTextInputView.tintColor, UIColor)
+RCT_REMAP_VIEW_PROPERTY(spellCheck, backedTextInputView.spellCheckingType, UITextSpellCheckingType)
+RCT_REMAP_VIEW_PROPERTY(caretHidden, backedTextInputView.caretHidden, BOOL)
+RCT_REMAP_VIEW_PROPERTY(clearButtonMode, backedTextInputView.clearButtonMode, UITextFieldViewMode)
+RCT_REMAP_VIEW_PROPERTY(scrollEnabled, backedTextInputView.scrollEnabled, BOOL)
+RCT_REMAP_VIEW_PROPERTY(secureTextEntry, backedTextInputView.secureTextEntry, BOOL)
+RCT_REMAP_VIEW_PROPERTY(smartInsertDelete, backedTextInputView.smartInsertDeleteType, UITextSmartInsertDeleteType)
+
+RCT_EXPORT_VIEW_PROPERTY(autoFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(submitBehavior, NSString)
+RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(keyboardType, UIKeyboardType)
+RCT_EXPORT_VIEW_PROPERTY(showSoftInputOnFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(maxLength, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(selection, RCTTextSelection)
+RCT_EXPORT_VIEW_PROPERTY(inputAccessoryViewID, NSString)
+RCT_EXPORT_VIEW_PROPERTY(textContentType, NSString)
+RCT_EXPORT_VIEW_PROPERTY(passwordRules, NSString)
+
+RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyPressSync, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onChangeSync, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSelectionChange, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
+
+RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
+
+RCT_EXPORT_SHADOW_PROPERTY(text, NSString)
+RCT_EXPORT_SHADOW_PROPERTY(placeholder, NSString)
+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)
+{
+  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    UIView *view = viewRegistry[viewTag];
+    [view reactFocus];
+  }];
+}
+
+RCT_EXPORT_METHOD(blur : (nonnull NSNumber *)viewTag)
+{
+  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    UIView *view = viewRegistry[viewTag];
+    [view reactBlur];
+  }];
+}
+
+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, NSString)
+
+@end
+

package/ios/InputCalculator.swift

@@ -0,0 +1,158 @@
+import Foundation
+import UIKit
+
+@objc(RCTInputCalculator)
+class RCTInputCalculator: RCTBaseTextInputViewManager {
+  override func view() -> UIView! {
+    return InputCalculator(bridge: bridge)
+  }
+
+  override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+
+}
+
+class InputCalculator: RCTSinglelineTextInputView {
+  var bridge: RCTBridge?
+  var keyboardView: CalculatorKeyboardView?
+
+  @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: String? {
+    didSet { keyboardView?.customKeyState = customKeyState }
+  }
+
+  @objc func beginEditingInput(_ note: Notification) { onFocus?([:]) }
+  @objc func endEditingInput(_ note: Notification)   { onBlur?([:])  }
+
+  @objc var value: String = "" {
+    didSet {
+        guard let tf = backedTextInputView as? UITextField else { return }
+        let old = tf.text ?? ""
+        if old == value { return }
+
+        let isFirstResponder = tf.isFirstResponder
+        let atEnd = isFirstResponder && tf.offset(from: tf.beginningOfDocument, to: tf.selectedTextRange?.start ?? tf.endOfDocument) == old.count
+        tf.text = value
+        if !isFirstResponder || atEnd,
+           let end = tf.position(from: tf.beginningOfDocument, offset: value.count) {
+            tf.selectedTextRange = tf.textRange(from: end, to: end)
+        }
+    }
+  }
+
+  @objc var keyboardColor: UIColor = UIColor(hex: "#d9d9d9") {
+    didSet {
+      self.keyboardView?.setKeyboardColor(keyboardColor)
+    }
+  }
+
+
+  override init(bridge: RCTBridge) {
+    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: 240 + getbottomInset())
+    self.keyboardView!.input = self
+
+    backedTextInputView.inputView = self.keyboardView
+    backedTextInputView.inputView?.reloadInputViews()
+
+    NotificationCenter.default.addObserver(
+        self,
+        selector: #selector(beginEditingInput(_:)),
+        name: UITextField.textDidBeginEditingNotification,
+        object: backedTextInputView
+    )
+    NotificationCenter.default.addObserver(
+        self,
+        selector: #selector(endEditingInput(_:)),
+        name: UITextField.textDidEndEditingNotification,
+        object: backedTextInputView
+    )
+
+  }
+    func getbottomInset() -> CGFloat {
+      let window = UIApplication.shared.windows.first?.rootViewController?.view
+      let bottom = (window?.safeAreaInsets.bottom ?? 0) > 0 ? 21 : 0
+      return CGFloat(bottom)
+    }
+
+  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 onBackSpace() {
+    value = value.dropLast().description
+    DispatchQueue.main.async {
+      if let range = self.backedTextInputView.selectedTextRange,
+         let fromRange = self.backedTextInputView.position(from: range.start, offset: -1),
+         let newRange = self.backedTextInputView.textRange(from: fromRange, to: range.start)
+      {
+        self.backedTextInputView.replace(newRange, withText: "")
+      }
+    }
+    
+    if let bridge = bridge {
+      bridge.eventDispatcher().sendTextEvent(with: .change, reactTag: reactTag, text: value, key: "back", eventCount: 1)
+    }
+  }
+
+  func calculateResult() {
+    guard let textField = backedTextInputView as? UITextField,
+          let text = textField.text?.replacingOccurrences(of: "×", with: "*").replacingOccurrences(of: "÷", with: "/")
+    else {
+      return
+    }
+
+    let pattern = "^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$"
+    let regex = try? NSRegularExpression(pattern: pattern)
+    let range = NSRange(location: 0, length: text.utf16.count)
+
+    if regex?.firstMatch(in: text, options: [], range: range) != nil {
+      let expression = NSExpression(format: text)
+      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)
+        }
+      }
+    }
+    else {
+      print("Invalid expression")
+    }
+  }
+  
+  func emitCustomKey() {
+    onCustomKeyEvent?([:])
+  }
+  
+  func emitKeyPress(_ key: String) {
+    onKeyPress?(["key": key])
+  }
+
+}
+

package/ios/extension.swift

@@ -0,0 +1,23 @@
+
+import Foundation
+import UIKit
+
+extension UIColor {
+    convenience init(hex: String) {
+        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
+        var int = UInt64()
+        Scanner(string: hex).scanHexInt64(&int)
+        let a, r, g, b: UInt64
+        switch hex.count {
+        case 3: // RGB (12-bit)
+            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
+        case 6: // RGB (24-bit)
+            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
+        case 8: // ARGB (32-bit)
+            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
+        default:
+            (a, r, g, b) = (255, 0, 0, 0)
+        }
+        self.init(red: CGFloat(r) / 255, green: CGFloat(g) / 255, blue: CGFloat(b) / 255, alpha: CGFloat(a) / 255)
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-beta.21",
+    "version": "0.150.2-beta.22",
     "description": "react native calculator keyboard",
     "main": "./src/index.tsx",
     "files": [
@@ -48,30 +48,19 @@
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"
     },
-    "codegenConfig": {
-        "name": "CalculatorKeyboardSpecs",
-        "type": "components",
-        "jsSrcsDir": "src",
-        "android": {
-            "javaPackageName": "com.calculatorkeyboard"
-        },
-        "ios": {
-            "componentProvider": {
-                "NativeInputCalculator": "NativeInputCalculator"
-            }
-        }
-    },
     "devDependencies": {
-        "react": "*",
-        "react-native": "*"
+        "prettier": "^3.0.3",
+        "react": "19.0.0",
+        "react-native": "0.80.1",
+        "react-native-builder-bob": "^0.40.12",
+        "release-it": "^17.10.0",
+        "turbo": "^1.10.7",
+        "typescript": "^5.8.3"
     },
     "peerDependencies": {
         "react": "*",
         "react-native": "*",
         "@momo-kits/foundation": "latest"
     },
-    "engines": {
-        "node": ">=18.0.0"
-    },
     "dependencies": {}
 }

package/react-native-calculator-keyboard.podspec

@@ -5,7 +5,7 @@ folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1
 
 Pod::Spec.new do |s|
   s.name         = "react-native-calculator-keyboard"
-  s.version      = package["version"]
+  s.version      = "0.0.1"
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
   s.license      = package["license"]
@@ -14,10 +14,9 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
-  # s.public_header_files = "ios/CalculatorKeyboardView.h"
-  # s.private_header_files = "ios/NativeInputCalculator.h"
-  
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.resources = "**/Assets/**/*.{json}"
+
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
   if respond_to?(:install_modules_dependencies, true)

package/src/index.tsx

@@ -1,31 +1,28 @@
-import * as React from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { ApplicationContext, Colors } from '@momo-kits/foundation';
 import {
+  type ColorValue,
+  findNodeHandle,
   type NativeSyntheticEvent,
+  processColor,
+  requireNativeComponent,
   type TextInputProps,
-  StyleSheet,
-  StyleProp,
-  TextStyle,
+  UIManager,
 } from 'react-native';
-import NativeInputCalculator, {
-  TextAttributes,
-} from './InputCalculatorNativeComponent';
-import { Commands } from './InputCalculatorNativeComponent';
 
-const NativeInput = NativeInputCalculator;
+const NAME = 'RCTInputCalculator';
+const NativeInput = requireNativeComponent<any>(NAME);
 
 type KeyPressEvent = { nativeEvent: { key: string } };
 
 interface InputCalculatorProps extends TextInputProps {
   text?: string | undefined;
-  mode?: Mode;
+  keyboardColor?: ColorValue;
   onKeyPress?: (e: KeyPressEvent) => void;
   customKeyText?: string | undefined;
   customKeyBackground?: CustomKeyBackground;
   customKeyState?: CustomKeyState;
   onCustomKeyEvent?: () => void;
-  style?: StyleProp<TextStyle>;
 }
 
 export type CustomKeyBackground = 'primary' | 'default' | string;
@@ -35,36 +32,11 @@ export enum CustomKeyState {
   Disable = 'disable',
 }
 
-export enum Mode {
-  NumDefault = 'NumDefault',
-  NumWithCTA = 'NumWithCTA',
-}
-
 export type InputCalculatorRef = {
   focus: () => void;
   blur: () => void;
 };
 
-const omitUndefined = <T extends object>(obj: T): T =>
-  Object.fromEntries(
-    Object.entries(obj).filter(([, v]) => v !== undefined),
-  ) as T;
-
-function isEmpty(obj: object | undefined | null) {
-  return !obj || Object.keys(obj).length === 0;
-}
-
-export function styleToTextAttributes(
-  style?: StyleProp<TextStyle>,
-): Readonly<TextAttributes> {
-  const s = StyleSheet.flatten(style) ?? {};
-  const attrs: TextAttributes = {
-    fontSize: s.fontSize ?? undefined,
-    fontWeight: (s.fontWeight as TextAttributes['fontWeight']) ?? undefined,
-  };
-  return Object.freeze(omitUndefined(attrs));
-}
-
 const InputCalculator = React.forwardRef<
   InputCalculatorRef,
   InputCalculatorProps
@@ -72,12 +44,11 @@ const InputCalculator = React.forwardRef<
   (
     {
       customKeyBackground = 'default',
-      mode = Mode.NumDefault,
+      keyboardColor = '',
       customKeyText,
       onKeyPress,
       customKeyState = CustomKeyState.Default,
       onCustomKeyEvent,
-      style,
       ...props
     },
     ref,
@@ -95,42 +66,43 @@ const InputCalculator = React.forwardRef<
     let keyBackground = Colors.black_06;
     let textKeyColor = Colors.black_20;
 
-    if (mode === Mode.NumWithCTA) {
-      if (customKeyBackground === 'primary') {
-        keyBackground = theme.colors.primary;
-        textKeyColor = Colors.black_01;
-      }
+    if (customKeyBackground === 'primary') {
+      keyBackground = theme.colors.primary;
+      textKeyColor = Colors.black_01;
+    }
 
-      if (customKeyState === CustomKeyState.Disable) {
-        keyBackground = theme.colors.background.disable;
-        textKeyColor = Colors.black_01;
-      }
+    if (customKeyState === CustomKeyState.Disable) {
+      keyBackground = theme.colors.background.disable;
+      textKeyColor = Colors.black_01;
     }
 
     React.useImperativeHandle(ref, () => ({
       focus() {
-        if (nativeRef.current) Commands.focus(nativeRef.current);
+        const node = findNodeHandle(nativeRef.current);
+        if (!node) return;
+        const config = UIManager.getViewManagerConfig(NAME);
+        if (config?.Commands?.focus != null) {
+          UIManager.dispatchViewManagerCommand(node, config.Commands.focus, []);
+        }
       },
       blur() {
-        if (nativeRef.current) Commands.blur(nativeRef.current);
+        const node = findNodeHandle(nativeRef.current);
+        if (!node) return;
+        const config = UIManager.getViewManagerConfig(NAME);
+        if (config?.Commands?.blur != null) {
+          UIManager.dispatchViewManagerCommand(node, config.Commands.blur, []);
+        }
       },
     }));
 
-    const derivedTA = React.useMemo(
-      () => styleToTextAttributes(style),
-      [style],
-    );
-
     return (
       <NativeInput
         {...props}
-        style={style}
-        textAttributes={isEmpty(derivedTA) ? undefined : derivedTA}
         ref={nativeRef}
         onChange={_onChange}
         onKeyPress={onKeyPress}
         value={text}
-        mode={mode}
+        keybardColor={processColor(keyboardColor)}
         customKeyText={customKeyText}
         customKeyBackground={keyBackground}
         customKeyTextColor={textKeyColor}