react-native-controlled-input 0.10.0 → 0.12.0

package/README.md

@@ -68,9 +68,15 @@ inputRef.current?.blur();
 |------|------|-------------|
 | `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. |
+| `onFocus` | `() => void` | Called when the text input is focused. |
+| `onBlur` | `() => void` | Called when the text input is blurred. |
+| `autoComplete` | `string` | Specifies autocomplete hints for the system. Same as React Native [`TextInput`](https://reactnative.dev/docs/textinput#autocomplete). |
+| `autoCapitalize` | `string` | Can be `none`, `sentences`, `words`, `characters`. Same as React Native [`TextInput`](https://reactnative.dev/docs/textinput#autocapitalize). |
+| `keyboardType` | `string` | Determines which keyboard to open, e.g. `numeric`. Same as React Native [`TextInput`](https://reactnative.dev/docs/textinput#keyboardtype). |
+| `returnKeyType` | `string` | Determines how the return key should look. Same as React Native [`TextInput`](https://reactnative.dev/docs/textinput#returnkeytype). |
+| `placeholder` | `string` | The string that will be rendered before text input has been entered. |
+| `placeholderTextColor` | `ColorValue` | The text color of the placeholder string. |
+| `selectionColor` | `ColorValue` | The highlight and cursor color of the text input. |
 
 ## Style support
 

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

@@ -95,6 +95,9 @@ class ControlledInputView : LinearLayout {
           value = value,
           inputStyle = viewModel.inputStyle,
           autoComplete = viewModel.autoComplete,
+          placeholder = viewModel.placeholder,
+          placeholderTextColor = viewModel.placeholderTextColor,
+          selectionColor = viewModel.selectionColor,
           autoCapitalize = viewModel.autoCapitalize,
           keyboardType = viewModel.keyboardType,
           returnKeyType = viewModel.returnKeyType,

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

@@ -38,6 +38,21 @@ class ControlledInputViewManager : SimpleViewManager<ControlledInputView>(),
     }
   }
 
+  @ReactProp(name = "placeholder")
+  override fun setPlaceholder(view: ControlledInputView, placeholder: String?) {
+    view.viewModel.setPlaceholder(placeholder)
+  }
+
+  @ReactProp(name = "placeholderTextColor", customType = "Color")
+  override fun setPlaceholderTextColor(view: ControlledInputView, placeholderTextColor: Int?) {
+    view.viewModel.setPlaceholderTextColor(placeholderTextColor)
+  }
+
+  @ReactProp(name = "selectionColor", customType = "Color")
+  override fun setSelectionColor(view: ControlledInputView, selectionColor: Int?) {
+    view.viewModel.setSelectionColor(selectionColor)
+  }
+
   @ReactProp(name = "autoComplete")
   override fun setAutoComplete(view: ControlledInputView, autoComplete: String?) {
     view.viewModel.setAutoCompleteWithAutofill(view, autoComplete)

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

@@ -26,6 +26,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import android.graphics.Typeface
+import androidx.compose.foundation.text.selection.LocalTextSelectionColors
+import androidx.compose.foundation.text.selection.TextSelectionColors
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
@@ -64,6 +67,9 @@ fun JetpackComposeView(
   value: String,
   inputStyle: StateFlow<InputStyle?>,
   autoComplete: StateFlow<String?>,
+  placeholder: StateFlow<String?>,
+  placeholderTextColor: StateFlow<Int?>,
+  selectionColor: StateFlow<Int?>,
   autoCapitalize: StateFlow<String?>,
   keyboardType: StateFlow<String?>,
   returnKeyType: StateFlow<String?>,
@@ -78,6 +84,9 @@ fun JetpackComposeView(
   val autoCapitalizeValue by autoCapitalize.collectAsState()
   val returnKeyTypeValue by returnKeyType.collectAsState()
   val autoCompleteValue by autoComplete.collectAsState()
+  val placeholderValue by placeholder.collectAsState()
+  val placeholderTextColorValue by placeholderTextColor.collectAsState()
+  val selectionColorValue by selectionColor.collectAsState()
   val interactionSource = remember { MutableInteractionSource() }
 
   val autofill = LocalAutofill.current
@@ -137,51 +146,74 @@ fun JetpackComposeView(
     ?: Color.Transparent
   val shape = RoundedCornerShape(borderRadius)
 
-  Box(
-    modifier = Modifier
-      .fillMaxSize()
-      .clip(shape)
-      .background(backgroundColor)
-      .border(borderWidth, borderColor, shape),
-  ) {
-    BasicTextField(
-      state,
-      inputTransformation = InputTransformation.byValue { _, proposed ->
-        onTextChange(proposed.toString())
-        proposed
-      },
+  val cursorColor = selectionColorValue?.let { Color(it) } ?: textColor
+  val textSelectionColors = remember(cursorColor) {
+    TextSelectionColors(
+      handleColor = cursorColor,
+      backgroundColor = cursorColor.copy(alpha = 0.4f)
+    )
+  }
+
+  CompositionLocalProvider(LocalTextSelectionColors provides textSelectionColors) {
+    Box(
       modifier = Modifier
         .fillMaxSize()
-        .padding(
-          start = paddingLeft,
-          top = paddingTop,
-          end = paddingRight,
-          bottom = paddingBottom,
-        )
-        .onGloballyPositioned {
-          autofillNode.boundingBox = it.boundsInWindow()
-        }
-        .focusRequester(focusRequester),
-      textStyle = TextStyle(
-        color = textColor,
-        fontSize = fontSize,
-        fontFamily = fontFamily,
-      ),
-      keyboardOptions = KeyboardOptions(
-        capitalization = toComposeCapitalization(autoCapitalizeValue),
-        keyboardType = toComposeKeyboardType(keyboardTypeValue),
-        imeAction = toComposeImeAction(returnKeyTypeValue),
-      ),
-      interactionSource = interactionSource,
-      decorator = { innerTextField ->
-        Box(
-          modifier = Modifier.fillMaxSize(),
-          contentAlignment = Alignment.CenterStart,
-        ) {
-          innerTextField()
-        }
-      },
-    )
+        .clip(shape)
+        .background(backgroundColor)
+        .border(borderWidth, borderColor, shape),
+    ) {
+      BasicTextField(
+        state,
+        inputTransformation = InputTransformation.byValue { _, proposed ->
+          onTextChange(proposed.toString())
+          proposed
+        },
+        modifier = Modifier
+          .fillMaxSize()
+          .padding(
+            start = paddingLeft,
+            top = paddingTop,
+            end = paddingRight,
+            bottom = paddingBottom,
+          )
+          .onGloballyPositioned {
+            autofillNode.boundingBox = it.boundsInWindow()
+          }
+          .focusRequester(focusRequester),
+        textStyle = TextStyle(
+          color = textColor,
+          fontSize = fontSize,
+          fontFamily = fontFamily,
+        ),
+        keyboardOptions = KeyboardOptions(
+          capitalization = toComposeCapitalization(autoCapitalizeValue),
+          keyboardType = toComposeKeyboardType(keyboardTypeValue),
+          imeAction = toComposeImeAction(returnKeyTypeValue),
+        ),
+        interactionSource = interactionSource,
+        cursorBrush = androidx.compose.ui.graphics.SolidColor(cursorColor),
+        decorator = { innerTextField ->
+          Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            if (state.text.isEmpty() && !placeholderValue.isNullOrEmpty()) {
+              val finalPlaceholderColor = placeholderTextColorValue?.let { Color(it) }
+                ?: textColor.copy(alpha = 0.5f)
+              androidx.compose.material3.Text(
+                text = placeholderValue!!,
+                style = TextStyle(
+                  color = finalPlaceholderColor,
+                  fontSize = fontSize,
+                  fontFamily = fontFamily,
+                )
+              )
+            }
+            innerTextField()
+          }
+        },
+      )
+    }
   }
 }
 

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

@@ -10,6 +10,9 @@ class JetpackComposeViewModel : ViewModel() {
   private val _value = MutableStateFlow("")
   private val _inputStyle = MutableStateFlow<InputStyle?>(null)
   private val _autoComplete = MutableStateFlow<String?>(null)
+  private val _placeholder = MutableStateFlow<String?>(null)
+  private val _placeholderTextColor = MutableStateFlow<Int?>(null)
+  private val _selectionColor = MutableStateFlow<Int?>(null)
   private val _autoCapitalize = MutableStateFlow<String?>(null)
   private val _keyboardType = MutableStateFlow<String?>(null)
   private val _returnKeyType = MutableStateFlow<String?>(null)
@@ -17,6 +20,9 @@ class JetpackComposeViewModel : ViewModel() {
   val value: StateFlow<String> get() = _value
   val inputStyle: StateFlow<InputStyle?> get() = _inputStyle
   val autoComplete: StateFlow<String?> get() = _autoComplete
+  val placeholder: StateFlow<String?> get() = _placeholder
+  val placeholderTextColor: StateFlow<Int?> get() = _placeholderTextColor
+  val selectionColor: StateFlow<Int?> get() = _selectionColor
   val autoCapitalize: StateFlow<String?> get() = _autoCapitalize
   val keyboardType: StateFlow<String?> get() = _keyboardType
   val returnKeyType: StateFlow<String?> get() = _returnKeyType
@@ -33,6 +39,18 @@ class JetpackComposeViewModel : ViewModel() {
     _autoComplete.value = newValue
   }
 
+  fun setPlaceholder(newValue: String?) {
+    _placeholder.value = newValue
+  }
+
+  fun setPlaceholderTextColor(newValue: Int?) {
+    _placeholderTextColor.value = newValue
+  }
+
+  fun setSelectionColor(newValue: Int?) {
+    _selectionColor.value = newValue
+  }
+
   fun setAutoCompleteWithAutofill(hostView: View, newValue: String?) {
     setAutoComplete(newValue)
 

package/ios/ControlledInputView.mm

@@ -68,6 +68,18 @@ using namespace facebook::react;
         _inputView.autoCapitalize = newViewProps.autoCapitalize.empty() ? nil : [NSString stringWithUTF8String:newViewProps.autoCapitalize.c_str()];
     }
 
+    if (oldViewProps.placeholder != newViewProps.placeholder) {
+        _inputView.placeholder = newViewProps.placeholder.empty() ? nil : [NSString stringWithUTF8String:newViewProps.placeholder.c_str()];
+    }
+
+    if (oldViewProps.placeholderTextColor != newViewProps.placeholderTextColor) {
+        _inputView.placeholderTextColor = RCTUIColorFromSharedColor(newViewProps.placeholderTextColor);
+    }
+
+    if (oldViewProps.selectionColor != newViewProps.selectionColor) {
+        _inputView.selectionColor = RCTUIColorFromSharedColor(newViewProps.selectionColor);
+    }
+
     const auto &style = newViewProps.inputStyle;
     const auto &oldStyle = oldViewProps.inputStyle;
 

package/ios/RNControlledInput.swift

@@ -48,6 +48,18 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         didSet { applyReturnKeyType() }
     }
 
+    @objc public var placeholder: String? {
+        didSet { applyPlaceholder() }
+    }
+
+    @objc public var placeholderTextColor: UIColor? {
+        didSet { applyPlaceholder() }
+    }
+
+    @objc public var selectionColor: UIColor? {
+        didSet { textField.tintColor = selectionColor }
+    }
+
     public override var canBecomeFirstResponder: Bool { true }
 
     @objc public func focus() {
@@ -71,6 +83,7 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         textField.translatesAutoresizingMaskIntoConstraints = false
         textField.borderStyle = .none
         textField.delegate = self
+        textField.textColor = textColor
         addSubview(textField)
 
         NSLayoutConstraint.activate([
@@ -85,6 +98,25 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         applyAutoCapitalize()
         applyKeyboardType()
         applyReturnKeyType()
+        applyPlaceholder()
+    }
+
+    private func applyPlaceholder() {
+        guard let placeholder = placeholder else {
+            textField.attributedPlaceholder = nil
+            return
+        }
+
+        var attributes: [NSAttributedString.Key: Any] = [:]
+        if let placeholderTextColor = placeholderTextColor {
+            attributes[.foregroundColor] = placeholderTextColor
+        }
+
+        textField.attributedPlaceholder = NSAttributedString(string: placeholder, attributes: attributes)
+
+        if let color = textColor {
+            textField.textColor = color
+        }
     }
 
     public func textFieldDidBeginEditing(_ textField: UITextField) {

package/lib/module/ControlledInputViewNativeComponent.ts

@@ -38,6 +38,9 @@ export interface InputStyle {
 
 export interface NativeProps extends ViewProps {
   value?: string;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  selectionColor?: ColorValue;
   autoComplete?: string;
   autoCapitalize?: string;
   keyboardType?: string;

package/lib/module/index.js

@@ -1,8 +1,11 @@
 "use strict";
 
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { Platform, processColor, StyleSheet } from 'react-native';
-import ControlledInputViewNativeComponent, { Commands } from './ControlledInputViewNativeComponent';
+// TextInputState is not exported from the public react-native package.
+// eslint-disable-next-line @react-native/no-deep-imports -- integrate with ScrollView keyboard dismissal
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
+import ControlledInputViewNativeComponent from './ControlledInputViewNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
 // All style props that Android handles via Compose instead of the native View layer
 const androidComposeHandledKeys = ['color', 'fontSize', 'fontFamily', 'padding', 'paddingVertical', 'paddingHorizontal', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'borderWidth', 'borderRadius', 'borderColor', 'backgroundColor'];
@@ -18,9 +21,30 @@ function resolveAndroidComposeViewPadding(flat) {
 export const ControlledInputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   style,
   onTextChange,
+  onFocus,
+  onBlur,
+  selectionColor,
+  placeholderTextColor,
   ...rest
 }, ref) => {
   const nativeRef = useRef(null);
+  const isNativePlatform = Platform.OS === 'ios' || Platform.OS === 'android';
+  useLayoutEffect(() => {
+    if (!isNativePlatform) {
+      return;
+    }
+    const node = nativeRef.current;
+    if (node == null) {
+      return;
+    }
+    TextInputState.registerInput(node);
+    return () => {
+      TextInputState.unregisterInput(node);
+      if (TextInputState.currentlyFocusedInput() === node) {
+        TextInputState.blurTextInput(node);
+      }
+    };
+  }, [isNativePlatform]);
   const flattenedStyle = StyleSheet.flatten(style) ?? {};
   let viewStyle;
   let inputStyle;
@@ -57,25 +81,37 @@ export const ControlledInputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
       onTextChange(e.nativeEvent.value);
     }
   };
+  const handleFocus = e => {
+    if (isNativePlatform) {
+      TextInputState.focusInput(nativeRef.current);
+    }
+    onFocus?.(e);
+  };
+  const handleBlur = e => {
+    if (isNativePlatform) {
+      TextInputState.blurInput(nativeRef.current);
+    }
+    onBlur?.(e);
+  };
   useImperativeHandle(ref, () => ({
     blur: () => {
-      if (!nativeRef.current) return;
-      if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        Commands.blur(nativeRef.current);
-      }
+      if (!nativeRef.current || !isNativePlatform) return;
+      TextInputState.blurTextInput(nativeRef.current);
     },
     focus: () => {
-      if (!nativeRef.current) return;
-      if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        Commands.focus(nativeRef.current);
-      }
+      if (!nativeRef.current || !isNativePlatform) return;
+      TextInputState.focusTextInput(nativeRef.current);
     }
   }));
   return /*#__PURE__*/_jsx(ControlledInputViewNativeComponent, {
     ...rest,
+    placeholderTextColor: placeholderTextColor,
+    selectionColor: selectionColor,
     style: viewStyle,
     inputStyle: inputStyle,
     onTextChange: handleTextChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     ref: nativeRef
   });
 }));

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","memo","useImperativeHandle","useRef","Platform","processColor","StyleSheet","ControlledInputViewNativeComponent","Commands","jsx","_jsx","androidComposeHandledKeys","resolveAndroidComposeViewPadding","flat","padding","paddingTop","paddingVertical","paddingBottom","paddingLeft","paddingHorizontal","paddingRight","ControlledInputView","style","onTextChange","rest","ref","nativeRef","flattenedStyle","flatten","viewStyle","inputStyle","OS","Object","fromEntries","entries","filter","k","includes","hasPadding","some","v","color","fontSize","fontFamily","borderWidth","borderRadius","borderColor","backgroundColor","iosViewStyle","hasTextStyle","undefined","handleTextChange","e","nativeEvent","value","blur","current","focus","displayName"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,MAAM,QAED,OAAO;AACd,SACEC,QAAQ,EACRC,YAAY,EACZC,UAAU,QAIL,cAAc;AACrB,OAAOC,kCAAkC,IACvCC,QAAQ,QAGH,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAoB9C;AACA,MAAMC,yBAAyB,GAAG,CAChC,OAAO,EACP,UAAU,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,cAAc,EACd,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,CAClB;AAED,SAASC,gCAAgCA,CAACC,IAAyB,EAAE;EACnE,MAAMC,OAAO,GAAGD,IAAI,CAACC,OAAO,IAAI,CAAC;EAEjC,OAAO;IACLC,UAAU,EAAEF,IAAI,CAACE,UAAU,IAAIF,IAAI,CAACG,eAAe,IAAIF,OAAO;IAC9DG,aAAa,EAAEJ,IAAI,CAACI,aAAa,IAAIJ,IAAI,CAACG,eAAe,IAAIF,OAAO;IACpEI,WAAW,EAAEL,IAAI,CAACK,WAAW,IAAIL,IAAI,CAACM,iBAAiB,IAAIL,OAAO;IAClEM,YAAY,EAAEP,IAAI,CAACO,YAAY,IAAIP,IAAI,CAACM,iBAAiB,IAAIL;EAC/D,CAAC;AACH;AAEA,OAAO,MAAMO,mBAAmB,gBAAGpB,IAAI,cACrCD,UAAU,CACR,CAAC;EAAEsB,KAAK;EAAEC,YAAY;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACzC,MAAMC,SAAS,GACbvB,MAAM,CAAwD,IAAI,CAAC;EAErE,MAAMwB,cAAc,GAAIrB,UAAU,CAACsB,OAAO,CAACN,KAAK,CAAC,IAAI,CAAC,CAAe;EAErE,IAAIO,SAAoB;EACxB,IAAIC,UAA2C;EAE/C,IAAI1B,QAAQ,CAAC2B,EAAE,KAAK,SAAS,EAAE;IAC7BF,SAAS,GAAGG,MAAM,CAACC,WAAW,CAC5BD,MAAM,CAACE,OAAO,CAACP,cAAc,CAAC,CAACQ,MAAM,CACnC,CAAC,CAACC,CAAC,CAAC,KAAK,CAACzB,yBAAyB,CAAC0B,QAAQ,CAACD,CAAC,CAChD,CACF,CAAC;IAED,MAAME,UAAU,GAAGN,MAAM,CAACE,OAAO,CAACP,cAAc,CAAC,CAACY,IAAI,CACpD,CAAC,CAACH,CAAC,EAAEI,CAAC,CAAC,KAAKJ,CAAC,CAACC,QAAQ,CAAC,SAAS,CAAC,IAAIG,CAAC,IAAI,IAC5C,CAAC;IAEDV,UAAU,GAAG;MACXW,KAAK,EAAEd,cAAc,CAACc,KAAK;MAC3BC,QAAQ,EAAEf,cAAc,CAACe,QAAQ;MACjCC,UAAU,EAAEhB,cAAc,CAACgB,UAAU;MACrC,IAAIL,UAAU,GACV1B,gCAAgC,CAACe,cAAc,CAAC,GAChD,CAAC,CAAC,CAAC;MACPiB,WAAW,EAAEjB,cAAc,CAACiB,WAAW;MACvCC,YAAY,EAAElB,cAAc,CAACkB,YAAY;MACzCC,WAAW,EAAEnB,cAAc,CAACmB,WAAW;MACvCC,eAAe,EAAEpB,cAAc,CAACoB;IAClC,CAAC;EACH,CAAC,MAAM;IACL,MAAM;MAAEN,KAAK;MAAEC,QAAQ;MAAEC,UAAU;MAAE,GAAGK;IAAa,CAAC,GAAGrB,cAAc;IACvEE,SAAS,GAAGmB,YAAY;IAExB,MAAMC,YAAY,GAChBR,KAAK,IAAI,IAAI,IAAIC,QAAQ,IAAI,IAAI,IAAIC,UAAU,IAAI,IAAI;IACzDb,UAAU,GAAGmB,YAAY,GACrB;MACER,KAAK,EAAEA,KAAK,IAAI,IAAI,GAAGpC,YAAY,CAACoC,KAAK,CAAC,GAAGS,SAAS;MACtDR,QAAQ;MACRC;IACF,CAAC,GACDO,SAAS;EACf;EAEA,MAAMC,gBAAgB,GAAIC,CAEzB,IAAK;IACJ,IAAI7B,YAAY,EAAE;MAChBA,YAAY,CAAC6B,CAAC,CAACC,WAAW,CAACC,KAAK,CAAC;IACnC;EACF,CAAC;EAEDpD,mBAAmB,CAACuB,GAAG,EAAE,OAAO;IAC9B8B,IAAI,EAAEA,CAAA,KAAM;MACV,IAAI,CAAC7B,SAAS,CAAC8B,OAAO,EAAE;MACxB,IAAIpD,QAAQ,CAAC2B,EAAE,KAAK,KAAK,IAAI3B,QAAQ,CAAC2B,EAAE,KAAK,SAAS,EAAE;QACtDvB,QAAQ,CAAC+C,IAAI,CAAC7B,SAAS,CAAC8B,OAAO,CAAC;MAClC;IACF,CAAC;IACDC,KAAK,EAAEA,CAAA,KAAM;MACX,IAAI,CAAC/B,SAAS,CAAC8B,OAAO,EAAE;MACxB,IAAIpD,QAAQ,CAAC2B,EAAE,KAAK,KAAK,IAAI3B,QAAQ,CAAC2B,EAAE,KAAK,SAAS,EAAE;QACtDvB,QAAQ,CAACiD,KAAK,CAAC/B,SAAS,CAAC8B,OAAO,CAAC;MACnC;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACE9C,IAAA,CAACH,kCAAkC;IAAA,GAC7BiB,IAAI;IACRF,KAAK,EAAEO,SAAU;IACjBC,UAAU,EAAEA,UAAW;IACvBP,YAAY,EAAE4B,gBAAiB;IAC/B1B,GAAG,EAAEC;EAAU,CAChB,CAAC;AAEN,CACF,CACF,CAAC;AAEDL,mBAAmB,CAACqC,WAAW,GAAG,qBAAqB;AAEvD,cAAc,sCAAsC","ignoreList":[]}
+{"version":3,"names":["forwardRef","memo","useImperativeHandle","useLayoutEffect","useRef","Platform","processColor","StyleSheet","TextInputState","ControlledInputViewNativeComponent","jsx","_jsx","androidComposeHandledKeys","resolveAndroidComposeViewPadding","flat","padding","paddingTop","paddingVertical","paddingBottom","paddingLeft","paddingHorizontal","paddingRight","ControlledInputView","style","onTextChange","onFocus","onBlur","selectionColor","placeholderTextColor","rest","ref","nativeRef","isNativePlatform","OS","node","current","registerInput","unregisterInput","currentlyFocusedInput","blurTextInput","flattenedStyle","flatten","viewStyle","inputStyle","Object","fromEntries","entries","filter","k","includes","hasPadding","some","v","color","fontSize","fontFamily","borderWidth","borderRadius","borderColor","backgroundColor","iosViewStyle","hasTextStyle","undefined","handleTextChange","e","nativeEvent","value","handleFocus","focusInput","handleBlur","blurInput","blur","focus","focusTextInput","displayName"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -22,6 +22,9 @@ export interface InputStyle {
 }
 export interface NativeProps extends ViewProps {
     value?: string;
+    placeholder?: string;
+    placeholderTextColor?: ColorValue;
+    selectionColor?: ColorValue;
     autoComplete?: string;
     autoCapitalize?: string;
     keyboardType?: 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,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,oBAAoB,EACpB,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;CAE1B;AAED,MAAM,WAAW,SAAS;CAEzB;AAED,MAAM,WAAW,UAAU;IACzB,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,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,oBAAoB,EACpB,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;CAE1B;AAED,MAAM,WAAW,SAAS;CAEzB;AAED,MAAM,WAAW,UAAU;IACzB,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,UAAU,CAAC;IAClC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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

@@ -4,11 +4,11 @@ export interface ControlledInputViewRef {
     blur: () => void;
     focus: () => void;
 }
-type ForwardedTextInputProps = Pick<TextInputProps, 'autoComplete' | 'autoCapitalize' | 'keyboardType' | 'returnKeyType'>;
+type ForwardedTextInputProps = Pick<TextInputProps, 'autoComplete' | 'autoCapitalize' | 'keyboardType' | 'returnKeyType' | 'placeholder' | 'placeholderTextColor' | 'selectionColor'>;
 export type ControlledInputViewProps = Omit<NativeProps, 'inputStyle' | 'onTextChange' | keyof ForwardedTextInputProps> & ForwardedTextInputProps & {
     onTextChange?: (value: string) => void;
 };
-export declare const ControlledInputView: import("react").NamedExoticComponent<Omit<NativeProps, "autoComplete" | "autoCapitalize" | "keyboardType" | "returnKeyType" | "inputStyle" | "onTextChange"> & ForwardedTextInputProps & {
+export declare const ControlledInputView: import("react").NamedExoticComponent<Omit<NativeProps, "placeholder" | "placeholderTextColor" | "selectionColor" | "autoComplete" | "autoCapitalize" | "keyboardType" | "returnKeyType" | "inputStyle" | "onTextChange"> & ForwardedTextInputProps & {
     onTextChange?: (value: string) => void;
 } & import("react").RefAttributes<ControlledInputViewRef>>;
 export * from './ControlledInputViewNativeComponent';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,cAAc,EAGpB,MAAM,cAAc,CAAC;AACtB,OAA2C,EAEzC,KAAK,WAAW,EAEjB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,uBAAuB,GAAG,IAAI,CACjC,cAAc,EACd,cAAc,GAAG,gBAAgB,GAAG,cAAc,GAAG,eAAe,CACrE,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,WAAW,EACX,YAAY,GAAG,cAAc,GAAG,MAAM,uBAAuB,CAC9D,GACC,uBAAuB,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AA+BJ,eAAO,MAAM,mBAAmB;mBAhCb,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;0DAmHzC,CAAC;AAIF,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAIL,KAAK,cAAc,EAGpB,MAAM,cAAc,CAAC;AAItB,OAA2C,EACzC,KAAK,WAAW,EAEjB,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,KAAK,uBAAuB,GAAG,IAAI,CACjC,cAAc,EACZ,cAAc,GACd,gBAAgB,GAChB,cAAc,GACd,eAAe,GACf,aAAa,GACb,sBAAsB,GACtB,gBAAgB,CACnB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,WAAW,EACX,YAAY,GAAG,cAAc,GAAG,MAAM,uBAAuB,CAC9D,GACC,uBAAuB,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAsCJ,eAAO,MAAM,mBAAmB;mBAvCb,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;0DA0KzC,CAAC;AAIF,cAAc,sCAAsC,CAAC"}

package/package.json

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

package/src/ControlledInputViewNativeComponent.ts

@@ -38,6 +38,9 @@ export interface InputStyle {
 
 export interface NativeProps extends ViewProps {
   value?: string;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  selectionColor?: ColorValue;
   autoComplete?: string;
   autoCapitalize?: string;
   keyboardType?: string;

package/src/index.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   memo,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   type ElementRef,
 } from 'react';
@@ -13,8 +14,10 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
+// TextInputState is not exported from the public react-native package.
+// eslint-disable-next-line @react-native/no-deep-imports -- integrate with ScrollView keyboard dismissal
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
 import ControlledInputViewNativeComponent, {
-  Commands,
   type NativeProps,
   type TextChangeEvent,
 } from './ControlledInputViewNativeComponent';
@@ -26,7 +29,13 @@ export interface ControlledInputViewRef {
 
 type ForwardedTextInputProps = Pick<
   TextInputProps,
-  'autoComplete' | 'autoCapitalize' | 'keyboardType' | 'returnKeyType'
+  | 'autoComplete'
+  | 'autoCapitalize'
+  | 'keyboardType'
+  | 'returnKeyType'
+  | 'placeholder'
+  | 'placeholderTextColor'
+  | 'selectionColor'
 >;
 
 export type ControlledInputViewProps = Omit<
@@ -37,6 +46,13 @@ export type ControlledInputViewProps = Omit<
     onTextChange?: (value: string) => void;
   };
 
+type ControlledInputFocusEvent = Parameters<
+  NonNullable<NativeProps['onFocus']>
+>[0];
+type ControlledInputBlurEvent = Parameters<
+  NonNullable<NativeProps['onBlur']>
+>[0];
+
 // All style props that Android handles via Compose instead of the native View layer
 const androidComposeHandledKeys = [
   'color',
@@ -68,10 +84,44 @@ function resolveAndroidComposeViewPadding(flat: Record<string, any>) {
 
 export const ControlledInputView = memo(
   forwardRef<ControlledInputViewRef, ControlledInputViewProps>(
-    ({ style, onTextChange, ...rest }, ref) => {
+    (
+      {
+        style,
+        onTextChange,
+        onFocus,
+        onBlur,
+        selectionColor,
+        placeholderTextColor,
+        ...rest
+      },
+      ref
+    ) => {
       const nativeRef =
         useRef<ElementRef<typeof ControlledInputViewNativeComponent>>(null);
 
+      const isNativePlatform =
+        Platform.OS === 'ios' || Platform.OS === 'android';
+
+      useLayoutEffect(() => {
+        if (!isNativePlatform) {
+          return;
+        }
+
+        const node = nativeRef.current;
+        if (node == null) {
+          return;
+        }
+
+        TextInputState.registerInput(node);
+
+        return () => {
+          TextInputState.unregisterInput(node);
+          if (TextInputState.currentlyFocusedInput() === node) {
+            TextInputState.blurTextInput(node);
+          }
+        };
+      }, [isNativePlatform]);
+
       const flattenedStyle = (StyleSheet.flatten(style) ?? {}) as TextStyle;
 
       let viewStyle: ViewStyle;
@@ -123,27 +173,41 @@ export const ControlledInputView = memo(
         }
       };
 
+      const handleFocus = (e: ControlledInputFocusEvent) => {
+        if (isNativePlatform) {
+          TextInputState.focusInput(nativeRef.current);
+        }
+        onFocus?.(e);
+      };
+
+      const handleBlur = (e: ControlledInputBlurEvent) => {
+        if (isNativePlatform) {
+          TextInputState.blurInput(nativeRef.current);
+        }
+        onBlur?.(e);
+      };
+
       useImperativeHandle(ref, () => ({
         blur: () => {
-          if (!nativeRef.current) return;
-          if (Platform.OS === 'ios' || Platform.OS === 'android') {
-            Commands.blur(nativeRef.current);
-          }
+          if (!nativeRef.current || !isNativePlatform) return;
+          TextInputState.blurTextInput(nativeRef.current);
         },
         focus: () => {
-          if (!nativeRef.current) return;
-          if (Platform.OS === 'ios' || Platform.OS === 'android') {
-            Commands.focus(nativeRef.current);
-          }
+          if (!nativeRef.current || !isNativePlatform) return;
+          TextInputState.focusTextInput(nativeRef.current);
         },
       }));
 
       return (
         <ControlledInputViewNativeComponent
           {...rest}
+          placeholderTextColor={placeholderTextColor}
+          selectionColor={selectionColor}
           style={viewStyle}
           inputStyle={inputStyle}
           onTextChange={handleTextChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           ref={nativeRef}
         />
       );

package/src/react-native-codegen.d.ts

@@ -19,3 +19,19 @@ declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
     componentName: string
   ): HostComponent<T>;
 }
+
+declare module 'react-native/Libraries/Components/TextInput/TextInputState' {
+  import type { HostInstance } from 'react-native';
+
+  const TextInputState: {
+    registerInput(textField: HostInstance): void;
+    unregisterInput(textField: HostInstance): void;
+    focusInput(textField: HostInstance | null): void;
+    blurInput(textField: HostInstance | null): void;
+    focusTextInput(textField: HostInstance | null): void;
+    blurTextInput(textField: HostInstance | null): void;
+    currentlyFocusedInput(): HostInstance | null;
+  };
+
+  export default TextInputState;
+}