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

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(InputCalculatorManager())
+    return listOf(InputCalculatorViewManager())
   }
 }

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

@@ -1,6 +1,7 @@
 package com.calculatorkeyboard
 
 import android.annotation.SuppressLint
+import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.drawable.GradientDrawable
@@ -11,8 +12,10 @@ import androidx.constraintlayout.widget.ConstraintLayout
 import com.facebook.react.uimanager.ThemedReactContext
 import org.mariuszgromada.math.mxparser.Expression
 import androidx.core.graphics.toColorInt
-import com.calculatorkeyboard.RCTInputCalculator.Companion.calculatorHeight
+import com.calculatorkeyboard.InputCalculatorViewManager.Companion.calculatorHeight
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.RCTEventEmitter
 
 @SuppressLint("SetTextI18n", "ViewConstructor")
@@ -167,45 +170,13 @@ class CustomKeyboardView(
     }
   }
 
-  fun updateButtonColors(color: Int) {
-    specialButtonColor = color
-    for (i in 0 until childCount) {
-      val child = getChildAt(i)
-      if (child is Button) {
-        val key = child.text.toString()
-        if (specialKeys.contains(key)) {
-          if (key == "=") {
-            child.background = GradientDrawable().apply {
-              shape = GradientDrawable.RECTANGLE
-              cornerRadius = 24f
-              setColor(specialButtonColor)
-            }
-          } else {
-            child.background = GradientDrawable().apply {
-              shape = GradientDrawable.RECTANGLE
-              cornerRadius = 24f
-              setColor(specialButtonColor)
-            }
-          }
-          child.setTextColor(Color.BLACK)
-        }
-      } else if (child is ImageButton) {
-        child.background = GradientDrawable().apply {
-          shape = GradientDrawable.RECTANGLE
-          cornerRadius = 24f
-          setColor(specialButtonColor)
-        }
-      }
-    }
-  }
-
   private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
     if (isMainCTAKey) {
-      emitCustomKey()
+      emitCustomKey(context)
       return
     }
 
-    emitKeyPress(key)
+    emitKeyPress(context, key)
     when (key) {
       "AC" -> clearText()
       "back" -> onBackSpace()
@@ -260,19 +231,27 @@ 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 emitKeyPress(context: Context, key: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, editText.id)
+    val payload =
+      Arguments.createMap().apply {
+        putString("key", key)
+      }
+    val event = OnKeyPressEvent(surfaceId, editText.id, payload)
+
+    eventDispatcher?.dispatchEvent(event)
   }
 
-  private fun emitCustomKey() {
-    val reactContext = context as ThemedReactContext
-    reactContext.getJSModule(RCTEventEmitter::class.java)
-      .receiveEvent(editText.id, "onCustomKeyEvent", null)
+  private fun emitCustomKey(context: Context) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, editText.id)
+
+    val event = OnCustomKeyPressEvent(surfaceId, editText.id)
+
+    eventDispatcher?.dispatchEvent(event)
   }
 
   fun setCustomKeyText(text: String) {

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

@@ -0,0 +1,36 @@
+package com.calculatorkeyboard
+
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnChangeEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: WritableMap
+) : Event<OnChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onChange"
+
+  override fun getEventData() = payload
+}
+
+class OnKeyPressEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val payload: WritableMap
+) : Event<OnChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onKeyPress"
+
+  override fun getEventData() = payload
+}
+
+class OnCustomKeyPressEvent(
+  surfaceId: Int,
+  viewId: Int
+) : Event<OnChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = "onCustomKeyEvent"
+
+  override fun getEventData() = null
+}
+
+
+

package/android/src/main/java/com/calculatorkeyboard/{RCTInputCalculator.kt → InputCalculatorViewManager.kt}

@@ -3,25 +3,43 @@ package com.calculatorkeyboard
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Typeface
+import android.os.Build
+import android.provider.Settings.Global.putString
+import android.text.Editable
+import android.text.TextWatcher
 import android.view.KeyEvent
 import android.view.inputmethod.InputMethodManager
 import androidx.core.graphics.toColorInt
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
+import androidx.core.widget.addTextChangedListener
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.views.textinput.ReactEditText
-import com.facebook.react.views.textinput.ReactTextInputManager
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.viewmanagers.NativeInputCalculatorManagerDelegate
 import com.facebook.react.viewmanagers.NativeInputCalculatorManagerInterface
-import com.facebook.react.uimanager.ViewManagerDelegate
-import androidx.annotation.Nullable
+import com.facebook.react.views.textinput.ReactEditText
+import com.facebook.react.views.textinput.ReactTextInputManager
+
+@ReactModule(name = InputCalculatorViewManager.REACT_CLASS)
+class InputCalculatorViewManager : SimpleViewManager<ReactEditText>(), NativeInputCalculatorManagerInterface<ReactEditText> {
+  private val delegate: NativeInputCalculatorManagerDelegate<ReactEditText, InputCalculatorViewManager> =
+    NativeInputCalculatorManagerDelegate(this)
 
-// Fabric-only manager with codegen name `NativeInputCalculator`
-class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorManagerInterface<ReactEditText> {
+  override fun getDelegate(): ViewManagerDelegate<ReactEditText> = delegate
 
-  private val mDelegate: ViewManagerDelegate<ReactEditText> = NativeInputCalculatorManagerDelegate(this)
+  override fun getName() = REACT_CLASS
 
   private var keyboardView: CustomKeyboardView? = null
   private lateinit var editText: CalculatorEditText
@@ -32,14 +50,14 @@ class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorMan
   private var backListenerAttached = false
   private var overlayShowing = false
 
-  override fun getName() = REACT_CLASS
 
   companion object {
     const val REACT_CLASS = "NativeInputCalculator"
     val calculatorHeight: Int = 240.dpToPx().toInt()
   }
 
-  override fun setValue(view: ReactEditText, @Nullable value: String?) {
+  @ReactProp(name = "value")
+  override fun setValue(view: ReactEditText, value: String?) {
     UiThreadUtil.runOnUiThread {
       val e = view.editableText ?: run { view.setText(value ?: ""); return@runOnUiThread }
       val newText = value ?: ""
@@ -52,28 +70,72 @@ class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorMan
     }
   }
 
-  override fun setMode(view: ReactEditText, @Nullable mode: String?) {
+  override fun setTextAttributes(view: ReactEditText?, value: ReadableMap?) {
+    val fontWeightStr = value?.getString("fontWeight")
+    val fontSize = value?.getDouble("fontSize")
+
+    fontWeightStr?.let { weightStr ->
+      val weight = when (weightStr) {
+        "100" -> 100
+        "200" -> 200
+        "300" -> 300
+        "400", "normal" -> 400
+        "500" -> 500
+        "600" -> 600
+        "700", "bold" -> 700
+        "800" -> 800
+        "900" -> 900
+        else -> 400
+      }
+
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+        view?.typeface = Typeface.create(view.typeface, weight, false)
+      } else {
+        view?.typeface = if (weight >= 600) {
+          Typeface.create(view.typeface, Typeface.BOLD)
+        } else {
+          Typeface.create(view.typeface, Typeface.NORMAL)
+        }
+      }
+    }
+
+    fontSize?.let {
+      view?.textSize = it.toFloat()
+    }
+  }
+
+
+  @ReactProp(name = "mode")
+  override fun setMode(view: ReactEditText, mode: String?) {
     keyboardView?.setMode(mode ?: "NumDefault")
   }
 
-  override fun setCustomKeyText(view: ReactEditText, @Nullable text: String?) {
+  @ReactProp(name = "customKeyText")
+  override fun setCustomKeyText(view: ReactEditText, text: String?) {
     keyboardView?.setCustomKeyText(text ?: "Tiếp")
   }
 
-  override fun setCustomKeyBackground(view: ReactEditText, @Nullable background: String?) {
+  @ReactProp(name = "customKeyBackground")
+  override fun setCustomKeyBackground(view: ReactEditText, background: String?) {
     keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
   }
 
-  override fun setCustomKeyTextColor(view: ReactEditText, @Nullable textColor: String?) {
+  @ReactProp(name = "customKeyTextColor")
+  override fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
     keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
   }
 
-  override fun setCustomKeyState(view: ReactEditText, @Nullable state: String?) {
+  @ReactProp(name = "customKeyState")
+  override fun setCustomKeyState(view: ReactEditText, state: String?) {
     keyboardView?.setCustomKeyState(state ?: "default")
   }
 
-  override fun setKeyboardColor(view: ReactEditText, @Nullable color: Int?) {
-    color?.let { keyboardView?.updateButtonColors(it) }
+  override fun focus(view: ReactEditText?) {
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
+  }
+
+  override fun blur(view: ReactEditText?) {
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 
   @SuppressLint("ClickableViewAccessibility")
@@ -104,6 +166,16 @@ class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorMan
         }
         false
       }
+      addTextChangedListener(object : TextWatcher{
+        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
+
+        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
+
+        override fun afterTextChanged(s: Editable?) {
+          emitOnChange(context, s.toString())
+        }
+
+      })
     }
 
     keyboardView = CustomKeyboardView(context, editText).apply {
@@ -168,23 +240,31 @@ class InputCalculatorManager : ReactTextInputManager(), NativeInputCalculatorMan
     v.showSoftInputOnFocus = true
   }
 
-  override fun getDelegate(): ViewManagerDelegate<ReactEditText> = mDelegate
+  private fun emitOnChange(context: Context, text: String) {
+    val reactContext = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, editText.id)
+    val payload =
+      Arguments.createMap().apply {
+        putString("text", text)
+      }
+    val event = OnChangeEvent(surfaceId, editText.id, payload)
 
-  override fun focus(view: ReactEditText) {
-    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
+    eventDispatcher?.dispatchEvent(event)
   }
 
-  override fun blur(view: ReactEditText) {
-    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
+  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomBubblingEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
+    base["onKeyPress"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onKeyPress"))
+    base["onChange"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onChange"))
+    return base
   }
 
-  // Events are emitted from CustomKeyboardView using RCTEventEmitter.
-
-  private fun focus() {
-    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomDirectEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
+    base["onCustomKeyEvent"] = mapOf("registrationName" to "onCustomKeyEvent")
+    return base
   }
 
-  private fun blur() {
-    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
-  }
 }
+

package/ios/NativeInputCalculator.mm

@@ -24,21 +24,21 @@ using namespace facebook::react;
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const NativeInputCalculatorProps>();
     _props = defaultProps;
-    
+
     // Create text field
     _textField = [[UITextField alloc] initWithFrame:self.bounds];
     _textField.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
     _textField.delegate = (id<UITextFieldDelegate>)self;
-    
+
     // Create keyboard view
     CGFloat bottomInset = [self getBottomInset];
     CGRect keyboardFrame = CGRectMake(0, 0, UIScreen.mainScreen.bounds.size.width, 240 + bottomInset);
     _keyboardView = [[CalculatorKeyboardView alloc] initWithFrame:keyboardFrame];
     _keyboardView.input = (id)self; // Bridge pattern
-    
+
     // Set custom keyboard
     _textField.inputView = _keyboardView;
-    
+
     [self addSubview:_textField];
   }
   return self;
@@ -62,7 +62,7 @@ using namespace facebook::react;
 {
   const auto &oldViewProps = *std::static_pointer_cast<const NativeInputCalculatorProps>(_props);
   const auto &newViewProps = *std::static_pointer_cast<const NativeInputCalculatorProps>(props);
-  
+
   // Update value
   if (oldViewProps.value != newViewProps.value) {
     NSString *newValue = RCTNSStringFromString(newViewProps.value);
@@ -71,35 +71,65 @@ using namespace facebook::react;
       _lastValue = newValue;
     }
   }
-  
+
   // Update mode
   if (oldViewProps.mode != newViewProps.mode) {
     _keyboardView.keyboardMode = RCTNSStringFromString(newViewProps.mode);
   }
-  
+
   // Update customKeyText
   if (oldViewProps.customKeyText != newViewProps.customKeyText) {
     _keyboardView.customKeyText = RCTNSStringFromString(newViewProps.customKeyText);
   }
-  
+
   // Update customKeyBackground
   if (oldViewProps.customKeyBackground != newViewProps.customKeyBackground) {
     _keyboardView.customKeyBackground = RCTNSStringFromString(newViewProps.customKeyBackground);
   }
-  
+
   // Update customKeyTextColor
   if (oldViewProps.customKeyTextColor != newViewProps.customKeyTextColor) {
     _keyboardView.customKeyTextColor = RCTNSStringFromString(newViewProps.customKeyTextColor);
   }
-  
+
   // Update customKeyState
   if (oldViewProps.customKeyState != newViewProps.customKeyState) {
     _keyboardView.customKeyState = RCTNSStringFromString(newViewProps.customKeyState);
   }
-  
+
+  // ===== textAttributes (fontSize, fontWeight) =====
+  // Codegen should have a prop like: std::optional<folly::dynamic> textAttributes;
+  if (oldViewProps.textAttributes.fontSize != newViewProps.textAttributes.fontSize > 0.0f) {
+    CGFloat newSize = (CGFloat)newViewProps.textAttributes.fontSize;
+      UIFont *current = _textField.font ?: [UIFont systemFontOfSize:UIFont.systemFontSize];
+      _textField.font = [current fontWithSize:newSize];
+  }
+
+  if (oldViewProps.textAttributes.fontWeight != newViewProps.textAttributes.fontWeight) {
+    UIFontWeight weight = _UIFontWeightFromString(newViewProps.textAttributes.fontWeight);
+      CGFloat size = _textField.font ? _textField.font.pointSize : UIFont.systemFontSize;
+      _textField.font = [UIFont systemFontOfSize:size weight:weight];
+  }
+
   [super updateProps:props oldProps:oldProps];
 }
 
+static UIFontWeight _UIFontWeightFromString(std::string_view s) {
+  std::string v(s);
+  for (auto &c : v) c = (char)tolower((unsigned char)c);
+
+  if (v == "normal" || v == "400") return UIFontWeightRegular;
+  if (v == "bold"   || v == "700") return UIFontWeightBold;
+  if (v == "100") return UIFontWeightUltraLight;
+  if (v == "200") return UIFontWeightThin;
+  if (v == "300") return UIFontWeightLight;
+  if (v == "500") return UIFontWeightMedium;
+  if (v == "600") return UIFontWeightSemibold;
+  if (v == "800") return UIFontWeightHeavy;
+  if (v == "900") return UIFontWeightBlack;
+  return UIFontWeightRegular;
+}
+
 - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
 {
   RCTNativeInputCalculatorHandleCommand(self, commandName, args);
@@ -143,11 +173,11 @@ using namespace facebook::react;
 {
   NSString *text = [_textField.text stringByReplacingOccurrencesOfString:@"×" withString:@"*"];
   text = [text stringByReplacingOccurrencesOfString:@"÷" withString:@"/"];
-  
+
   NSString *pattern = @"^\\s*(-?\\d+(\\.\\d+)?\\s*[-+*/]\\s*)*-?\\d+(\\.\\d+)?\\s*$";
   NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:pattern options:0 error:nil];
   NSRange range = NSMakeRange(0, text.length);
-  
+
   if ([regex firstMatchInString:text options:0 range:range]) {
     NSExpression *expression = [NSExpression expressionWithFormat:text];
     id result = [expression expressionValueWithObject:nil context:nil];
@@ -181,7 +211,7 @@ using namespace facebook::react;
 - (void)notifyTextChange
 {
   _lastValue = _textField.text;
-  
+
   if (_eventEmitter) {
     auto emitter = std::static_pointer_cast<const NativeInputCalculatorEventEmitter>(_eventEmitter);
     NativeInputCalculatorEventEmitter::OnChange event{

package/package.json

@@ -1,77 +1,77 @@
 {
-  "name": "@momo-kits/calculator-keyboard",
-  "version": "0.150.2-beta.20-sp.3",
-  "description": "react native calculator keyboard",
-  "main": "./src/index.tsx",
-  "files": [
-    "src",
-    "lib",
-    "android",
-    "ios",
-    "cpp",
-    "*.podspec",
-    "react-native.config.js",
-    "!ios/build",
-    "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
-  ],
-  "scripts": {
-    "test": "jest",
-    "typecheck": "tsc",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
-    "build": "bob build",
-    "release": "release-it"
-  },
-  "keywords": [
-    "react-native",
-    "ios",
-    "android"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git"
-  },
-  "author": "Dũng (Wem) <huynh.developer@gmail.com> (https://github.com/wem2017/react-native-calculator-keyboard.git)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard/issues"
-  },
-  "homepage": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard#readme",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "codegenConfig": {
-    "name": "CalculatorKeyboardSpecs",
-    "type": "all",
-    "jsSrcsDir": "src",
-    "android": {
-      "javaPackageName": "com.calculatorkeyboard"
+    "name": "@momo-kits/calculator-keyboard",
+    "version": "0.150.2-beta.21",
+    "description": "react native calculator keyboard",
+    "main": "./src/index.tsx",
+    "files": [
+        "src",
+        "lib",
+        "android",
+        "ios",
+        "cpp",
+        "*.podspec",
+        "react-native.config.js",
+        "!ios/build",
+        "!android/build",
+        "!android/gradle",
+        "!android/gradlew",
+        "!android/gradlew.bat",
+        "!android/local.properties",
+        "!**/__tests__",
+        "!**/__fixtures__",
+        "!**/__mocks__",
+        "!**/.*"
+    ],
+    "scripts": {
+        "test": "jest",
+        "typecheck": "tsc",
+        "lint": "eslint \"**/*.{js,ts,tsx}\"",
+        "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+        "build": "echo",
+        "release": "release-it"
     },
-    "ios": {
-      "componentProvider": {
-        "NativeInputCalculator": "NativeInputCalculator"
-      }
-    }
-  },
-  "devDependencies": {
-    "react": "*",
-    "react-native": "*"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "@momo-kits/foundation": "latest"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {}
-}
+    "keywords": [
+        "react-native",
+        "ios",
+        "android"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard.git"
+    },
+    "author": "Dũng (Wem) <huynh.developer@gmail.com> (https://github.com/wem2017/react-native-calculator-keyboard.git)",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard/issues"
+    },
+    "homepage": "https://github.com/wem2017/react-native-calculator-keyboard.git/react-native-calculator-keyboard#readme",
+    "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": "*"
+    },
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "@momo-kits/foundation": "latest"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {}
+}

package/src/{NativeInputCalculatorNativeComponent.ts → InputCalculatorNativeComponent.ts}

@@ -26,15 +26,21 @@ export type OnChangeEvent = Readonly<{
   text: string;
 }>;
 
+export type TextAttributes = Readonly<{
+  fontSize?: CodegenTypes.Float;
+  fontWeight?: string;
+}>;
+
 export interface NativeInputCalculatorProps extends ViewProps {
   value?: string;
+  textAttributes?: TextAttributes;
   mode?: string;
   customKeyText?: string;
   customKeyBackground?: string;
   customKeyTextColor?: string;
   customKeyState?: string;
-  onChange?: CodegenTypes.DirectEventHandler<OnChangeEvent>;
-  onKeyPress?: CodegenTypes.DirectEventHandler<OnKeyPressEvent>;
+  onChange?: CodegenTypes.BubblingEventHandler<OnChangeEvent>;
+  onKeyPress?: CodegenTypes.BubblingEventHandler<OnKeyPressEvent>;
   onCustomKeyEvent?: CodegenTypes.DirectEventHandler<{}>;
 }
 

package/src/index.tsx

@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { useContext } from 'react';
 import { ApplicationContext, Colors } from '@momo-kits/foundation';
-import { type NativeSyntheticEvent, type TextInputProps } from 'react-native';
-import NativeInputCalculator from './NativeInputCalculatorNativeComponent';
-import { Commands } from './NativeInputCalculatorNativeComponent';
+import {
+  type NativeSyntheticEvent,
+  type TextInputProps,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import NativeInputCalculator, {
+  TextAttributes,
+} from './InputCalculatorNativeComponent';
+import { Commands } from './InputCalculatorNativeComponent';
 
 const NativeInput = NativeInputCalculator;
 
@@ -17,6 +25,7 @@ interface InputCalculatorProps extends TextInputProps {
   customKeyBackground?: CustomKeyBackground;
   customKeyState?: CustomKeyState;
   onCustomKeyEvent?: () => void;
+  style?: StyleProp<TextStyle>;
 }
 
 export type CustomKeyBackground = 'primary' | 'default' | string;
@@ -36,6 +45,26 @@ export type InputCalculatorRef = {
   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
@@ -48,6 +77,7 @@ const InputCalculator = React.forwardRef<
       onKeyPress,
       customKeyState = CustomKeyState.Default,
       onCustomKeyEvent,
+      style,
       ...props
     },
     ref,
@@ -86,9 +116,16 @@ const InputCalculator = React.forwardRef<
       },
     }));
 
+    const derivedTA = React.useMemo(
+      () => styleToTextAttributes(style),
+      [style],
+    );
+
     return (
       <NativeInput
         {...props}
+        style={style}
+        textAttributes={isEmpty(derivedTA) ? undefined : derivedTA}
         ref={nativeRef}
         onChange={_onChange}
         onKeyPress={onKeyPress}