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

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

@@ -1,41 +1,37 @@
 package com.calculatorkeyboard
 
 import android.annotation.SuppressLint
-import android.app.Activity
-import android.graphics.PixelFormat
-import android.graphics.drawable.ColorDrawable
-import android.view.Gravity
+import android.content.Context
+import android.graphics.Color
 import android.view.KeyEvent
-import android.view.View
-import android.view.WindowInsets
-import android.view.WindowManager
-import android.widget.PopupWindow
-import androidx.constraintlayout.widget.ConstraintLayout
+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 androidx.core.graphics.drawable.toDrawable
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
-import com.facebook.react.uimanager.PixelUtil.dpToPx
 
 class RCTInputCalculator : ReactTextInputManager() {
 
   private var keyboardView: CustomKeyboardView? = null
-  private var calculatorHeight: Int = 290.dpToPx().toInt()
-  private var popup: PopupWindow? = null
-  private val animationDuration = 250L
-
   private lateinit var editText: CalculatorEditText
+  private lateinit var imm: InputMethodManager
+
+  private val overlayHost = KeyboardOverlayHost()
+
+  private var backListenerAttached = false
+  private var overlayShowing = false
 
   override fun getName() = REACT_CLASS
 
   companion object {
     const val REACT_CLASS = "RCTInputCalculator"
+    val calculatorHeight: Int = 240.dpToPx().toInt()
   }
 
   @ReactProp(name = "value")
@@ -47,15 +43,31 @@ class RCTInputCalculator : ReactTextInputManager() {
 
       val wasFocused = view.hasFocus()
       val atEnd = wasFocused && view.selectionStart == e.length && view.selectionEnd == e.length
-
       e.replace(0, e.length, newText)
-
-      if (!wasFocused || atEnd) {
-        view.setSelection(newText.length)
-      }
+      if (!wasFocused || atEnd) view.setSelection(newText.length)
     }
   }
 
+  @ReactProp(name = "customKeyText")
+  fun setCustomKeyText(view: ReactEditText, text: String?) {
+    keyboardView?.setCustomKeyText(text ?: "Xong")
+  }
+
+  @ReactProp(name = "customKeyBackground")
+  fun setCustomKeyBackground(view: ReactEditText, background: String?) {
+    keyboardView?.setCustomKeyBackground((background ?: "#d8d8d8").toColorInt())
+  }
+
+  @ReactProp(name = "customKeyTextColor")
+  fun setCustomKeyTextColor(view: ReactEditText, textColor: String?) {
+    keyboardView?.setCustomKeyTextColor(textColor?.toColorInt() ?: Color.BLACK)
+  }
+
+  @ReactProp(name = "customKeyState")
+  fun setCustomKeyState(view: ReactEditText, state: String?) {
+    keyboardView?.setCustomKeyState(state ?: "default")
+  }
+
   @ReactProp(name = "keyboardColor")
   fun setKeyboardColor(view: ReactEditText, color: String) {
     keyboardView?.updateButtonColors(color.toColorInt())
@@ -63,8 +75,32 @@ class RCTInputCalculator : ReactTextInputManager() {
 
   @SuppressLint("ClickableViewAccessibility")
   override fun createViewInstance(context: ThemedReactContext): ReactEditText {
+    imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+
     editText = CalculatorEditText(context).apply {
       showSoftInputOnFocus = false
+      isFocusableInTouchMode = true
+      setOnTouchListener { v, event ->
+        if (event.action == android.view.MotionEvent.ACTION_DOWN) {
+          showSoftInputOnFocus = false
+          ViewCompat.getWindowInsetsController(this)?.hide(WindowInsetsCompat.Type.ime())
+          imm.hideSoftInputFromWindow(windowToken, 0)
+
+          if (!isFocused) requestFocus()
+
+          val kb = keyboardView
+          if (kb != null && !overlayShowing) {
+            overlayHost.show(
+              anchorView = this,
+              keyboardView = kb,
+              heightPx = calculatorHeight
+            )
+            overlayShowing = true
+          }
+          return@setOnTouchListener true
+        }
+        false
+      }
     }
 
     keyboardView = CustomKeyboardView(context, editText).apply {
@@ -72,19 +108,34 @@ class RCTInputCalculator : ReactTextInputManager() {
       elevation = 24f
     }
 
+    if (!backListenerAttached) {
+      editText.setOnKeyListener { v, keyCode, event ->
+        if (keyCode == KeyEvent.KEYCODE_BACK && event.action == KeyEvent.ACTION_UP && v.hasFocus()) {
+          v.clearFocus()
+          true
+        } else false
+      }
+      backListenerAttached = true
+    }
+
     editText.onFocusListener = object : CalculatorEditText.OnFocusChangeListener {
       override fun onFocusChange(view: CalculatorEditText, hasFocus: Boolean) {
         UiThreadUtil.runOnUiThread {
           if (hasFocus) {
-            showKeyboardPopup(view)
+            disableSystemImeFor(view)
+            if (!overlayShowing) {
+              val kb = keyboardView ?: return@runOnUiThread
+              overlayHost.show(
+                anchorView = view,
+                keyboardView = kb,
+                heightPx = calculatorHeight
+              )
+              overlayShowing = true
+            }
           } else {
-            hideKeyboardPopup()
-          }
-          view.setOnKeyListener { v, keyCode, _ ->
-            if (keyCode == KeyEvent.KEYCODE_BACK && hasFocus) {
-              v.clearFocus()
-              true
-            } else false
+            overlayHost.hide()
+            overlayShowing = false
+            enableSystemImeFor(view)
           }
         }
       }
@@ -93,87 +144,54 @@ class RCTInputCalculator : ReactTextInputManager() {
     return editText
   }
 
-  override fun getCommandsMap(): Map<String, Int> {
-    return mapOf(
-      "blur" to 1,
-      "focus" to 2
-    )
-  }
 
-  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
-    when (commandId) {
-      1 -> blur()
-      2 -> focus()
-    }
+  override fun onDropViewInstance(view: ReactEditText) {
+    super.onDropViewInstance(view)
+    overlayHost.hide()
+    overlayHost.detach()
+    overlayShowing = false
+
   }
 
-  private fun ensurePopup() {
-    if (popup != null) return
-    val content = keyboardView ?: return
-
-    popup = PopupWindow(
-      content,
-      WindowManager.LayoutParams.MATCH_PARENT,
-      calculatorHeight + bottomInsetFrom(editText.rootView),
-      false
-    ).apply {
-      setBackgroundDrawable(android.graphics.Color.TRANSPARENT.toDrawable())
-      isOutsideTouchable = false
-      isClippingEnabled = false
-      softInputMode = WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING
-      inputMethodMode = PopupWindow.INPUT_METHOD_NOT_NEEDED
+  private fun disableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = false
+    if (android.os.Build.VERSION.SDK_INT >= 30) {
+      ViewCompat.getWindowInsetsController(v)?.hide(WindowInsetsCompat.Type.ime())
     }
+    imm.hideSoftInputFromWindow(v.windowToken, 0)
   }
 
-  private fun bottomInsetFrom(view: View): Int {
-    val insets = ViewCompat.getRootWindowInsets(view) ?: return 0
-    val mask = WindowInsetsCompat.Type.navigationBars() or WindowInsetsCompat.Type.displayCutout()
-    return insets.getInsets(mask).bottom
+  private fun enableSystemImeFor(v: ReactEditText) {
+    v.showSoftInputOnFocus = true
   }
 
-  private fun showKeyboardPopup(anchor: View) {
-    ensurePopup()
-    val p = popup ?: return
-    if (p.isShowing) return
+  override fun getCommandsMap(): Map<String, Int> = mapOf("blur" to 1, "focus" to 2)
 
-    val root = keyboardView ?: return
-
-    root.translationY = calculatorHeight.toFloat()
-    p.showAtLocation(anchor.rootView, Gravity.BOTTOM or Gravity.START, 0, 0)
-
-    root.animate()
-      ?.translationY(0f)
-      ?.setDuration(animationDuration)
-      ?.start()
+  override fun receiveCommand(reactEditText: ReactEditText, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
+      1 -> blur()
+      2 -> focus()
+    }
   }
 
-  private fun hideKeyboardPopup() {
-    val p = popup ?: return
-    if (!p.isShowing) return
-    val root = keyboardView ?: return
-
-    root.animate()
-      .translationY(calculatorHeight.toFloat())
-      .setDuration(animationDuration)
-      .withEndAction {
-        try {
-          if (p.isShowing) p.dismiss()
-        } catch (_: Throwable) { }
-      }
-      .start()
+  override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
+    val base = super.getExportedCustomBubblingEventTypeConstants().toMutableMap()
+    base["onKeyPress"] = mapOf("phasedRegistrationNames" to mapOf("bubbled" to "onKeyPress"))
+    return base
+  }
 
-    popup = null
+  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()
-    }
+    UiThreadUtil.runOnUiThread { if (!editText.isFocused) editText.requestFocus() }
   }
 
   private fun blur() {
-    UiThreadUtil.runOnUiThread {
-      if (editText.isFocused) editText.clearFocus()
-    }
+    UiThreadUtil.runOnUiThread { if (editText.isFocused) editText.clearFocus() }
   }
 }
+

package/ios/CalculatorKeyboardView.swift

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

package/ios/InputCalculator.m

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

package/ios/InputCalculator.swift

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

package/package.json

@@ -1,22 +1,8 @@
 {
     "name": "@momo-kits/calculator-keyboard",
-    "version": "0.150.2-beta.2",
+    "version": "0.150.2-beta.20",
     "description": "react native calculator keyboard",
-    "source": "./src/index.tsx",
-    "main": "./lib/commonjs/index.js",
-    "module": "./lib/module/index.js",
-    "exports": {
-        ".": {
-            "import": {
-                "types": "./lib/typescript/module/src/index.d.ts",
-                "default": "./lib/module/index.js"
-            },
-            "require": {
-                "types": "./lib/typescript/commonjs/src/index.d.ts",
-                "default": "./lib/commonjs/index.js"
-            }
-        }
-    },
+    "main": "./src/index.tsx",
     "files": [
         "src",
         "lib",
@@ -41,7 +27,7 @@
         "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",
+        "build": "echo 'build step'",
         "release": "release-it"
     },
     "keywords": [
@@ -63,123 +49,13 @@
         "registry": "https://registry.npmjs.org/"
     },
     "devDependencies": {
-        "@commitlint/config-conventional": "^17.0.2",
-        "@evilmartians/lefthook": "^1.5.0",
-        "@react-native-community/cli": "15.0.1",
-        "@react-native/eslint-config": "^0.73.1",
-        "@release-it/conventional-changelog": "^9.0.2",
-        "@types/jest": "^29.5.5",
-        "@types/react": "^18.2.44",
-        "commitlint": "^17.0.2",
-        "del-cli": "^5.1.0",
-        "eslint": "^8.51.0",
-        "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "jest": "^29.7.0",
-        "prettier": "^3.0.3",
-        "react": "18.3.1",
-        "react-native": "0.76.5",
-        "react-native-builder-bob": "^0.32.0",
-        "release-it": "^17.10.0",
-        "turbo": "^1.10.7",
-        "typescript": "^5.2.2"
-    },
-    "resolutions": {
-        "@types/react": "^18.2.44"
-    },
-    "peerDependencies": {
         "react": "*",
         "react-native": "*"
     },
-    "jest": {
-        "preset": "react-native",
-        "modulePathIgnorePatterns": [
-            "<rootDir>/example/node_modules",
-            "<rootDir>/lib/"
-        ]
-    },
-    "commitlint": {
-        "extends": [
-            "@commitlint/config-conventional"
-        ]
-    },
-    "release-it": {
-        "git": {
-            "commitMessage": "chore: release ${version}",
-            "tagName": "v${version}"
-        },
-        "npm": {
-            "publish": true
-        },
-        "github": {
-            "release": true
-        },
-        "plugins": {
-            "@release-it/conventional-changelog": {
-                "preset": "angular"
-            }
-        }
-    },
-    "eslintConfig": {
-        "root": true,
-        "extends": [
-            "@react-native",
-            "prettier"
-        ],
-        "rules": {
-            "react/react-in-jsx-scope": "off",
-            "prettier/prettier": [
-                "error",
-                {
-                    "quoteProps": "consistent",
-                    "singleQuote": true,
-                    "tabWidth": 2,
-                    "trailingComma": "es5",
-                    "useTabs": false
-                }
-            ]
-        }
-    },
-    "eslintIgnore": [
-        "node_modules/",
-        "lib/"
-    ],
-    "prettier": {
-        "quoteProps": "consistent",
-        "singleQuote": true,
-        "tabWidth": 2,
-        "trailingComma": "es5",
-        "useTabs": false
-    },
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "esm": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "esm": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "esm": true
-                }
-            ]
-        ]
-    },
-    "create-react-native-library": {
-        "type": "legacy-view",
-        "languages": "kotlin-swift",
-        "version": "0.45.5"
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "@momo-kits/foundation": "latest"
     },
     "dependencies": {}
 }