react-native-controlled-input 0.4.0 → 0.8.0

package/android/src/main/java/com/controlledinput/JetpackComposeView.kt

@@ -87,12 +87,12 @@ fun JetpackComposeView(
   val fontSize = style?.fontSize?.let { it.sp } ?: 24.sp
   val fontFamily = remember(style?.fontFamily) {
     style?.fontFamily?.let { name ->
-      listOf("ttf", "otf").firstNotNullOfOrNull { ext ->
-        try {
-          FontFamily(Typeface.createFromAsset(context.assets, "fonts/$name.$ext"))
-        } catch (_: Exception) {
-          null
-        }
+      try {
+        val typeface = com.facebook.react.views.text.ReactFontManager.getInstance()
+          .getTypeface(name, Typeface.NORMAL, context.assets)
+        typeface?.let { FontFamily(it) }
+      } catch (_: Exception) {
+        null
       }
     }
   }

package/ios/ControlledInputView.mm

@@ -10,12 +10,13 @@
 #import <React/RCTFabricComponentsPlugins.h>
 
 #import <react/renderer/components/ControlledInputViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/ControlledInputViewSpec/EventEmitters.h>
 #import <react/renderer/components/ControlledInputViewSpec/Props.h>
 #import <react/renderer/components/ControlledInputViewSpec/RCTComponentViewHelpers.h>
 
 using namespace facebook::react;
 
-@interface ControlledInputView () <RCTControlledInputViewViewProtocol>
+@interface ControlledInputView () <RCTControlledInputViewViewProtocol, RNControlledInputDelegate>
 @end
 
 @implementation ControlledInputView {
@@ -34,6 +35,7 @@ using namespace facebook::react;
     _props = defaultProps;
 
     _inputView = [[RNControlledInput alloc] initWithFrame:self.bounds];
+    _inputView.delegate = self;
 
     self.contentView = _inputView;
   }
@@ -109,4 +111,18 @@ using namespace facebook::react;
     [super handleCommand:commandName args:args];
 }
 
+- (void)controlledInputDidChangeText:(RNControlledInput *)input value:(NSString *)value
+{
+    if (_eventEmitter == nullptr) {
+        return;
+    }
+
+    const auto eventEmitter = std::static_pointer_cast<const ControlledInputViewEventEmitter>(_eventEmitter);
+    const char *utf8Value = value.UTF8String ?: "";
+
+    eventEmitter->onTextChange(ControlledInputViewEventEmitter::OnTextChange {
+        .value = std::string(utf8Value),
+    });
+}
+
 @end

package/ios/RNControlledInput.swift

@@ -1,49 +1,120 @@
 import UIKit
 
+@objc public protocol RNControlledInputDelegate: AnyObject {
+    func controlledInputDidChangeText(_ input: RNControlledInput, value: String)
+}
+
 @objc(RNControlledInput)
-public class RNControlledInput: UIView {
-    
+public class RNControlledInput: UIView, UITextFieldDelegate {
+
+    private let textField = UITextField()
+    @objc public weak var delegate: RNControlledInputDelegate?
+
     @objc public var value: String? {
         didSet {
-            // Update UI
+            if textField.text != value {
+                textField.text = value
+            }
         }
     }
-    
-    @objc public var textColor: UIColor?
-    @objc public var fontSize: CGFloat = 16
-    @objc public var fontFamily: String?
-    @objc public var inputHeight: CGFloat = 0
-    @objc public var padding: UIEdgeInsets = .zero
-    @objc public var borderWidth: CGFloat = 0
-    @objc public var borderRadius: CGFloat = 0
-    @objc public var borderColor: UIColor?
 
-    public override var canBecomeFirstResponder: Bool {
-        true
+    @objc public var textColor: UIColor? {
+        didSet { textField.textColor = textColor }
+    }
+
+    @objc public var fontSize: CGFloat = 16 {
+        didSet { applyFont() }
+    }
+
+    @objc public var fontFamily: String? {
+        didSet { applyFont() }
+    }
+
+    @objc public var inputHeight: CGFloat = 0 {
+        didSet { invalidateIntrinsicContentSize() }
     }
 
+    @objc public var padding: UIEdgeInsets = .zero {
+        didSet { applyPadding() }
+    }
+
+    @objc public var borderWidth: CGFloat = 0 {
+        didSet { layer.borderWidth = borderWidth }
+    }
+
+    @objc public var borderRadius: CGFloat = 0 {
+        didSet { layer.cornerRadius = borderRadius }
+    }
+
+    @objc public var borderColor: UIColor? {
+        didSet { layer.borderColor = borderColor?.cgColor }
+    }
+
+    public override var canBecomeFirstResponder: Bool { true }
+
     @objc public func focus() {
-        print("[ControlledInputView] RNControlledInput.focus()")
-        _ = becomeFirstResponder()
+        textField.becomeFirstResponder()
     }
 
     @objc public func blur() {
-        print("[ControlledInputView] RNControlledInput.blur()")
-        _ = resignFirstResponder()
+        textField.resignFirstResponder()
     }
 
     @objc public override init(frame: CGRect) {
         super.init(frame: frame)
-        self.backgroundColor = .red
-        self.translatesAutoresizingMaskIntoConstraints = false
-        
-        NSLayoutConstraint.activate([
-            self.widthAnchor.constraint(equalToConstant: 100),
-            self.heightAnchor.constraint(equalToConstant: 100)
-        ])
+        setupTextField()
     }
-    
+
     required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
+
+    private func setupTextField() {
+        textField.translatesAutoresizingMaskIntoConstraints = false
+        textField.borderStyle = .none
+        textField.delegate = self
+        addSubview(textField)
+
+        NSLayoutConstraint.activate([
+            textField.topAnchor.constraint(equalTo: topAnchor),
+            textField.leadingAnchor.constraint(equalTo: leadingAnchor),
+            textField.trailingAnchor.constraint(equalTo: trailingAnchor),
+            textField.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+
+        applyFont()
+    }
+
+    public func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
+        let currentText = textField.text ?? ""
+        guard let stringRange = Range(range, in: currentText) else { return true }
+        let newText = currentText.replacingCharacters(in: stringRange, with: string)
+
+        delegate?.controlledInputDidChangeText(self, value: newText)
+
+        return false
+    }
+
+    private func applyFont() {
+        if let family = fontFamily, let font = UIFont(name: family, size: fontSize) {
+            textField.font = font
+        } else {
+            textField.font = UIFont.systemFont(ofSize: fontSize)
+        }
+    }
+
+    private func applyPadding() {
+        // UITextField doesn't have built-in edge insets — wrap with container views
+        let leftView = UIView(frame: CGRect(x: 0, y: 0, width: padding.left, height: 1))
+        let rightView = UIView(frame: CGRect(x: 0, y: 0, width: padding.right, height: 1))
+        textField.leftView = leftView
+        textField.leftViewMode = .always
+        textField.rightView = rightView
+        textField.rightViewMode = .always
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        layer.borderColor = borderColor?.cgColor
+    }
 }

package/lib/module/index.js

@@ -1,11 +1,19 @@
 "use strict";
 
 import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { Platform } from 'react-native';
+import { Platform, processColor } from 'react-native';
 import ControlledInputViewNativeComponent, { Commands } from './ControlledInputViewNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ControlledInputView = /*#__PURE__*/forwardRef((props, ref) => {
   const nativeRef = useRef(null);
+  const nativeProps = Platform.OS === 'ios' && props.inputStyle ? {
+    ...props,
+    inputStyle: {
+      ...props.inputStyle,
+      color: props.inputStyle.color == null ? props.inputStyle.color : processColor(props.inputStyle.color),
+      borderColor: props.inputStyle.borderColor == null ? props.inputStyle.borderColor : processColor(props.inputStyle.borderColor)
+    }
+  } : props;
   useImperativeHandle(ref, () => ({
     blur: () => {
       if (!nativeRef.current) {
@@ -27,7 +35,7 @@ export const ControlledInputView = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }));
   return /*#__PURE__*/_jsx(ControlledInputViewNativeComponent, {
-    ...props,
+    ...nativeProps,
     ref: nativeRef
   });
 });

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useImperativeHandle","useRef","Platform","ControlledInputViewNativeComponent","Commands","jsx","_jsx","ControlledInputView","props","ref","nativeRef","blur","current","OS","console","log","focus"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,mBAAmB,EACnBC,MAAM,QAED,OAAO;AACd,SAASC,QAAQ,QAAQ,cAAc;AACvC,OAAOC,kCAAkC,IACvCC,QAAQ,QAEH,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO9C,OAAO,MAAMC,mBAAmB,gBAAGR,UAAU,CAG3C,CAACS,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAMC,SAAS,GACbT,MAAM,CAAwD,IAAI,CAAC;EAErED,mBAAmB,CAACS,GAAG,EAAE,OAAO;IAC9BE,IAAI,EAAEA,CAAA,KAAM;MACV,IAAI,CAACD,SAAS,CAACE,OAAO,EAAE;QACtB;MACF;MAEA,IAAIV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,SAAS,EAAE;QACtDC,OAAO,CAACC,GAAG,CACT,yBAAyBb,QAAQ,CAACW,EAAE,yBACtC,CAAC;QACDT,QAAQ,CAACO,IAAI,CAACD,SAAS,CAACE,OAAO,CAAC;MAClC;IACF,CAAC;IACDI,KAAK,EAAEA,CAAA,KAAM;MACX,IAAI,CAACN,SAAS,CAACE,OAAO,EAAE;QACtB;MACF;MAEA,IAAIV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,SAAS,EAAE;QACtDC,OAAO,CAACC,GAAG,CACT,yBAAyBb,QAAQ,CAACW,EAAE,0BACtC,CAAC;QACDT,QAAQ,CAACY,KAAK,CAACN,SAAS,CAACE,OAAO,CAAC;MACnC;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACEN,IAAA,CAACH,kCAAkC;IAAA,GAAKK,KAAK;IAAEC,GAAG,EAAEC;EAAiB,CAAE,CAAC;AAE5E,CAAC,CAAC;AAEF,cAAc,sCAAsC","ignoreList":[]}
+{"version":3,"names":["forwardRef","useImperativeHandle","useRef","Platform","processColor","ControlledInputViewNativeComponent","Commands","jsx","_jsx","ControlledInputView","props","ref","nativeRef","nativeProps","OS","inputStyle","color","borderColor","blur","current","console","log","focus"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,mBAAmB,EACnBC,MAAM,QAED,OAAO;AACd,SAASC,QAAQ,EAAEC,YAAY,QAAQ,cAAc;AACrD,OAAOC,kCAAkC,IACvCC,QAAQ,QAEH,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO9C,OAAO,MAAMC,mBAAmB,gBAAGT,UAAU,CAG3C,CAACU,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAMC,SAAS,GACbV,MAAM,CAAwD,IAAI,CAAC;EACrE,MAAMW,WAAW,GACfV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIJ,KAAK,CAACK,UAAU,GACrC;IACE,GAAGL,KAAK;IACRK,UAAU,EAAE;MACV,GAAGL,KAAK,CAACK,UAAU;MACnBC,KAAK,EACHN,KAAK,CAACK,UAAU,CAACC,KAAK,IAAI,IAAI,GAC1BN,KAAK,CAACK,UAAU,CAACC,KAAK,GACtBZ,YAAY,CAACM,KAAK,CAACK,UAAU,CAACC,KAAK,CAAC;MAC1CC,WAAW,EACTP,KAAK,CAACK,UAAU,CAACE,WAAW,IAAI,IAAI,GAChCP,KAAK,CAACK,UAAU,CAACE,WAAW,GAC5Bb,YAAY,CAACM,KAAK,CAACK,UAAU,CAACE,WAAW;IACjD;EACF,CAAC,GACDP,KAAK;EAEXT,mBAAmB,CAACU,GAAG,EAAE,OAAO;IAC9BO,IAAI,EAAEA,CAAA,KAAM;MACV,IAAI,CAACN,SAAS,CAACO,OAAO,EAAE;QACtB;MACF;MAEA,IAAIhB,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,SAAS,EAAE;QACtDM,OAAO,CAACC,GAAG,CACT,yBAAyBlB,QAAQ,CAACW,EAAE,yBACtC,CAAC;QACDR,QAAQ,CAACY,IAAI,CAACN,SAAS,CAACO,OAAO,CAAC;MAClC;IACF,CAAC;IACDG,KAAK,EAAEA,CAAA,KAAM;MACX,IAAI,CAACV,SAAS,CAACO,OAAO,EAAE;QACtB;MACF;MAEA,IAAIhB,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,SAAS,EAAE;QACtDM,OAAO,CAACC,GAAG,CACT,yBAAyBlB,QAAQ,CAACW,EAAE,0BACtC,CAAC;QACDR,QAAQ,CAACgB,KAAK,CAACV,SAAS,CAACO,OAAO,CAAC;MACnC;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACEX,IAAA,CAACH,kCAAkC;IAAA,GAC7BQ,WAAW;IACfF,GAAG,EAAEC;EAAiB,CACvB,CAAC;AAEN,CAAC,CAAC;AAEF,cAAc,sCAAsC","ignoreList":[]}

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAOA,OAA2C,EAEzC,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,gHAqC9B,CAAC;AAEH,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAOA,OAA2C,EAEzC,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,gHAyD9B,CAAC;AAEH,cAAc,sCAAsC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-controlled-input",
-  "version": "0.4.0",
+  "version": "0.8.0",
   "description": "React Native Controlled Inputative Controlled Input",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -4,7 +4,7 @@ import {
   useRef,
   type ElementRef,
 } from 'react';
-import { Platform } from 'react-native';
+import { Platform, processColor } from 'react-native';
 import ControlledInputViewNativeComponent, {
   Commands,
   type NativeProps,
@@ -21,6 +21,23 @@ export const ControlledInputView = forwardRef<
 >((props, ref) => {
   const nativeRef =
     useRef<ElementRef<typeof ControlledInputViewNativeComponent>>(null);
+  const nativeProps =
+    Platform.OS === 'ios' && props.inputStyle
+      ? {
+          ...props,
+          inputStyle: {
+            ...props.inputStyle,
+            color:
+              props.inputStyle.color == null
+                ? props.inputStyle.color
+                : processColor(props.inputStyle.color),
+            borderColor:
+              props.inputStyle.borderColor == null
+                ? props.inputStyle.borderColor
+                : processColor(props.inputStyle.borderColor),
+          },
+        }
+      : props;
 
   useImperativeHandle(ref, () => ({
     blur: () => {
@@ -50,7 +67,10 @@ export const ControlledInputView = forwardRef<
   }));
 
   return (
-    <ControlledInputViewNativeComponent {...props} ref={nativeRef as any} />
+    <ControlledInputViewNativeComponent
+      {...nativeProps}
+      ref={nativeRef as any}
+    />
   );
 });