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

package/README.md

@@ -10,57 +10,15 @@ npm install react-native-calculator-keyboard
 
 ## Usage
 
+
 ```js
-import InputCalculator from '@momo-kits/calculator-keyboard';
+import { CalculatorKeyboardView } from "react-native-calculator-keyboard";
 
 // ...
 
-<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
+<CalculatorKeyboardView color="tomato" />
 ```
 
-**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(InputCalculatorManager())
+    return listOf(RCTInputCalculator())
   }
 }

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

@@ -7,6 +7,7 @@ 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
@@ -20,57 +21,53 @@ class CustomKeyboardView(
   context: ThemedReactContext,
   private val editText: CalculatorEditText
 ) : ConstraintLayout(context) {
-  private val numWithCTAKeys = listOf(
+  private val keys = listOf(
     listOf("1", "2", "3", "÷", "back"),
     listOf("4", "5", "6", "×", "="),
-    listOf("7", "8", "9", "-", "Tiếp"),
+    listOf("7", "8", "9", "-", "Xong"),
     listOf("000", "0", "+")
   )
-  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 specialKeys = listOf("=", "-", "×", "÷", "back", "+")
   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
-  }
 
-  private fun renderUI() {
-    val displayMetrics = resources.displayMetrics
-    val buttonWidth = (displayMetrics.widthPixels - separatorWidth * 2 - 4 * separatorWidth) / 5f
-    val buttonHeight = (calculatorHeight - separatorWidth * 2 - 3 * separatorWidth) / 4
+      renderUI(widthButton, heightButton)
+    }
+
+  }
 
+  private fun renderUI(buttonWidth: Float, buttonHeight: Float) {
     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 isMainKey = rowIndex == 2 && colIndex == 4
-        val isMainCTAKey = isMainKey && keyboardMode == "NumWithCTA"
+        val isCustomKey = rowIndex == 2 && colIndex == 4
         val width = if (key == "000") buttonWidth * 2 + separatorWidth else buttonWidth
-        val height = if (isMainKey) buttonHeight * 2 + 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(), isMainKey, isMainCTAKey).also { b ->
-            if (isMainCTAKey) customKeyButton = b
+          createButton(key, xOffset, yOffset, width.toInt(), height.toInt(), isCustomKey).also { b ->
+            if (isCustomKey) customKeyButton = b
           }
         }
 
@@ -88,8 +85,7 @@ class CustomKeyboardView(
     yOffset: Float,
     buttonWidth: Int,
     buttonHeight: Int,
-    isMainKey: Boolean,
-    isMainCTAKey: Boolean
+    isCustomKey: Boolean
   ): Button {
     return Button(context).apply {
       val shapeInit = GradientDrawable().apply {
@@ -102,7 +98,7 @@ class CustomKeyboardView(
       background = shapeInit
       text = key
       setTypeface(typeface)
-      textSize = (if (isMainCTAKey) 18 else 24).toFloat()
+      textSize = (if (isCustomKey) 18 else 24).toFloat()
       setTextColor(Color.BLACK)
       stateListAnimator = null
       maxLines = 1
@@ -114,7 +110,7 @@ class CustomKeyboardView(
         constrainedWidth = false
       }
 
-      if (specialKeys.contains(key) || isMainKey) {
+      if (specialKeys.contains(key)) {
         background = GradientDrawable().apply {
           shape = GradientDrawable.RECTANGLE
           cornerRadius = 24f
@@ -129,7 +125,7 @@ class CustomKeyboardView(
 
       translationX = xOffset.toInt().toFloat()
       translationY = yOffset.toInt().toFloat()
-      setOnClickListener { onKeyPress(key, isMainCTAKey) }
+      setOnClickListener { onKeyPress(key, isCustomKey) }
     }
   }
 
@@ -199,15 +195,14 @@ class CustomKeyboardView(
     }
   }
 
-  private fun onKeyPress(key: String, isMainCTAKey: Boolean) {
-    if (isMainCTAKey) {
+  private fun onKeyPress(key: String, isCustomKey: Boolean) {
+    if (isCustomKey) {
       emitCustomKey()
       return
     }
 
     emitKeyPress(key)
     when (key) {
-      "AC" -> clearText()
       "back" -> onBackSpace()
       "=" -> calculateResult()
       "×", "+", "-", "÷" -> keyDidPress(" $key ")
@@ -220,10 +215,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
@@ -279,29 +270,25 @@ class CustomKeyboardView(
     customKeyButton?.text = text
   }
 
-  fun setMode(mode: String) {
-    keyboardMode = mode
-    renderUI()
-  }
-
   fun setCustomKeyBackground(background: Int) {
     customKeyButtonBackground = background
-    updateCustomKeyUI(background, customKeyButtonTextColor)
+    updateCustomKeyUI(background, customKeyButtonTextColor, customKeyButtonState)
   }
 
   fun setCustomKeyTextColor(textColor: Int) {
     customKeyButtonTextColor = textColor
-    updateCustomKeyUI(customKeyButtonBackground, textColor)
+    updateCustomKeyUI(customKeyButtonBackground, textColor, customKeyButtonState)
   }
 
 
   fun setCustomKeyState(state: String) {
     customKeyButtonState = state
     customKeyButton?.isEnabled = state != "disable"
-    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor)
+    updateCustomKeyUI(customKeyButtonBackground, customKeyButtonTextColor, state)
   }
 
-  private fun updateCustomKeyUI(background: Int, textColor: Int){
+  private fun updateCustomKeyUI(background: Int, textColor: Int, state: String){
+
     customKeyButton?.background = GradientDrawable().apply {
       shape = GradientDrawable.RECTANGLE
       cornerRadius = 24f
@@ -310,4 +297,5 @@ class CustomKeyboardView(
     customKeyButton?.setTextColor(textColor)
   }
 
+
 }

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

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

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
+