react-native-controlled-input 0.6.0 → 0.9.0

package/README.md

@@ -1,32 +1,95 @@
 # react-native-controlled-input
 
-React Native Controlled Inputative Controlled Input
+A controlled React Native input for cases where regular `TextInput` can briefly show invalid characters before your filtered `value` is rendered back from JS.
 
-## Installation
+## Problem
 
+With a regular controlled `TextInput`, native input is applied first, then JS receives the change, filters it, and sends the next `value` back.
+
+That means invalid characters can still flash in the field for a moment.
+
+`react-native-controlled-input` is built for this exact case: you decide what text is valid, and the displayed value stays driven by `value`.
+
+## Install
 
 ```sh
 npm install react-native-controlled-input
 ```
 
+Requires React Native New Architecture / Fabric.
+
+## Example
+
+```tsx
+import { useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  ControlledInputView,
+  type ControlledInputViewRef,
+} from 'react-native-controlled-input';
+
+export function Example() {
+  const [value, setValue] = useState('');
+  const inputRef = useRef<ControlledInputViewRef>(null);
+
+  return (
+    <ControlledInputView
+      ref={inputRef}
+      value={value}
+      onTextChange={(text) => setValue(text.replace(/\d/g, ''))}
+      style={styles.input}
+      onFocus={() => {}}
+      onBlur={() => {}}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    height: 48,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 16,
+    color: '#111',
+  },
+});
+```
+
+```tsx
+inputRef.current?.focus();
+inputRef.current?.blur();
+```
+
+## Props
 
-## Usage
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Current input value. |
+| `onTextChange` | `(value: string) => void` | Called with the next text value. Filter it and update `value`. |
+| `onFocus` | `() => void` | Called on focus. |
+| `onBlur` | `() => void` | Called on blur. |
+| `style` | `StyleProp<ViewStyle>` | Input styles. Same public API on iOS and Android, with platform-specific internal handling. |
 
+## Style support
 
-```js
-import { ControlledInputView } from "react-native-controlled-input";
+The same `style` API is supported on both iOS and Android.
 
-// ...
+Commonly used supported styles:
 
-<ControlledInputView color="tomato" />
-```
+- `color`, `fontSize`, `fontFamily`
+- `padding`, `paddingVertical`, `paddingHorizontal`
+- `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingStart`, `paddingEnd`
+- `borderWidth`, `borderRadius`, `borderColor`, `backgroundColor`
+- layout styles like `width`, `height`, `margin`, `flex`
 
+Implementation differs internally between platforms, but usage is the same for library consumers.
 
-## Contributing
+## Ref
 
-- [Development workflow](CONTRIBUTING.md#development-workflow)
-- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
-- [Code of conduct](CODE_OF_CONDUCT.md)
+- `focus()`
+- `blur()`
 
 ## License
 

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

@@ -56,17 +56,19 @@ class ControlledInputView : LinearLayout {
   }
 
   private fun configureComponent(context: Context) {
+    setBackgroundColor(android.graphics.Color.TRANSPARENT)
 
     layoutParams = LayoutParams(
-      LayoutParams.WRAP_CONTENT,
-      LayoutParams.WRAP_CONTENT
+      LayoutParams.MATCH_PARENT,
+      LayoutParams.MATCH_PARENT
     )
 
     ComposeView(context).also {
       it.layoutParams = LayoutParams(
-        LayoutParams.WRAP_CONTENT,
-        LayoutParams.WRAP_CONTENT
+        LayoutParams.MATCH_PARENT,
+        LayoutParams.MATCH_PARENT
       )
+      it.setBackgroundColor(android.graphics.Color.TRANSPARENT)
 
       viewModel = JetpackComposeViewModel()
 

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

@@ -47,7 +47,6 @@ class ControlledInputViewManager : SimpleViewManager<ControlledInputView>(),
         color = if (inputStyle.hasKey("color")) inputStyle.getString("color") else null,
         fontSize = if (inputStyle.hasKey("fontSize")) inputStyle.getDouble("fontSize") else null,
         fontFamily = if (inputStyle.hasKey("fontFamily")) inputStyle.getString("fontFamily") else null,
-        height = if (inputStyle.hasKey("height")) inputStyle.getDouble("height") else null,
         paddingTop = if (inputStyle.hasKey("paddingTop")) inputStyle.getDouble("paddingTop") else null,
         paddingBottom = if (inputStyle.hasKey("paddingBottom")) inputStyle.getDouble("paddingBottom") else null,
         paddingLeft = if (inputStyle.hasKey("paddingLeft")) inputStyle.getDouble("paddingLeft") else null,
@@ -55,6 +54,7 @@ class ControlledInputViewManager : SimpleViewManager<ControlledInputView>(),
         borderWidth = if (inputStyle.hasKey("borderWidth")) inputStyle.getDouble("borderWidth") else null,
         borderRadius = if (inputStyle.hasKey("borderRadius")) inputStyle.getDouble("borderRadius") else null,
         borderColor = if (inputStyle.hasKey("borderColor")) inputStyle.getString("borderColor") else null,
+        backgroundColor = if (inputStyle.hasKey("backgroundColor")) inputStyle.getString("backgroundColor") else null,
       )
     }
     view.viewModel.setInputStyle(style)

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

@@ -1,15 +1,15 @@
 package com.controlledinput
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.layout.Box
-import androidx.compose.ui.draw.clip
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.clip
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.ui.unit.dp
 import androidx.compose.foundation.text.input.InputTransformation
 import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.foundation.text.input.byValue
@@ -29,7 +29,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.ViewModel
 import com.facebook.react.bridge.Arguments
@@ -42,7 +41,6 @@ data class InputStyle(
   val color: String? = null,
   val fontSize: Double? = null,
   val fontFamily: String? = null,
-  val height: Double? = null,
   val paddingTop: Double? = null,
   val paddingBottom: Double? = null,
   val paddingLeft: Double? = null,
@@ -50,6 +48,7 @@ data class InputStyle(
   val borderWidth: Double? = null,
   val borderRadius: Double? = null,
   val borderColor: String? = null,
+  val backgroundColor: String? = null,
 )
 
 @Composable
@@ -96,23 +95,27 @@ fun JetpackComposeView(
       }
     }
   }
-  val height = style?.height?.let { it.dp }
-  val paddingValues = PaddingValues(
-    start = style?.paddingLeft?.dp ?: 0.dp,
-    top = style?.paddingTop?.dp ?: 0.dp,
-    end = style?.paddingRight?.dp ?: 0.dp,
-    bottom = style?.paddingBottom?.dp ?: 0.dp,
-  )
+
+  val paddingTop = style?.paddingTop?.dp ?: 0.dp
+  val paddingBottom = style?.paddingBottom?.dp ?: 0.dp
+  val paddingLeft = style?.paddingLeft?.dp ?: 0.dp
+  val paddingRight = style?.paddingRight?.dp ?: 0.dp
   val borderWidth = style?.borderWidth?.dp ?: 0.dp
   val borderRadius = style?.borderRadius?.dp ?: 0.dp
-  val borderColor = style?.borderColor?.let { Color(android.graphics.Color.parseColor(it)) } ?: Color.Transparent
+  val borderColor = style?.borderColor
+    ?.let { Color(android.graphics.Color.parseColor(it)) }
+    ?: Color.Transparent
+  val backgroundColor = style?.backgroundColor
+    ?.let { Color(android.graphics.Color.parseColor(it)) }
+    ?: Color.Transparent
+  val shape = RoundedCornerShape(borderRadius)
 
   Box(
     modifier = Modifier
-      .fillMaxWidth()
-      .then(height?.let { Modifier.height(it) } ?: Modifier)
-      .clip(RoundedCornerShape(borderRadius))
-      .border(borderWidth, borderColor, RoundedCornerShape(borderRadius))
+      .fillMaxSize()
+      .clip(shape)
+      .background(backgroundColor)
+      .border(borderWidth, borderColor, shape),
   ) {
     BasicTextField(
       state,
@@ -121,8 +124,13 @@ fun JetpackComposeView(
         proposed
       },
       modifier = Modifier
-        .fillMaxWidth()
-        .padding(paddingValues)
+        .fillMaxSize()
+        .padding(
+          start = paddingLeft,
+          top = paddingTop,
+          end = paddingRight,
+          bottom = paddingBottom,
+        )
         .focusRequester(focusRequester),
       textStyle = TextStyle(
         color = textColor,
@@ -130,6 +138,14 @@ fun JetpackComposeView(
         fontFamily = fontFamily,
       ),
       interactionSource = interactionSource,
+      decorator = { innerTextField ->
+        Box(
+          modifier = Modifier.fillMaxSize(),
+          contentAlignment = Alignment.CenterStart,
+        ) {
+          innerTextField()
+        }
+      },
     )
   }
 }

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;
   }
@@ -50,44 +52,20 @@ using namespace facebook::react;
         _inputView.value = [NSString stringWithUTF8String:newViewProps.value.c_str()];
     }
 
-    // Update inputStyle props
     const auto &style = newViewProps.inputStyle;
     const auto &oldStyle = oldViewProps.inputStyle;
 
     if (oldStyle.color != style.color) {
         _inputView.textColor = RCTUIColorFromSharedColor(style.color);
     }
-    
+
     if (oldStyle.fontSize != style.fontSize) {
         _inputView.fontSize = style.fontSize;
     }
-    
+
     if (oldStyle.fontFamily != style.fontFamily) {
         _inputView.fontFamily = style.fontFamily.empty() ? nil : [NSString stringWithUTF8String:style.fontFamily.c_str()];
     }
-    
-    if (oldStyle.height != style.height) {
-        _inputView.inputHeight = style.height;
-    }
-    
-    if (oldStyle.paddingTop != style.paddingTop || 
-        oldStyle.paddingBottom != style.paddingBottom ||
-        oldStyle.paddingLeft != style.paddingLeft ||
-        oldStyle.paddingRight != style.paddingRight) {
-        _inputView.padding = UIEdgeInsetsMake(style.paddingTop, style.paddingLeft, style.paddingBottom, style.paddingRight);
-    }
-    
-    if (oldStyle.borderWidth != style.borderWidth) {
-        _inputView.borderWidth = style.borderWidth;
-    }
-    
-    if (oldStyle.borderRadius != style.borderRadius) {
-        _inputView.borderRadius = style.borderRadius;
-    }
-    
-    if (oldStyle.borderColor != style.borderColor) {
-        _inputView.borderColor = RCTUIColorFromSharedColor(style.borderColor);
-    }
 
     [super updateProps:props oldProps:oldProps];
 }
@@ -109,4 +87,38 @@ 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),
+    });
+}
+
+- (void)controlledInputDidFocus:(RNControlledInput *)input
+{
+    if (_eventEmitter == nullptr) {
+        return;
+    }
+
+    const auto eventEmitter = std::static_pointer_cast<const ControlledInputViewEventEmitter>(_eventEmitter);
+    eventEmitter->onFocus(ControlledInputViewEventEmitter::OnFocus {});
+}
+
+- (void)controlledInputDidBlur:(RNControlledInput *)input
+{
+    if (_eventEmitter == nullptr) {
+        return;
+    }
+
+    const auto eventEmitter = std::static_pointer_cast<const ControlledInputViewEventEmitter>(_eventEmitter);
+    eventEmitter->onBlur(ControlledInputViewEventEmitter::OnBlur {});
+}
+
 @end

package/ios/RNControlledInput.swift

@@ -1,49 +1,95 @@
 import UIKit
 
+@objc public protocol RNControlledInputDelegate: AnyObject {
+    func controlledInputDidChangeText(_ input: RNControlledInput, value: String)
+    func controlledInputDidFocus(_ input: RNControlledInput)
+    func controlledInputDidBlur(_ input: RNControlledInput)
+}
+
 @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() }
     }
 
+    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 textFieldDidBeginEditing(_ textField: UITextField) {
+        delegate?.controlledInputDidFocus(self)
+    }
+
+    public func textFieldDidEndEditing(_ textField: UITextField) {
+        delegate?.controlledInputDidBlur(self)
+    }
+
+    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)
+        }
+    }
 }

package/lib/module/ControlledInputViewNativeComponent.ts

@@ -26,14 +26,14 @@ interface InputStyle {
   color?: ColorValue;
   fontSize?: Double;
   fontFamily?: string;
-  height?: Double;
   paddingTop?: Double;
   paddingBottom?: Double;
   paddingLeft?: Double;
   paddingRight?: Double;
   borderWidth?: Double;
   borderRadius?: Double;
-  borderColor?: ColorValue;
+  borderColor?: string;
+  backgroundColor?: string;
 }
 
 export interface NativeProps extends ViewProps {

package/lib/module/index.js

@@ -1,33 +1,76 @@
 "use strict";
 
 import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { Platform } from 'react-native';
+import { Platform, processColor, StyleSheet } from 'react-native';
 import ControlledInputViewNativeComponent, { Commands } from './ControlledInputViewNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ControlledInputView = /*#__PURE__*/forwardRef((props, ref) => {
+// All style props that Android handles via Compose instead of the native View layer
+const ANDROID_HANDLED_KEYS = ['color', 'fontSize', 'fontFamily', 'padding', 'paddingVertical', 'paddingHorizontal', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingEnd', 'borderWidth', 'borderRadius', 'borderColor', 'backgroundColor'];
+function resolveAndroidPadding(flat) {
+  const base = flat.padding ?? 0;
+  return {
+    paddingTop: flat.paddingTop ?? flat.paddingVertical ?? base,
+    paddingBottom: flat.paddingBottom ?? flat.paddingVertical ?? base,
+    paddingLeft: flat.paddingLeft ?? flat.paddingStart ?? flat.paddingHorizontal ?? base,
+    paddingRight: flat.paddingRight ?? flat.paddingEnd ?? flat.paddingHorizontal ?? base
+  };
+}
+export const ControlledInputView = /*#__PURE__*/forwardRef(({
+  style,
+  onTextChange,
+  ...rest
+}, ref) => {
   const nativeRef = useRef(null);
+  const flat = StyleSheet.flatten(style) ?? {};
+  let viewStyle;
+  let inputStyle;
+  if (Platform.OS === 'android') {
+    viewStyle = Object.fromEntries(Object.entries(flat).filter(([k]) => !ANDROID_HANDLED_KEYS.includes(k)));
+    const hasPadding = ANDROID_HANDLED_KEYS.slice(3, 12).some(k => flat[k] != null);
+    inputStyle = {
+      color: flat.color,
+      fontSize: flat.fontSize,
+      fontFamily: flat.fontFamily,
+      ...(hasPadding ? resolveAndroidPadding(flat) : {}),
+      borderWidth: flat.borderWidth,
+      borderRadius: flat.borderRadius,
+      borderColor: flat.borderColor,
+      backgroundColor: flat.backgroundColor
+    };
+  } else {
+    const {
+      color,
+      fontSize,
+      fontFamily,
+      ...iosRest
+    } = flat;
+    viewStyle = iosRest;
+    const hasTextStyle = color != null || fontSize != null || fontFamily != null;
+    inputStyle = hasTextStyle ? {
+      color: color != null ? processColor(color) : undefined,
+      fontSize,
+      fontFamily
+    } : undefined;
+  }
   useImperativeHandle(ref, () => ({
     blur: () => {
-      if (!nativeRef.current) {
-        return;
-      }
+      if (!nativeRef.current) return;
       if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        console.log(`[ControlledInputView] ${Platform.OS} blur command -> native`);
         Commands.blur(nativeRef.current);
       }
     },
     focus: () => {
-      if (!nativeRef.current) {
-        return;
-      }
+      if (!nativeRef.current) return;
       if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        console.log(`[ControlledInputView] ${Platform.OS} focus command -> native`);
         Commands.focus(nativeRef.current);
       }
     }
   }));
   return /*#__PURE__*/_jsx(ControlledInputViewNativeComponent, {
-    ...props,
+    ...rest,
+    style: viewStyle,
+    inputStyle: inputStyle,
+    onTextChange: onTextChange ? e => onTextChange(e.nativeEvent.value) : undefined,
     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","StyleSheet","ControlledInputViewNativeComponent","Commands","jsx","_jsx","ANDROID_HANDLED_KEYS","resolveAndroidPadding","flat","base","padding","paddingTop","paddingVertical","paddingBottom","paddingLeft","paddingStart","paddingHorizontal","paddingRight","paddingEnd","ControlledInputView","style","onTextChange","rest","ref","nativeRef","flatten","viewStyle","inputStyle","OS","Object","fromEntries","entries","filter","k","includes","hasPadding","slice","some","color","fontSize","fontFamily","borderWidth","borderRadius","borderColor","backgroundColor","iosRest","hasTextStyle","undefined","blur","current","focus","e","nativeEvent","value"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/ControlledInputViewNativeComponent.d.ts

@@ -11,14 +11,14 @@ interface InputStyle {
     color?: ColorValue;
     fontSize?: Double;
     fontFamily?: string;
-    height?: Double;
     paddingTop?: Double;
     paddingBottom?: Double;
     paddingLeft?: Double;
     paddingRight?: Double;
     borderWidth?: Double;
     borderRadius?: Double;
-    borderColor?: ColorValue;
+    borderColor?: string;
+    backgroundColor?: string;
 }
 export interface NativeProps extends ViewProps {
     value?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ControlledInputViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ControlledInputViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,oBAAoB,EACpB,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,UAAU;CAEnB;AAED,UAAU,SAAS;CAElB;AAED,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,UAAU,CAAC;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;CACvE;AAED,eAAO,MAAM,QAAQ,EAAE,cAErB,CAAC;;AAEH,wBAA0E"}
+{"version":3,"file":"ControlledInputViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ControlledInputViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,oBAAoB,EACpB,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,UAAU;CAEnB;AAED,UAAU,SAAS;CAElB;AAED,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;CACvE;AAED,eAAO,MAAM,QAAQ,EAAE,cAErB,CAAC;;AAEH,wBAA0E"}

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

@@ -3,6 +3,11 @@ export interface ControlledInputViewRef {
     blur: () => void;
     focus: () => void;
 }
-export declare const ControlledInputView: import("react").ForwardRefExoticComponent<NativeProps & import("react").RefAttributes<ControlledInputViewRef>>;
+export type ControlledInputViewProps = Omit<NativeProps, 'inputStyle' | 'onTextChange'> & {
+    onTextChange?: (value: string) => void;
+};
+export declare const ControlledInputView: import("react").ForwardRefExoticComponent<Omit<NativeProps, "inputStyle" | "onTextChange"> & {
+    onTextChange?: (value: string) => void;
+} & import("react").RefAttributes<ControlledInputViewRef>>;
 export * from './ControlledInputViewNativeComponent';
 //# sourceMappingURL=index.d.ts.map

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":"AAYA,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,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,WAAW,EACX,YAAY,GAAG,cAAc,CAC9B,GAAG;IACF,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAkCF,eAAO,MAAM,mBAAmB;mBAnCf,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;0DA2GtC,CAAC;AAEH,cAAc,sCAAsC,CAAC"}

package/package.json

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

package/src/ControlledInputViewNativeComponent.ts

@@ -26,14 +26,14 @@ interface InputStyle {
   color?: ColorValue;
   fontSize?: Double;
   fontFamily?: string;
-  height?: Double;
   paddingTop?: Double;
   paddingBottom?: Double;
   paddingLeft?: Double;
   paddingRight?: Double;
   borderWidth?: Double;
   borderRadius?: Double;
-  borderColor?: ColorValue;
+  borderColor?: string;
+  backgroundColor?: string;
 }
 
 export interface NativeProps extends ViewProps {

package/src/index.tsx

@@ -4,7 +4,12 @@ import {
   useRef,
   type ElementRef,
 } from 'react';
-import { Platform } from 'react-native';
+import {
+  Platform,
+  processColor,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
 import ControlledInputViewNativeComponent, {
   Commands,
   type NativeProps,
@@ -15,42 +20,116 @@ export interface ControlledInputViewRef {
   focus: () => void;
 }
 
+export type ControlledInputViewProps = Omit<
+  NativeProps,
+  'inputStyle' | 'onTextChange'
+> & {
+  onTextChange?: (value: string) => void;
+};
+
+// All style props that Android handles via Compose instead of the native View layer
+const ANDROID_HANDLED_KEYS = [
+  'color',
+  'fontSize',
+  'fontFamily',
+  'padding',
+  'paddingVertical',
+  'paddingHorizontal',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingEnd',
+  'borderWidth',
+  'borderRadius',
+  'borderColor',
+  'backgroundColor',
+];
+
+function resolveAndroidPadding(flat: Record<string, any>) {
+  const base = flat.padding ?? 0;
+  return {
+    paddingTop: flat.paddingTop ?? flat.paddingVertical ?? base,
+    paddingBottom: flat.paddingBottom ?? flat.paddingVertical ?? base,
+    paddingLeft:
+      flat.paddingLeft ?? flat.paddingStart ?? flat.paddingHorizontal ?? base,
+    paddingRight:
+      flat.paddingRight ?? flat.paddingEnd ?? flat.paddingHorizontal ?? base,
+  };
+}
+
 export const ControlledInputView = forwardRef<
   ControlledInputViewRef,
-  NativeProps
->((props, ref) => {
+  ControlledInputViewProps
+>(({ style, onTextChange, ...rest }, ref) => {
   const nativeRef =
     useRef<ElementRef<typeof ControlledInputViewNativeComponent>>(null);
 
+  const flat = (StyleSheet.flatten(style) ?? {}) as Record<string, any>;
+
+  let viewStyle: ViewStyle;
+  let inputStyle: Record<string, any> | undefined;
+
+  if (Platform.OS === 'android') {
+    viewStyle = Object.fromEntries(
+      Object.entries(flat).filter(([k]) => !ANDROID_HANDLED_KEYS.includes(k))
+    ) as ViewStyle;
+
+    const hasPadding = ANDROID_HANDLED_KEYS.slice(3, 12).some(
+      (k) => flat[k] != null
+    );
+
+    inputStyle = {
+      color: flat.color,
+      fontSize: flat.fontSize,
+      fontFamily: flat.fontFamily,
+      ...(hasPadding ? resolveAndroidPadding(flat) : {}),
+      borderWidth: flat.borderWidth,
+      borderRadius: flat.borderRadius,
+      borderColor: flat.borderColor,
+      backgroundColor: flat.backgroundColor,
+    };
+  } else {
+    const { color, fontSize, fontFamily, ...iosRest } = flat;
+    viewStyle = iosRest as ViewStyle;
+
+    const hasTextStyle =
+      color != null || fontSize != null || fontFamily != null;
+    inputStyle = hasTextStyle
+      ? {
+          color: color != null ? processColor(color) : undefined,
+          fontSize,
+          fontFamily,
+        }
+      : undefined;
+  }
+
   useImperativeHandle(ref, () => ({
     blur: () => {
-      if (!nativeRef.current) {
-        return;
-      }
-
+      if (!nativeRef.current) return;
       if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        console.log(
-          `[ControlledInputView] ${Platform.OS} blur command -> native`
-        );
         Commands.blur(nativeRef.current);
       }
     },
     focus: () => {
-      if (!nativeRef.current) {
-        return;
-      }
-
+      if (!nativeRef.current) return;
       if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        console.log(
-          `[ControlledInputView] ${Platform.OS} focus command -> native`
-        );
         Commands.focus(nativeRef.current);
       }
     },
   }));
 
   return (
-    <ControlledInputViewNativeComponent {...props} ref={nativeRef as any} />
+    <ControlledInputViewNativeComponent
+      {...rest}
+      style={viewStyle}
+      inputStyle={inputStyle as NativeProps['inputStyle']}
+      onTextChange={
+        onTextChange ? (e) => onTextChange(e.nativeEvent.value) : undefined
+      }
+      ref={nativeRef as any}
+    />
   );
 });