react-native-controlled-input 0.9.1 → 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

@@ -1,11 +1,9 @@
 package com.controlledinput
 
-import android.annotation.SuppressLint
 import android.content.Context
 import android.util.AttributeSet
 import android.view.inputmethod.InputMethodManager
 import android.widget.LinearLayout
-import androidx.compose.material3.Text
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -96,6 +94,13 @@ class ControlledInputView : LinearLayout {
         JetpackComposeView(
           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,
           onTextChange = { value ->
             val surfaceId = UIManagerHelper.getSurfaceId(context)
             val viewId = this.id
@@ -140,4 +145,4 @@ class ControlledInputView : LinearLayout {
 
     }
   }
-}
+}

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

@@ -38,6 +38,41 @@ 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)
+  }
+
+  @ReactProp(name = "autoCapitalize")
+  override fun setAutoCapitalize(view: ControlledInputView, autoCapitalize: String?) {
+    view.viewModel.setAutoCapitalize(autoCapitalize)
+  }
+
+  @ReactProp(name = "keyboardType")
+  override fun setKeyboardType(view: ControlledInputView, keyboardType: String?) {
+    view.viewModel.setKeyboardType(keyboardType)
+  }
+
+  @ReactProp(name = "returnKeyType")
+  override fun setReturnKeyType(view: ControlledInputView, returnKeyType: String?) {
+    view.viewModel.setReturnKeyType(returnKeyType)
+  }
+
   @ReactProp(name = "inputStyle")
   override fun setInputStyle(view: ControlledInputView, inputStyle: ReadableMap?) {
     val style = if (inputStyle == null) {

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

@@ -2,6 +2,7 @@ package com.controlledinput
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -25,16 +26,26 @@ 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
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardCapitalization
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.autofill.AutofillNode
+import androidx.compose.ui.autofill.AutofillType
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.boundsInWindow
+import androidx.compose.ui.platform.LocalAutofill
+import androidx.compose.ui.platform.LocalAutofillTree
 import androidx.compose.ui.unit.sp
-import androidx.lifecycle.ViewModel
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
-import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 
 data class InputStyle(
@@ -55,6 +66,13 @@ data class InputStyle(
 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?>,
   onTextChange: (value: String) -> Unit,
   onFocus: (() -> Unit)? = null,
   onBlur: (() -> Unit)? = null,
@@ -62,8 +80,24 @@ fun JetpackComposeView(
 ) {
   val state = remember { TextFieldState(value) }
   val style by inputStyle.collectAsState()
+  val keyboardTypeValue by keyboardType.collectAsState()
+  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
+  val autofillNode = remember {
+    AutofillNode(
+      autofillTypes = toAutofillTypes(autoCompleteValue),
+      onFill = { onTextChange(it) }
+    )
+  }
+  LocalAutofillTree.current += autofillNode
+
   if (state.text.toString() != value) {
     state.setTextAndPlaceCursorAtEnd(value)
   }
@@ -73,9 +107,11 @@ fun JetpackComposeView(
       when (interaction) {
         is FocusInteraction.Focus -> {
           onFocus?.invoke()
+          autofill?.requestAutofillForNode(autofillNode)
         }
         is FocusInteraction.Unfocus -> {
           onBlur?.invoke()
+          autofill?.cancelAutofillForNode(autofillNode)
         }
       }
     }
@@ -110,46 +146,124 @@ 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,
-        )
-        .focusRequester(focusRequester),
-      textStyle = TextStyle(
-        color = textColor,
-        fontSize = fontSize,
-        fontFamily = fontFamily,
-      ),
-      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()
+          }
+        },
+      )
+    }
   }
 }
 
+private fun toComposeKeyboardType(value: String?): KeyboardType = when (value) {
+  "ascii-capable" -> KeyboardType.Ascii
+  "numbers-and-punctuation" -> KeyboardType.Text
+  "url" -> KeyboardType.Uri
+  "number-pad", "numeric" -> KeyboardType.Number
+  "phone-pad" -> KeyboardType.Phone
+  "email-address" -> KeyboardType.Email
+  "decimal-pad" -> KeyboardType.Decimal
+  "visible-password" -> KeyboardType.Password
+  else -> KeyboardType.Text
+}
+
+private fun toComposeCapitalization(value: String?): KeyboardCapitalization = when (value) {
+  "none" -> KeyboardCapitalization.None
+  "characters" -> KeyboardCapitalization.Characters
+  "words" -> KeyboardCapitalization.Words
+  "sentences" -> KeyboardCapitalization.Sentences
+  else -> KeyboardCapitalization.Sentences
+}
+
+private fun toComposeImeAction(value: String?): ImeAction = when (value) {
+  "go" -> ImeAction.Go
+  "next" -> ImeAction.Next
+  "search" -> ImeAction.Search
+  "send" -> ImeAction.Send
+  "done" -> ImeAction.Done
+  "none" -> ImeAction.None
+  "previous" -> ImeAction.Previous
+  else -> ImeAction.Default
+}
+
+private fun toAutofillTypes(autoComplete: String?): List<AutofillType> = when (autoComplete) {
+  "email" -> listOf(AutofillType.EmailAddress)
+  "name", "given-name", "family-name", "additional-name" -> listOf(AutofillType.PersonFullName)
+  "username" -> listOf(AutofillType.Username)
+  "password", "new-password" -> listOf(AutofillType.Password)
+  "tel" -> listOf(AutofillType.PhoneNumber)
+  "postal-code" -> listOf(AutofillType.PostalCode)
+  "street-address" -> listOf(AutofillType.AddressStreet)
+  "cc-number" -> listOf(AutofillType.CreditCardNumber)
+  "cc-exp" -> listOf(AutofillType.CreditCardExpirationDate)
+  "cc-exp-month" -> listOf(AutofillType.CreditCardExpirationMonth)
+  "cc-exp-year" -> listOf(AutofillType.CreditCardExpirationYear)
+  "cc-csc" -> listOf(AutofillType.CreditCardSecurityCode)
+  else -> emptyList()
+}
+
 class TextChangeEvent(
   surfaceId: Int,
   viewId: Int,
@@ -198,20 +312,3 @@ class BlurEvent(
     const val EVENT_NAME = "onBlur"
   }
 }
-
-
-class JetpackComposeViewModel : ViewModel() {
-  private val _value = MutableStateFlow("")
-  private val _inputStyle = MutableStateFlow<InputStyle?>(null)
-
-  val value: StateFlow<String> get() = _value
-  val inputStyle: StateFlow<InputStyle?> get() = _inputStyle
-
-  fun setValue(newValue: String) {
-    _value.value = newValue
-  }
-
-  fun setInputStyle(style: InputStyle?) {
-    _inputStyle.value = style
-  }
-}

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

@@ -0,0 +1,98 @@
+package com.controlledinput
+
+import android.os.Build
+import android.view.View
+import androidx.lifecycle.ViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+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)
+
+  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
+
+  fun setValue(newValue: String) {
+    _value.value = newValue
+  }
+
+  fun setInputStyle(style: InputStyle?) {
+    _inputStyle.value = style
+  }
+
+  fun setAutoComplete(newValue: String?) {
+    _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)
+
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+      return
+    }
+
+    val hint = when (newValue) {
+      "email" -> View.AUTOFILL_HINT_EMAIL_ADDRESS
+      "name", "given-name", "family-name" -> View.AUTOFILL_HINT_NAME
+      "username" -> View.AUTOFILL_HINT_USERNAME
+      "password", "new-password" -> View.AUTOFILL_HINT_PASSWORD
+      "tel" -> View.AUTOFILL_HINT_PHONE
+      "postal-code" -> View.AUTOFILL_HINT_POSTAL_CODE
+      "street-address" -> View.AUTOFILL_HINT_POSTAL_ADDRESS
+      "cc-number" -> View.AUTOFILL_HINT_CREDIT_CARD_NUMBER
+      "cc-exp" -> View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DATE
+      "cc-exp-month" -> View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_MONTH
+      "cc-exp-year" -> View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_YEAR
+      "cc-csc" -> View.AUTOFILL_HINT_CREDIT_CARD_SECURITY_CODE
+      "additional-name" -> View.AUTOFILL_HINT_NAME
+      else -> null
+    }
+
+    if (hint == null || newValue == "off" || newValue.isNullOrEmpty()) {
+      hostView.setAutofillHints(*emptyArray())
+      return
+    }
+
+    hostView.importantForAutofill = View.IMPORTANT_FOR_AUTOFILL_YES
+    hostView.setAutofillHints(hint)
+  }
+
+  fun setAutoCapitalize(newValue: String?) {
+    _autoCapitalize.value = newValue
+  }
+
+  fun setKeyboardType(newValue: String?) {
+    _keyboardType.value = newValue
+  }
+
+  fun setReturnKeyType(newValue: String?) {
+    _returnKeyType.value = newValue
+  }
+}

package/ios/ControlledInputView.mm

@@ -52,6 +52,34 @@ using namespace facebook::react;
         _inputView.value = [NSString stringWithUTF8String:newViewProps.value.c_str()];
     }
 
+    if (oldViewProps.autoComplete != newViewProps.autoComplete) {
+        _inputView.autoComplete = newViewProps.autoComplete.empty() ? nil : [NSString stringWithUTF8String:newViewProps.autoComplete.c_str()];
+    }
+
+    if (oldViewProps.keyboardType != newViewProps.keyboardType) {
+        _inputView.keyboardType = newViewProps.keyboardType.empty() ? nil : [NSString stringWithUTF8String:newViewProps.keyboardType.c_str()];
+    }
+
+    if (oldViewProps.returnKeyType != newViewProps.returnKeyType) {
+        _inputView.returnKeyType = newViewProps.returnKeyType.empty() ? nil : [NSString stringWithUTF8String:newViewProps.returnKeyType.c_str()];
+    }
+
+    if (oldViewProps.autoCapitalize != newViewProps.autoCapitalize) {
+        _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

@@ -32,6 +32,34 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         didSet { applyFont() }
     }
 
+    @objc public var autoComplete: String? {
+        didSet { applyAutoComplete() }
+    }
+
+    @objc public var autoCapitalize: String? {
+        didSet { applyAutoCapitalize() }
+    }
+
+    @objc public var keyboardType: String? {
+        didSet { applyKeyboardType() }
+    }
+
+    @objc public var returnKeyType: String? {
+        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() {
@@ -55,6 +83,7 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         textField.translatesAutoresizingMaskIntoConstraints = false
         textField.borderStyle = .none
         textField.delegate = self
+        textField.textColor = textColor
         addSubview(textField)
 
         NSLayoutConstraint.activate([
@@ -65,6 +94,29 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         ])
 
         applyFont()
+        applyAutoComplete()
+        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) {
@@ -82,6 +134,12 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
 
         delegate?.controlledInputDidChangeText(self, value: newText)
 
+        // If the replacement string is more than one character, it's likely an autocomplete/paste
+        // In this case, we should let the UITextField update itself to handle it correctly
+        if string.count > 1 {
+            return true
+        }
+
         return false
     }
 
@@ -92,4 +150,150 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
             textField.font = UIFont.systemFont(ofSize: fontSize)
         }
     }
+
+    private func applyAutoComplete() {
+        guard let autoComplete else {
+            textField.textContentType = nil
+            return
+        }
+
+        if autoComplete == "off" || autoComplete.isEmpty {
+            textField.textContentType = nil
+            return
+        }
+
+        let mappedValue: String
+        switch autoComplete {
+        case "email":
+            mappedValue = "emailAddress"
+        case "tel":
+            mappedValue = "telephoneNumber"
+        case "name":
+            mappedValue = "name"
+        case "given-name":
+            mappedValue = "givenName"
+        case "middle-name":
+            mappedValue = "middleName"
+        case "family-name":
+            mappedValue = "familyName"
+        case "username":
+            mappedValue = "username"
+        case "password":
+            mappedValue = "password"
+        case "new-password":
+            mappedValue = "newPassword"
+        case "one-time-code":
+            mappedValue = "oneTimeCode"
+        case "postal-code":
+            mappedValue = "postalCode"
+        case "street-address":
+            mappedValue = "fullStreetAddress"
+        case "country":
+            mappedValue = "countryName"
+        case "cc-number":
+            mappedValue = "creditCardNumber"
+        case "cc-csc":
+            mappedValue = "creditCardSecurityCode"
+        case "cc-exp":
+            mappedValue = "creditCardExpiration"
+        case "cc-exp-month":
+            mappedValue = "creditCardExpirationMonth"
+        case "cc-exp-year":
+            mappedValue = "creditCardExpirationYear"
+        case "birthdate-day":
+            mappedValue = "birthdateDay"
+        case "birthdate-month":
+            mappedValue = "birthdateMonth"
+        case "birthdate-year":
+            mappedValue = "birthdateYear"
+        case "url":
+            mappedValue = "URL"
+        default:
+            mappedValue = autoComplete
+        }
+
+        textField.textContentType = UITextContentType(rawValue: mappedValue)
+    }
+
+    private func applyAutoCapitalize() {
+        guard let autoCapitalize else {
+            textField.autocapitalizationType = .sentences
+            return
+        }
+
+        switch autoCapitalize {
+        case "none":
+            textField.autocapitalizationType = .none
+        case "words":
+            textField.autocapitalizationType = .words
+        case "sentences":
+            textField.autocapitalizationType = .sentences
+        case "characters":
+            textField.autocapitalizationType = .allCharacters
+        default:
+            textField.autocapitalizationType = .sentences
+        }
+    }
+
+    private func applyKeyboardType() {
+        switch keyboardType {
+        case "ascii-capable":
+            textField.keyboardType = .asciiCapable
+        case "numbers-and-punctuation":
+            textField.keyboardType = .numbersAndPunctuation
+        case "url":
+            textField.keyboardType = .URL
+        case "number-pad":
+            textField.keyboardType = .numberPad
+        case "phone-pad":
+            textField.keyboardType = .phonePad
+        case "name-phone-pad":
+            textField.keyboardType = .namePhonePad
+        case "email-address":
+            textField.keyboardType = .emailAddress
+        case "decimal-pad":
+            textField.keyboardType = .decimalPad
+        case "twitter":
+            textField.keyboardType = .twitter
+        case "web-search":
+            textField.keyboardType = .webSearch
+        case "visible-password":
+            textField.keyboardType = .asciiCapable
+        case "numeric":
+            textField.keyboardType = .numbersAndPunctuation
+        default:
+            textField.keyboardType = .default
+        }
+    }
+
+    private func applyReturnKeyType() {
+        switch returnKeyType {
+        case "done":
+            textField.returnKeyType = .done
+        case "go":
+            textField.returnKeyType = .go
+        case "next":
+            textField.returnKeyType = .next
+        case "search":
+            textField.returnKeyType = .search
+        case "send":
+            textField.returnKeyType = .send
+        case "none":
+            textField.returnKeyType = .default
+        case "previous":
+            textField.returnKeyType = .default
+        case "route":
+            textField.returnKeyType = .route
+        case "yahoo":
+            textField.returnKeyType = .yahoo
+        case "emergency-call":
+            textField.returnKeyType = .emergencyCall
+        case "google":
+            textField.returnKeyType = .google
+        case "join":
+            textField.returnKeyType = .join
+        default:
+            textField.returnKeyType = .default
+        }
+    }
 }

package/lib/module/ControlledInputViewNativeComponent.ts

@@ -1,28 +1,28 @@
 import {
   codegenNativeComponent,
-  type ViewProps,
   type ColorValue,
   type HostComponent,
+  type ViewProps,
 } from 'react-native';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import { codegenNativeCommands } from 'react-native';
 import type {
   BubblingEventHandler,
   Double,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
-interface TextChangeEvent {
+export interface TextChangeEvent {
   value: string;
 }
 
-interface FocusEvent {
+export interface FocusEvent {
   // Empty event
 }
 
-interface BlurEvent {
+export interface BlurEvent {
   // Empty event
 }
 
-interface InputStyle {
+export interface InputStyle {
   color?: ColorValue;
   fontSize?: Double;
   fontFamily?: string;
@@ -38,6 +38,13 @@ interface InputStyle {
 
 export interface NativeProps extends ViewProps {
   value?: string;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  selectionColor?: ColorValue;
+  autoComplete?: string;
+  autoCapitalize?: string;
+  keyboardType?: string;
+  returnKeyType?: string;
   inputStyle?: InputStyle;
   onTextChange?: BubblingEventHandler<Readonly<TextChangeEvent>>;
   onFocus?: BubblingEventHandler<Readonly<FocusEvent>>;

package/lib/module/index.js

@@ -1,50 +1,52 @@
 "use strict";
 
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
 import { Platform, processColor, StyleSheet } from 'react-native';
 import ControlledInputViewNativeComponent, { Commands } 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 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;
+const androidComposeHandledKeys = ['color', 'fontSize', 'fontFamily', 'padding', 'paddingVertical', 'paddingHorizontal', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'borderWidth', 'borderRadius', 'borderColor', 'backgroundColor'];
+function resolveAndroidComposeViewPadding(flat) {
+  const padding = 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
+    paddingTop: flat.paddingTop ?? flat.paddingVertical ?? padding,
+    paddingBottom: flat.paddingBottom ?? flat.paddingVertical ?? padding,
+    paddingLeft: flat.paddingLeft ?? flat.paddingHorizontal ?? padding,
+    paddingRight: flat.paddingRight ?? flat.paddingHorizontal ?? padding
   };
 }
-export const ControlledInputView = /*#__PURE__*/forwardRef(({
+export const ControlledInputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   style,
   onTextChange,
+  selectionColor,
+  placeholderTextColor,
   ...rest
 }, ref) => {
   const nativeRef = useRef(null);
-  const flat = StyleSheet.flatten(style) ?? {};
+  const flattenedStyle = 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);
+    viewStyle = Object.fromEntries(Object.entries(flattenedStyle).filter(([k]) => !androidComposeHandledKeys.includes(k)));
+    const hasPadding = Object.entries(flattenedStyle).some(([k, v]) => k.includes('padding') && v != 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
+      color: flattenedStyle.color,
+      fontSize: flattenedStyle.fontSize,
+      fontFamily: flattenedStyle.fontFamily,
+      ...(hasPadding ? resolveAndroidComposeViewPadding(flattenedStyle) : {}),
+      borderWidth: flattenedStyle.borderWidth,
+      borderRadius: flattenedStyle.borderRadius,
+      borderColor: flattenedStyle.borderColor,
+      backgroundColor: flattenedStyle.backgroundColor
     };
   } else {
     const {
       color,
       fontSize,
       fontFamily,
-      ...iosRest
-    } = flat;
-    viewStyle = iosRest;
+      ...iosViewStyle
+    } = flattenedStyle;
+    viewStyle = iosViewStyle;
     const hasTextStyle = color != null || fontSize != null || fontFamily != null;
     inputStyle = hasTextStyle ? {
       color: color != null ? processColor(color) : undefined,
@@ -52,6 +54,11 @@ export const ControlledInputView = /*#__PURE__*/forwardRef(({
       fontFamily
     } : undefined;
   }
+  const handleTextChange = e => {
+    if (onTextChange) {
+      onTextChange(e.nativeEvent.value);
+    }
+  };
   useImperativeHandle(ref, () => ({
     blur: () => {
       if (!nativeRef.current) return;
@@ -68,11 +75,14 @@ export const ControlledInputView = /*#__PURE__*/forwardRef(({
   }));
   return /*#__PURE__*/_jsx(ControlledInputViewNativeComponent, {
     ...rest,
+    placeholderTextColor: placeholderTextColor,
+    selectionColor: selectionColor,
     style: viewStyle,
     inputStyle: inputStyle,
-    onTextChange: onTextChange ? e => onTextChange(e.nativeEvent.value) : undefined,
+    onTextChange: handleTextChange,
     ref: nativeRef
   });
-});
+}));
+ControlledInputView.displayName = 'ControlledInputView';
 export * from './ControlledInputViewNativeComponent';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"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":[]}
+{"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

@@ -1,13 +1,13 @@
-import { type ViewProps, type ColorValue, type HostComponent } from 'react-native';
+import { type ColorValue, type HostComponent, type ViewProps } from 'react-native';
 import type { BubblingEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
-interface TextChangeEvent {
+export interface TextChangeEvent {
     value: string;
 }
-interface FocusEvent {
+export interface FocusEvent {
 }
-interface BlurEvent {
+export interface BlurEvent {
 }
-interface InputStyle {
+export interface InputStyle {
     color?: ColorValue;
     fontSize?: Double;
     fontFamily?: string;
@@ -22,6 +22,13 @@ interface InputStyle {
 }
 export interface NativeProps extends ViewProps {
     value?: string;
+    placeholder?: string;
+    placeholderTextColor?: ColorValue;
+    selectionColor?: ColorValue;
+    autoComplete?: string;
+    autoCapitalize?: string;
+    keyboardType?: string;
+    returnKeyType?: string;
     inputStyle?: InputStyle;
     onTextChange?: BubblingEventHandler<Readonly<TextChangeEvent>>;
     onFocus?: BubblingEventHandler<Readonly<FocusEvent>>;

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,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"}
+{"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

@@ -1,12 +1,14 @@
+import { type TextInputProps } from 'react-native';
 import { type NativeProps } from './ControlledInputViewNativeComponent';
 export interface ControlledInputViewRef {
     blur: () => void;
     focus: () => void;
 }
-export type ControlledInputViewProps = Omit<NativeProps, 'inputStyle' | 'onTextChange'> & {
+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").ForwardRefExoticComponent<Omit<NativeProps, "inputStyle" | "onTextChange"> & {
+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":"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"}
+{"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.9.1",
+  "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

@@ -1,28 +1,28 @@
 import {
   codegenNativeComponent,
-  type ViewProps,
   type ColorValue,
   type HostComponent,
+  type ViewProps,
 } from 'react-native';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import { codegenNativeCommands } from 'react-native';
 import type {
   BubblingEventHandler,
   Double,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
-interface TextChangeEvent {
+export interface TextChangeEvent {
   value: string;
 }
 
-interface FocusEvent {
+export interface FocusEvent {
   // Empty event
 }
 
-interface BlurEvent {
+export interface BlurEvent {
   // Empty event
 }
 
-interface InputStyle {
+export interface InputStyle {
   color?: ColorValue;
   fontSize?: Double;
   fontFamily?: string;
@@ -38,6 +38,13 @@ interface InputStyle {
 
 export interface NativeProps extends ViewProps {
   value?: string;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  selectionColor?: ColorValue;
+  autoComplete?: string;
+  autoCapitalize?: string;
+  keyboardType?: string;
+  returnKeyType?: string;
   inputStyle?: InputStyle;
   onTextChange?: BubblingEventHandler<Readonly<TextChangeEvent>>;
   onFocus?: BubblingEventHandler<Readonly<FocusEvent>>;

package/src/index.tsx

@@ -1,5 +1,6 @@
 import {
   forwardRef,
+  memo,
   useImperativeHandle,
   useRef,
   type ElementRef,
@@ -8,11 +9,14 @@ import {
   Platform,
   processColor,
   StyleSheet,
+  type TextInputProps,
   type ViewStyle,
+  type TextStyle,
 } from 'react-native';
 import ControlledInputViewNativeComponent, {
   Commands,
   type NativeProps,
+  type TextChangeEvent,
 } from './ControlledInputViewNativeComponent';
 
 export interface ControlledInputViewRef {
@@ -20,15 +24,27 @@ export interface ControlledInputViewRef {
   focus: () => void;
 }
 
+type ForwardedTextInputProps = Pick<
+  TextInputProps,
+  | 'autoComplete'
+  | 'autoCapitalize'
+  | 'keyboardType'
+  | 'returnKeyType'
+  | 'placeholder'
+  | 'placeholderTextColor'
+  | 'selectionColor'
+>;
+
 export type ControlledInputViewProps = Omit<
   NativeProps,
-  'inputStyle' | 'onTextChange'
-> & {
-  onTextChange?: (value: string) => void;
-};
+  'inputStyle' | 'onTextChange' | keyof ForwardedTextInputProps
+> &
+  ForwardedTextInputProps & {
+    onTextChange?: (value: string) => void;
+  };
 
 // All style props that Android handles via Compose instead of the native View layer
-const ANDROID_HANDLED_KEYS = [
+const androidComposeHandledKeys = [
   'color',
   'fontSize',
   'fontFamily',
@@ -39,98 +55,113 @@ const ANDROID_HANDLED_KEYS = [
   'paddingBottom',
   'paddingLeft',
   'paddingRight',
-  'paddingStart',
-  'paddingEnd',
   'borderWidth',
   'borderRadius',
   'borderColor',
   'backgroundColor',
 ];
 
-function resolveAndroidPadding(flat: Record<string, any>) {
-  const base = flat.padding ?? 0;
+function resolveAndroidComposeViewPadding(flat: Record<string, any>) {
+  const padding = 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,
+    paddingTop: flat.paddingTop ?? flat.paddingVertical ?? padding,
+    paddingBottom: flat.paddingBottom ?? flat.paddingVertical ?? padding,
+    paddingLeft: flat.paddingLeft ?? flat.paddingHorizontal ?? padding,
+    paddingRight: flat.paddingRight ?? flat.paddingHorizontal ?? padding,
   };
 }
 
-export const ControlledInputView = forwardRef<
-  ControlledInputViewRef,
-  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 (Platform.OS === 'ios' || Platform.OS === 'android') {
-        Commands.blur(nativeRef.current);
-      }
-    },
-    focus: () => {
-      if (!nativeRef.current) return;
-      if (Platform.OS === 'ios' || Platform.OS === 'android') {
-        Commands.focus(nativeRef.current);
-      }
-    },
-  }));
-
-  return (
-    <ControlledInputViewNativeComponent
-      {...rest}
-      style={viewStyle}
-      inputStyle={inputStyle as NativeProps['inputStyle']}
-      onTextChange={
-        onTextChange ? (e) => onTextChange(e.nativeEvent.value) : undefined
+export const ControlledInputView = memo(
+  forwardRef<ControlledInputViewRef, ControlledInputViewProps>(
+    (
+      { style, onTextChange, selectionColor, placeholderTextColor, ...rest },
+      ref
+    ) => {
+      const nativeRef =
+        useRef<ElementRef<typeof ControlledInputViewNativeComponent>>(null);
+
+      const flattenedStyle = (StyleSheet.flatten(style) ?? {}) as TextStyle;
+
+      let viewStyle: ViewStyle;
+      let inputStyle: Record<string, any> | undefined;
+
+      if (Platform.OS === 'android') {
+        viewStyle = Object.fromEntries(
+          Object.entries(flattenedStyle).filter(
+            ([k]) => !androidComposeHandledKeys.includes(k)
+          )
+        );
+
+        const hasPadding = Object.entries(flattenedStyle).some(
+          ([k, v]) => k.includes('padding') && v != null
+        );
+
+        inputStyle = {
+          color: flattenedStyle.color,
+          fontSize: flattenedStyle.fontSize,
+          fontFamily: flattenedStyle.fontFamily,
+          ...(hasPadding
+            ? resolveAndroidComposeViewPadding(flattenedStyle)
+            : {}),
+          borderWidth: flattenedStyle.borderWidth,
+          borderRadius: flattenedStyle.borderRadius,
+          borderColor: flattenedStyle.borderColor,
+          backgroundColor: flattenedStyle.backgroundColor,
+        };
+      } else {
+        const { color, fontSize, fontFamily, ...iosViewStyle } = flattenedStyle;
+        viewStyle = iosViewStyle;
+
+        const hasTextStyle =
+          color != null || fontSize != null || fontFamily != null;
+        inputStyle = hasTextStyle
+          ? {
+              color: color != null ? processColor(color) : undefined,
+              fontSize,
+              fontFamily,
+            }
+          : undefined;
       }
-      ref={nativeRef as any}
-    />
-  );
-});
+
+      const handleTextChange = (e: {
+        nativeEvent: Readonly<TextChangeEvent>;
+      }) => {
+        if (onTextChange) {
+          onTextChange(e.nativeEvent.value);
+        }
+      };
+
+      useImperativeHandle(ref, () => ({
+        blur: () => {
+          if (!nativeRef.current) return;
+          if (Platform.OS === 'ios' || Platform.OS === 'android') {
+            Commands.blur(nativeRef.current);
+          }
+        },
+        focus: () => {
+          if (!nativeRef.current) return;
+          if (Platform.OS === 'ios' || Platform.OS === 'android') {
+            Commands.focus(nativeRef.current);
+          }
+        },
+      }));
+
+      return (
+        <ControlledInputViewNativeComponent
+          {...rest}
+          placeholderTextColor={placeholderTextColor}
+          selectionColor={selectionColor}
+          style={viewStyle}
+          inputStyle={inputStyle}
+          onTextChange={handleTextChange}
+          ref={nativeRef}
+        />
+      );
+    }
+  )
+);
+
+ControlledInputView.displayName = 'ControlledInputView';
 
 export * from './ControlledInputViewNativeComponent';