react-native-controlled-input 0.8.0 → 0.9.1

package/README.md

@@ -1,32 +1,95 @@
 # react-native-controlled-input
 
-React Native Controlled Inputative Controlled Input
+A controlled React Native input that lets you format and constrain the value exactly how you want in JS, while keeping the displayed text in sync without invalid characters flashing in the field.
 
-## 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

@@ -52,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];
 }
@@ -125,4 +101,24 @@ using namespace facebook::react;
     });
 }
 
+- (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

@@ -2,6 +2,8 @@ import UIKit
 
 @objc public protocol RNControlledInputDelegate: AnyObject {
     func controlledInputDidChangeText(_ input: RNControlledInput, value: String)
+    func controlledInputDidFocus(_ input: RNControlledInput)
+    func controlledInputDidBlur(_ input: RNControlledInput)
 }
 
 @objc(RNControlledInput)
@@ -30,26 +32,6 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         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() {
@@ -85,6 +67,14 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         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 }
@@ -102,19 +92,4 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
             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/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,41 +1,76 @@
 "use strict";
 
 import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { Platform, processColor } 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 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;
+  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, {
-    ...nativeProps,
+    ...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","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":[]}
+{"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,gHAyD9B,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.8.0",
+  "version": "0.9.1",
   "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, processColor } from 'react-native';
+import {
+  Platform,
+  processColor,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
 import ControlledInputViewNativeComponent, {
   Commands,
   type NativeProps,
@@ -15,52 +20,101 @@ 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 nativeProps =
-    Platform.OS === 'ios' && props.inputStyle
+
+  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
       ? {
-          ...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),
-          },
+          color: color != null ? processColor(color) : undefined,
+          fontSize,
+          fontFamily,
         }
-      : props;
+      : 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);
       }
     },
@@ -68,7 +122,12 @@ export const ControlledInputView = forwardRef<
 
   return (
     <ControlledInputViewNativeComponent
-      {...nativeProps}
+      {...rest}
+      style={viewStyle}
+      inputStyle={inputStyle as NativeProps['inputStyle']}
+      onTextChange={
+        onTextChange ? (e) => onTextChange(e.nativeEvent.value) : undefined
+      }
       ref={nativeRef as any}
     />
   );