react-native-controlled-input 0.2.0

package/ControlledInput.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ControlledInput"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/veliseev93/react-native-controlled-input.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 veliseev
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# react-native-controlled-input
+
+React Native Controlled Inputative Controlled Input
+
+## Installation
+
+
+```sh
+npm install react-native-controlled-input
+```
+
+
+## Usage
+
+
+```js
+import { ControlledInputView } from "react-native-controlled-input";
+
+// ...
+
+<ControlledInputView color="tomato" />
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,92 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ControlledInput__' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+    classpath "org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply plugin: "org.jetbrains.kotlin.plugin.compose"
+
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ControlledInput__" + name]).toInteger()
+}
+
+android {
+  namespace "com.controlledinput"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+    compose true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+
+  // Material Components (for BottomSheetDialog)
+  implementation 'com.google.android.material:material:1.13.0'
+
+  // Jetpack Compose dependencies
+  def composeBom = platform('androidx.compose:compose-bom:2025.12.01')
+  implementation composeBom
+  implementation 'androidx.compose.ui:ui'
+  implementation 'androidx.compose.ui:ui-tooling-preview'
+  implementation 'androidx.compose.material3:material3'
+  implementation 'androidx.activity:activity-compose:1.12.2'
+  debugImplementation 'androidx.compose.ui:ui-tooling'
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+ControlledInput_kotlinVersion=2.0.21
+ControlledInput_minSdkVersion=24
+ControlledInput_targetSdkVersion=34
+ControlledInput_compileSdkVersion=35
+ControlledInput_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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

@@ -0,0 +1,19 @@
+package com.controlledinput;
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+import java.util.ArrayList
+
+class ControlledInputViewPackage : ReactPackage {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    val viewManagers: MutableList<ViewManager<*, *>> = ArrayList()
+    viewManagers.add(ControlledInputViewManager())
+    return viewManagers
+  }
+
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return emptyList()
+  }
+}

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

@@ -0,0 +1,141 @@
+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
+import androidx.compose.runtime.remember
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalFocusManager
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import kotlinx.coroutines.flow.MutableStateFlow
+
+class ControlledInputView : LinearLayout {
+  constructor(context: Context) : super(context) {
+    configureComponent(context)
+  }
+
+  constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
+    configureComponent(context)
+  }
+
+  constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
+    context,
+    attrs,
+    defStyleAttr
+  ) {
+    configureComponent(context)
+  }
+
+  internal lateinit var viewModel: JetpackComposeViewModel
+  private val blurSignal = MutableStateFlow(0)
+  private val focusSignal = MutableStateFlow(0)
+
+  fun blur() {
+    // триггерим compose снять фокус
+    blurSignal.value = blurSignal.value + 1
+
+    // на всякий случай прячем клавиатуру на уровне View
+    val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+    imm.hideSoftInputFromWindow(windowToken, 0)
+
+    // и снимаем фокус у самого android view (не всегда достаточно, но не мешает)
+    clearFocus()
+  }
+
+  fun focus() {
+    // триггерим compose запросить фокус
+    focusSignal.value = focusSignal.value + 1
+  }
+
+  private fun configureComponent(context: Context) {
+
+    layoutParams = LayoutParams(
+      LayoutParams.WRAP_CONTENT,
+      LayoutParams.WRAP_CONTENT
+    )
+
+    ComposeView(context).also {
+      it.layoutParams = LayoutParams(
+        LayoutParams.WRAP_CONTENT,
+        LayoutParams.WRAP_CONTENT
+      )
+
+      viewModel = JetpackComposeViewModel()
+
+      it.setContent {
+        val value = viewModel.value.collectAsState().value
+        val blurTick by blurSignal.collectAsState()
+        val focusTick by focusSignal.collectAsState()
+        val focusManager = LocalFocusManager.current
+        val focusRequester = remember { FocusRequester() }
+
+        // при каждом blurTick снимаем фокус в compose
+        LaunchedEffect(blurTick) {
+          if (blurTick > 0) {
+            focusManager.clearFocus(force = true)
+          }
+        }
+
+        // при каждом focusTick запрашиваем фокус в compose
+        LaunchedEffect(focusTick) {
+          if (focusTick > 0) {
+            focusRequester.requestFocus()
+          }
+        }
+
+        JetpackComposeView(
+          value = value,
+          inputStyle = viewModel.inputStyle,
+          onTextChange = { value ->
+            val surfaceId = UIManagerHelper.getSurfaceId(context)
+            val viewId = this.id
+            UIManagerHelper
+              .getEventDispatcherForReactTag(context as ReactContext, viewId)
+              ?.dispatchEvent(
+                TextChangeEvent(
+                  surfaceId,
+                  viewId,
+                  value
+                )
+              )
+          },
+          onFocus = {
+            val surfaceId = UIManagerHelper.getSurfaceId(context)
+            val viewId = this.id
+            UIManagerHelper
+              .getEventDispatcherForReactTag(context as ReactContext, viewId)
+              ?.dispatchEvent(
+                FocusEvent(
+                  surfaceId,
+                  viewId
+                )
+              )
+          },
+          onBlur = {
+            val surfaceId = UIManagerHelper.getSurfaceId(context)
+            val viewId = this.id
+            UIManagerHelper
+              .getEventDispatcherForReactTag(context as ReactContext, viewId)
+              ?.dispatchEvent(
+                BlurEvent(
+                  surfaceId,
+                  viewId
+                )
+              )
+          },
+          focusRequester = focusRequester
+        )
+      }
+      addView(it)
+
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+package com.controlledinput
+
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.ControlledInputViewManagerInterface
+import com.facebook.react.viewmanagers.ControlledInputViewManagerDelegate
+import com.facebook.react.common.MapBuilder
+
+@ReactModule(name = ControlledInputViewManager.NAME)
+class ControlledInputViewManager : SimpleViewManager<ControlledInputView>(),
+  ControlledInputViewManagerInterface<ControlledInputView> {
+  private val mDelegate: ViewManagerDelegate<ControlledInputView>
+
+  init {
+    mDelegate = ControlledInputViewManagerDelegate(this)
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<ControlledInputView>? {
+    return mDelegate
+  }
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  public override fun createViewInstance(context: ThemedReactContext): ControlledInputView {
+    return ControlledInputView(context)
+  }
+
+  @ReactProp(name = "value")
+  override fun setValue(view: ControlledInputView, value: String?) {
+    value?.let {
+      view.viewModel.setValue(value)
+    }
+  }
+
+  @ReactProp(name = "inputStyle")
+  override fun setInputStyle(view: ControlledInputView, inputStyle: ReadableMap?) {
+    val style = if (inputStyle == null) {
+      null
+    } else {
+      InputStyle(
+        color = if (inputStyle.hasKey("color")) inputStyle.getString("color") else null,
+        fontSize = if (inputStyle.hasKey("fontSize")) inputStyle.getDouble("fontSize") else null,
+        height = if (inputStyle.hasKey("height")) inputStyle.getDouble("height") else null,
+        paddingTop = if (inputStyle.hasKey("paddingTop")) inputStyle.getDouble("paddingTop") else null,
+        paddingBottom = if (inputStyle.hasKey("paddingBottom")) inputStyle.getDouble("paddingBottom") else null,
+        paddingLeft = if (inputStyle.hasKey("paddingLeft")) inputStyle.getDouble("paddingLeft") else null,
+        paddingRight = if (inputStyle.hasKey("paddingRight")) inputStyle.getDouble("paddingRight") else null,
+        borderWidth = if (inputStyle.hasKey("borderWidth")) inputStyle.getDouble("borderWidth") else null,
+        borderRadius = if (inputStyle.hasKey("borderRadius")) inputStyle.getDouble("borderRadius") else null,
+        borderColor = if (inputStyle.hasKey("borderColor")) inputStyle.getString("borderColor") else null,
+      )
+    }
+    view.viewModel.setInputStyle(style)
+  }
+
+  companion object {
+    const val NAME = "ControlledInputView"
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> = mutableMapOf(
+    TextChangeEvent.EVENT_NAME to MapBuilder.of("registrationName", "onTextChange"),
+    FocusEvent.EVENT_NAME to MapBuilder.of("registrationName", "onFocus"),
+    BlurEvent.EVENT_NAME to MapBuilder.of("registrationName", "onBlur")
+  )
+
+  override fun focus(view: ControlledInputView?) {
+    view?.focus()
+  }
+
+  override fun blur(view: ControlledInputView?) {
+    view?.blur()
+  }
+}

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

@@ -0,0 +1,184 @@
+package com.controlledinput
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.layout.Box
+import androidx.compose.ui.draw.clip
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.input.InputTransformation
+import androidx.compose.foundation.text.input.TextFieldState
+import androidx.compose.foundation.text.input.byValue
+import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.FocusInteraction
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+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(
+  val color: String? = null,
+  val fontSize: Double? = null,
+  val height: Double? = null,
+  val paddingTop: Double? = null,
+  val paddingBottom: Double? = null,
+  val paddingLeft: Double? = null,
+  val paddingRight: Double? = null,
+  val borderWidth: Double? = null,
+  val borderRadius: Double? = null,
+  val borderColor: String? = null,
+)
+
+@Composable
+fun JetpackComposeView(
+  value: String,
+  inputStyle: StateFlow<InputStyle?>,
+  onTextChange: (value: String) -> Unit,
+  onFocus: (() -> Unit)? = null,
+  onBlur: (() -> Unit)? = null,
+  focusRequester: FocusRequester,
+) {
+  val state = remember { TextFieldState(value) }
+  val style by inputStyle.collectAsState()
+  val interactionSource = remember { MutableInteractionSource() }
+
+  if (state.text.toString() != value) {
+    state.setTextAndPlaceCursorAtEnd(value)
+  }
+
+  LaunchedEffect(interactionSource) {
+    interactionSource.interactions.collect { interaction ->
+      when (interaction) {
+        is FocusInteraction.Focus -> {
+          onFocus?.invoke()
+        }
+        is FocusInteraction.Unfocus -> {
+          onBlur?.invoke()
+        }
+      }
+    }
+  }
+
+  val textColor = style?.color?.let { Color(android.graphics.Color.parseColor(it)) } ?: Color.White
+  val fontSize = style?.fontSize?.let { it.sp } ?: 24.sp
+  val height = style?.height?.let { it.dp }
+  val paddingValues = PaddingValues(
+    start = style?.paddingLeft?.dp ?: 0.dp,
+    top = style?.paddingTop?.dp ?: 0.dp,
+    end = style?.paddingRight?.dp ?: 0.dp,
+    bottom = style?.paddingBottom?.dp ?: 0.dp,
+  )
+  val borderWidth = style?.borderWidth?.dp ?: 0.dp
+  val borderRadius = style?.borderRadius?.dp ?: 0.dp
+  val borderColor = style?.borderColor?.let { Color(android.graphics.Color.parseColor(it)) } ?: Color.Transparent
+
+  Box(
+    modifier = Modifier
+      .fillMaxWidth()
+      .then(height?.let { Modifier.height(it) } ?: Modifier)
+      .clip(RoundedCornerShape(borderRadius))
+      .border(borderWidth, borderColor, RoundedCornerShape(borderRadius))
+  ) {
+    BasicTextField(
+      state,
+      inputTransformation = InputTransformation.byValue { _, proposed ->
+        onTextChange(proposed.toString())
+        proposed
+      },
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(paddingValues)
+        .focusRequester(focusRequester),
+      textStyle = TextStyle(
+        color = textColor,
+        fontSize = fontSize,
+      ),
+      interactionSource = interactionSource,
+    )
+  }
+}
+
+class TextChangeEvent(
+  surfaceId: Int,
+  viewId: Int,
+  val value: String,
+) : Event<TextChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getCoalescingKey(): Short = 0
+
+  override fun getEventData(): WritableMap? = Arguments.createMap().also {
+
+    it.putString("value", value)
+  }
+
+  companion object {
+    const val EVENT_NAME = "onTextChange"
+  }
+}
+
+class FocusEvent(
+  surfaceId: Int,
+  viewId: Int,
+) : Event<FocusEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getCoalescingKey(): Short = 0
+
+  override fun getEventData(): WritableMap? = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "onFocus"
+  }
+}
+
+class BlurEvent(
+  surfaceId: Int,
+  viewId: Int,
+) : Event<BlurEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getCoalescingKey(): Short = 0
+
+  override fun getEventData(): WritableMap? = Arguments.createMap()
+
+  companion object {
+    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/ios/ControlledInputView.h

@@ -0,0 +1,14 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef ControlledInputViewNativeComponent_h
+#define ControlledInputViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ControlledInputView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* ControlledInputViewNativeComponent_h */

package/ios/ControlledInputView.mm

@@ -0,0 +1,108 @@
+#import "ControlledInputView.h"
+
+#if __has_include("ControlledInput-Swift.h")
+#import "ControlledInput-Swift.h"
+#else
+#import <ControlledInput/ControlledInput-Swift.h>
+#endif
+
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+#import <react/renderer/components/ControlledInputViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/ControlledInputViewSpec/Props.h>
+#import <react/renderer/components/ControlledInputViewSpec/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+@interface ControlledInputView () <RCTControlledInputViewViewProtocol>
+@end
+
+@implementation ControlledInputView {
+    RNControlledInput * _inputView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+    return concreteComponentDescriptorProvider<ControlledInputViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ControlledInputViewProps>();
+    _props = defaultProps;
+
+    _inputView = [[RNControlledInput alloc] initWithFrame:self.bounds];
+
+    self.contentView = _inputView;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+    const auto &oldViewProps = *std::static_pointer_cast<ControlledInputViewProps const>(_props);
+    const auto &newViewProps = *std::static_pointer_cast<ControlledInputViewProps const>(props);
+
+    if (oldViewProps.value != newViewProps.value) {
+        _inputView.value = [NSString stringWithUTF8String:newViewProps.value.c_str()];
+    }
+
+    // Update inputStyle props
+    const auto &style = newViewProps.inputStyle;
+    const auto &oldStyle = oldViewProps.inputStyle;
+
+    if (oldStyle.color != style.color) {
+        _inputView.textColor = RCTUIColorFromSharedColor(style.color);
+    }
+    
+    if (oldStyle.fontSize != style.fontSize) {
+        _inputView.fontSize = style.fontSize;
+    }
+    
+    if (oldStyle.height != style.height) {
+        _inputView.inputHeight = style.height;
+    }
+    
+    if (oldStyle.paddingTop != style.paddingTop || 
+        oldStyle.paddingBottom != style.paddingBottom ||
+        oldStyle.paddingLeft != style.paddingLeft ||
+        oldStyle.paddingRight != style.paddingRight) {
+        _inputView.padding = UIEdgeInsetsMake(style.paddingTop, style.paddingLeft, style.paddingBottom, style.paddingRight);
+    }
+    
+    if (oldStyle.borderWidth != style.borderWidth) {
+        _inputView.borderWidth = style.borderWidth;
+    }
+    
+    if (oldStyle.borderRadius != style.borderRadius) {
+        _inputView.borderRadius = style.borderRadius;
+    }
+    
+    if (oldStyle.borderColor != style.borderColor) {
+        _inputView.borderColor = RCTUIColorFromSharedColor(style.borderColor);
+    }
+
+    [super updateProps:props oldProps:oldProps];
+}
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
+{
+    if ([commandName isEqualToString:@"focus"]) {
+        NSLog(@"[ControlledInputView] handleCommand focus");
+        [_inputView focus];
+        return;
+    }
+
+    if ([commandName isEqualToString:@"blur"]) {
+        NSLog(@"[ControlledInputView] handleCommand blur");
+        [_inputView blur];
+        return;
+    }
+
+    [super handleCommand:commandName args:args];
+}
+
+@end

package/ios/RNControlledInput.swift

@@ -0,0 +1,48 @@
+import UIKit
+
+@objc(RNControlledInput)
+public class RNControlledInput: UIView {
+    
+    @objc public var value: String? {
+        didSet {
+            // Update UI
+        }
+    }
+    
+    @objc public var textColor: UIColor?
+    @objc public var fontSize: CGFloat = 16
+    @objc public var inputHeight: CGFloat = 0
+    @objc public var padding: UIEdgeInsets = .zero
+    @objc public var borderWidth: CGFloat = 0
+    @objc public var borderRadius: CGFloat = 0
+    @objc public var borderColor: UIColor?
+
+    public override var canBecomeFirstResponder: Bool {
+        true
+    }
+
+    @objc public func focus() {
+        print("[ControlledInputView] RNControlledInput.focus()")
+        _ = becomeFirstResponder()
+    }
+
+    @objc public func blur() {
+        print("[ControlledInputView] RNControlledInput.blur()")
+        _ = resignFirstResponder()
+    }
+
+    @objc public override init(frame: CGRect) {
+        super.init(frame: frame)
+        self.backgroundColor = .red
+        self.translatesAutoresizingMaskIntoConstraints = false
+        
+        NSLayoutConstraint.activate([
+            self.widthAnchor.constraint(equalToConstant: 100),
+            self.heightAnchor.constraint(equalToConstant: 100)
+        ])
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}

package/lib/module/ControlledInputViewNativeComponent.ts

@@ -0,0 +1,55 @@
+import {
+  codegenNativeComponent,
+  type ViewProps,
+  type ColorValue,
+  type HostComponent,
+} from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import type {
+  BubblingEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+interface TextChangeEvent {
+  value: string;
+}
+
+interface FocusEvent {
+  // Empty event
+}
+
+interface BlurEvent {
+  // Empty event
+}
+
+interface InputStyle {
+  color?: ColorValue;
+  fontSize?: Double;
+  height?: Double;
+  paddingTop?: Double;
+  paddingBottom?: Double;
+  paddingLeft?: Double;
+  paddingRight?: Double;
+  borderWidth?: Double;
+  borderRadius?: Double;
+  borderColor?: ColorValue;
+}
+
+export interface NativeProps extends ViewProps {
+  value?: string;
+  inputStyle?: InputStyle;
+  onTextChange?: BubblingEventHandler<Readonly<TextChangeEvent>>;
+  onFocus?: BubblingEventHandler<Readonly<FocusEvent>>;
+  onBlur?: BubblingEventHandler<Readonly<BlurEvent>>;
+}
+
+export interface NativeCommands {
+  focus: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  blur: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['focus', 'blur'],
+});
+
+export default codegenNativeComponent<NativeProps>('ControlledInputView');

package/lib/module/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { Platform } from 'react-native';
+import ControlledInputViewNativeComponent, { Commands } from './ControlledInputViewNativeComponent';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ControlledInputView = /*#__PURE__*/forwardRef((props, ref) => {
+  const nativeRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => {
+      if (!nativeRef.current) {
+        return;
+      }
+      if (Platform.OS === 'ios' || Platform.OS === 'android') {
+        console.log(`[ControlledInputView] ${Platform.OS} blur command -> native`);
+        Commands.blur(nativeRef.current);
+      }
+    },
+    focus: () => {
+      if (!nativeRef.current) {
+        return;
+      }
+      if (Platform.OS === 'ios' || Platform.OS === 'android') {
+        console.log(`[ControlledInputView] ${Platform.OS} focus command -> native`);
+        Commands.focus(nativeRef.current);
+      }
+    }
+  }));
+  return /*#__PURE__*/_jsx(ControlledInputViewNativeComponent, {
+    ...props,
+    ref: nativeRef
+  });
+});
+export * from './ControlledInputViewNativeComponent';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useImperativeHandle","useRef","Platform","ControlledInputViewNativeComponent","Commands","jsx","_jsx","ControlledInputView","props","ref","nativeRef","blur","current","OS","console","log","focus"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,UAAU,EACVC,mBAAmB,EACnBC,MAAM,QAGD,OAAO;AACd,SAASC,QAAQ,QAAQ,cAAc;AACvC,OAAOC,kCAAkC,IACvCC,QAAQ,QACH,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS9C,OAAO,MAAMC,mBAAmB,gBAAGR,UAAU,CAG3C,CAACS,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAMC,SAAS,GACbT,MAAM,CAAwD,IAAI,CAAC;EAErED,mBAAmB,CAACS,GAAG,EAAE,OAAO;IAC9BE,IAAI,EAAEA,CAAA,KAAM;MACV,IAAI,CAACD,SAAS,CAACE,OAAO,EAAE;QACtB;MACF;MAEA,IAAIV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,SAAS,EAAE;QACtDC,OAAO,CAACC,GAAG,CACT,yBAAyBb,QAAQ,CAACW,EAAE,yBACtC,CAAC;QACDT,QAAQ,CAACO,IAAI,CAACD,SAAS,CAACE,OAAO,CAAC;MAClC;IACF,CAAC;IACDI,KAAK,EAAEA,CAAA,KAAM;MACX,IAAI,CAACN,SAAS,CAACE,OAAO,EAAE;QACtB;MACF;MAEA,IAAIV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,SAAS,EAAE;QACtDC,OAAO,CAACC,GAAG,CACT,yBAAyBb,QAAQ,CAACW,EAAE,0BACtC,CAAC;QACDT,QAAQ,CAACY,KAAK,CAACN,SAAS,CAACE,OAAO,CAAC;MACnC;IACF;EACF,CAAC,CAAC,CAAC;EAEH,oBACEN,IAAA,CAACH,kCAAkC;IAAA,GAAKK,KAAK;IAAEC,GAAG,EAAEC;EAAiB,CAAE,CAAC;AAE5E,CAAC,CAAC;AAEF,cAAc,sCAAsC","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/react-native-codegen.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=react-native-codegen.d.js.map

package/lib/module/react-native-codegen.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["react-native-codegen.d.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,36 @@
+import { type ViewProps, type ColorValue, type HostComponent } from 'react-native';
+import type { BubblingEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
+interface TextChangeEvent {
+    value: string;
+}
+interface FocusEvent {
+}
+interface BlurEvent {
+}
+interface InputStyle {
+    color?: ColorValue;
+    fontSize?: Double;
+    height?: Double;
+    paddingTop?: Double;
+    paddingBottom?: Double;
+    paddingLeft?: Double;
+    paddingRight?: Double;
+    borderWidth?: Double;
+    borderRadius?: Double;
+    borderColor?: ColorValue;
+}
+export interface NativeProps extends ViewProps {
+    value?: string;
+    inputStyle?: InputStyle;
+    onTextChange?: BubblingEventHandler<Readonly<TextChangeEvent>>;
+    onFocus?: BubblingEventHandler<Readonly<FocusEvent>>;
+    onBlur?: BubblingEventHandler<Readonly<BlurEvent>>;
+}
+export interface NativeCommands {
+    focus: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+    blur: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=ControlledInputViewNativeComponent.d.ts.map

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

@@ -0,0 +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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,UAAU,CAAC;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IACrD,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,IAAI,CAAC;CACvE;AAED,eAAO,MAAM,QAAQ,EAAE,cAErB,CAAC;;AAEH,wBAA0E"}

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

@@ -0,0 +1,9 @@
+export interface ControlledInputViewRef {
+    blur: () => void;
+    focus: () => void;
+}
+export declare const ControlledInputView: import("react").ForwardRefExoticComponent<Omit<Omit<import("./ControlledInputViewNativeComponent").NativeProps, "ref"> & {
+    ref?: React.Ref<import("react-native").HostInstance>;
+}, "ref"> & import("react").RefAttributes<ControlledInputViewRef>>;
+export * from './ControlledInputViewNativeComponent';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB;;kEAqC9B,CAAC;AAEH,cAAc,sCAAsC,CAAC"}

package/package.json

@@ -0,0 +1,174 @@
+{
+  "name": "react-native-controlled-input",
+  "version": "0.2.0",
+  "description": "React Native Controlled Inputative Controlled Input",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-controlled-input-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/veliseev93/react-native-controlled-input.git"
+  },
+  "author": "veliseev <veliseev@ronasit.com> (https://github.com/veliseev93)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/veliseev93/react-native-controlled-input/issues"
+  },
+  "homepage": "https://github.com/veliseev93/react-native-controlled-input#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.17",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "ControlledInputViewSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.controlledinput"
+    },
+    "ios": {
+      "componentProvider": {
+        "ControlledInputView": "ControlledInputView"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.1"
+  }
+}

package/src/ControlledInputViewNativeComponent.ts

@@ -0,0 +1,55 @@
+import {
+  codegenNativeComponent,
+  type ViewProps,
+  type ColorValue,
+  type HostComponent,
+} from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import type {
+  BubblingEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+interface TextChangeEvent {
+  value: string;
+}
+
+interface FocusEvent {
+  // Empty event
+}
+
+interface BlurEvent {
+  // Empty event
+}
+
+interface InputStyle {
+  color?: ColorValue;
+  fontSize?: Double;
+  height?: Double;
+  paddingTop?: Double;
+  paddingBottom?: Double;
+  paddingLeft?: Double;
+  paddingRight?: Double;
+  borderWidth?: Double;
+  borderRadius?: Double;
+  borderColor?: ColorValue;
+}
+
+export interface NativeProps extends ViewProps {
+  value?: string;
+  inputStyle?: InputStyle;
+  onTextChange?: BubblingEventHandler<Readonly<TextChangeEvent>>;
+  onFocus?: BubblingEventHandler<Readonly<FocusEvent>>;
+  onBlur?: BubblingEventHandler<Readonly<BlurEvent>>;
+}
+
+export interface NativeCommands {
+  focus: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+  blur: (viewRef: React.ElementRef<HostComponent<NativeProps>>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['focus', 'blur'],
+});
+
+export default codegenNativeComponent<NativeProps>('ControlledInputView');

package/src/index.tsx

@@ -0,0 +1,59 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ComponentProps,
+  type ElementRef,
+} from 'react';
+import { Platform } from 'react-native';
+import ControlledInputViewNativeComponent, {
+  Commands,
+} from './ControlledInputViewNativeComponent';
+
+type NativeProps = ComponentProps<typeof ControlledInputViewNativeComponent>;
+
+export interface ControlledInputViewRef {
+  blur: () => void;
+  focus: () => void;
+}
+
+export const ControlledInputView = forwardRef<
+  ControlledInputViewRef,
+  NativeProps
+>((props, ref) => {
+  const nativeRef =
+    useRef<ElementRef<typeof ControlledInputViewNativeComponent>>(null);
+
+  useImperativeHandle(ref, () => ({
+    blur: () => {
+      if (!nativeRef.current) {
+        return;
+      }
+
+      if (Platform.OS === 'ios' || Platform.OS === 'android') {
+        console.log(
+          `[ControlledInputView] ${Platform.OS} blur command -> native`
+        );
+        Commands.blur(nativeRef.current);
+      }
+    },
+    focus: () => {
+      if (!nativeRef.current) {
+        return;
+      }
+
+      if (Platform.OS === 'ios' || Platform.OS === 'android') {
+        console.log(
+          `[ControlledInputView] ${Platform.OS} focus command -> native`
+        );
+        Commands.focus(nativeRef.current);
+      }
+    },
+  }));
+
+  return (
+    <ControlledInputViewNativeComponent {...props} ref={nativeRef as any} />
+  );
+});
+
+export * from './ControlledInputViewNativeComponent';

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

@@ -0,0 +1,21 @@
+declare module 'react-native/Libraries/Types/CodegenTypes' {
+  export type Double = number;
+  export type Float = number;
+  export type Int32 = number;
+  export type UnsafeObject = object;
+
+  export interface BubblingEventHandler<T> {
+    (event: { nativeEvent: T }): void;
+  }
+
+  export interface DirectEventHandler<T> {
+    (event: { nativeEvent: T }): void;
+  }
+}
+
+declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
+  import type { HostComponent } from 'react-native';
+  export default function codegenNativeComponent<T>(
+    componentName: string
+  ): HostComponent<T>;
+}