react-native-controlled-input 0.9.0 → 0.10.0

package/README.md

@@ -1,6 +1,6 @@
 # react-native-controlled-input
 
-A controlled React Native input for cases where regular `TextInput` can briefly show invalid characters before your filtered `value` is rendered back from JS.
+A controlled React Native input that lets you format and constrain the value exactly how you want in JS, while keeping the displayed text in sync without invalid characters flashing in the field.
 
 ## Problem
 

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,10 @@ class ControlledInputView : LinearLayout {
         JetpackComposeView(
           value = value,
           inputStyle = viewModel.inputStyle,
+          autoComplete = viewModel.autoComplete,
+          autoCapitalize = viewModel.autoCapitalize,
+          keyboardType = viewModel.keyboardType,
+          returnKeyType = viewModel.returnKeyType,
           onTextChange = { value ->
             val surfaceId = UIManagerHelper.getSurfaceId(context)
             val viewId = this.id
@@ -140,4 +142,4 @@ class ControlledInputView : LinearLayout {
 
     }
   }
-}
+}

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

@@ -38,6 +38,26 @@ class ControlledInputViewManager : SimpleViewManager<ControlledInputView>(),
     }
   }
 
+  @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
@@ -29,12 +30,19 @@ 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 +63,10 @@ data class InputStyle(
 fun JetpackComposeView(
   value: String,
   inputStyle: StateFlow<InputStyle?>,
+  autoComplete: StateFlow<String?>,
+  autoCapitalize: StateFlow<String?>,
+  keyboardType: StateFlow<String?>,
+  returnKeyType: StateFlow<String?>,
   onTextChange: (value: String) -> Unit,
   onFocus: (() -> Unit)? = null,
   onBlur: (() -> Unit)? = null,
@@ -62,8 +74,21 @@ 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 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 +98,11 @@ fun JetpackComposeView(
       when (interaction) {
         is FocusInteraction.Focus -> {
           onFocus?.invoke()
+          autofill?.requestAutofillForNode(autofillNode)
         }
         is FocusInteraction.Unfocus -> {
           onBlur?.invoke()
+          autofill?.cancelAutofillForNode(autofillNode)
         }
       }
     }
@@ -131,12 +158,20 @@ fun JetpackComposeView(
           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(
@@ -150,6 +185,53 @@ fun JetpackComposeView(
   }
 }
 
+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 +280,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,80 @@
+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 _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 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 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,22 @@ 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()];
+    }
+
     const auto &style = newViewProps.inputStyle;
     const auto &oldStyle = oldViewProps.inputStyle;
 

package/ios/RNControlledInput.swift

@@ -32,6 +32,22 @@ 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() }
+    }
+
     public override var canBecomeFirstResponder: Bool { true }
 
     @objc public func focus() {
@@ -65,6 +81,10 @@ public class RNControlledInput: UIView, UITextFieldDelegate {
         ])
 
         applyFont()
+        applyAutoComplete()
+        applyAutoCapitalize()
+        applyKeyboardType()
+        applyReturnKeyType()
     }
 
     public func textFieldDidBeginEditing(_ textField: UITextField) {
@@ -82,6 +102,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 +118,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,10 @@ interface InputStyle {
 
 export interface NativeProps extends ViewProps {
   value?: string;
+  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,50 @@
 "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,
   ...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 +52,11 @@ export const ControlledInputView = /*#__PURE__*/forwardRef(({
       fontFamily
     } : undefined;
   }
+  const handleTextChange = e => {
+    if (onTextChange) {
+      onTextChange(e.nativeEvent.value);
+    }
+  };
   useImperativeHandle(ref, () => ({
     blur: () => {
       if (!nativeRef.current) return;
@@ -70,9 +75,10 @@ export const ControlledInputView = /*#__PURE__*/forwardRef(({
     ...rest,
     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","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,10 @@ interface InputStyle {
 }
 export interface NativeProps extends ViewProps {
     value?: string;
+    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,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'>;
+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, "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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-controlled-input",
-  "version": "0.9.0",
+  "version": "0.10.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,10 @@ interface InputStyle {
 
 export interface NativeProps extends ViewProps {
   value?: string;
+  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,21 @@ export interface ControlledInputViewRef {
   focus: () => void;
 }
 
+type ForwardedTextInputProps = Pick<
+  TextInputProps,
+  'autoComplete' | 'autoCapitalize' | 'keyboardType' | 'returnKeyType'
+>;
+
 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 +49,108 @@ 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, ...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}
+          style={viewStyle}
+          inputStyle={inputStyle}
+          onTextChange={handleTextChange}
+          ref={nativeRef}
+        />
+      );
+    }
+  )
+);
+
+ControlledInputView.displayName = 'ControlledInputView';
 
 export * from './ControlledInputViewNativeComponent';