react-native-controlled-input 0.10.0 → 0.11.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

@@ -18,6 +18,8 @@ function resolveAndroidComposeViewPadding(flat) {
 export const ControlledInputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   style,
   onTextChange,
+  selectionColor,
+  placeholderTextColor,
   ...rest
 }, ref) => {
   const nativeRef = useRef(null);
@@ -73,6 +75,8 @@ export const ControlledInputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   }));
   return /*#__PURE__*/_jsx(ControlledInputViewNativeComponent, {
     ...rest,
+    placeholderTextColor: placeholderTextColor,
+    selectionColor: selectionColor,
     style: viewStyle,
     inputStyle: inputStyle,
     onTextChange: handleTextChange,

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":"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","ignoreList":[]}
+{"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","selectionColor","placeholderTextColor","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":"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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":"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,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;AA+BJ,eAAO,MAAM,mBAAmB;mBAhCb,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;0DAwHzC,CAAC;AAIF,cAAc,sCAAsC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-controlled-input",
-  "version": "0.10.0",
+  "version": "0.11.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

@@ -26,7 +26,13 @@ export interface ControlledInputViewRef {
 
 type ForwardedTextInputProps = Pick<
   TextInputProps,
-  'autoComplete' | 'autoCapitalize' | 'keyboardType' | 'returnKeyType'
+  | 'autoComplete'
+  | 'autoCapitalize'
+  | 'keyboardType'
+  | 'returnKeyType'
+  | 'placeholder'
+  | 'placeholderTextColor'
+  | 'selectionColor'
 >;
 
 export type ControlledInputViewProps = Omit<
@@ -68,7 +74,10 @@ function resolveAndroidComposeViewPadding(flat: Record<string, any>) {
 
 export const ControlledInputView = memo(
   forwardRef<ControlledInputViewRef, ControlledInputViewProps>(
-    ({ style, onTextChange, ...rest }, ref) => {
+    (
+      { style, onTextChange, selectionColor, placeholderTextColor, ...rest },
+      ref
+    ) => {
       const nativeRef =
         useRef<ElementRef<typeof ControlledInputViewNativeComponent>>(null);
 
@@ -141,6 +150,8 @@ export const ControlledInputView = memo(
       return (
         <ControlledInputViewNativeComponent
           {...rest}
+          placeholderTextColor={placeholderTextColor}
+          selectionColor={selectionColor}
           style={viewStyle}
           inputStyle={inputStyle}
           onTextChange={handleTextChange}