diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..65365be
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+indent_style = space
+indent_size = 2
+
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..e27f70f
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+*.pbxproj -text
+# specific for windows script files
+*.bat text eol=crlf
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..b1ea67d
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,32 @@
+name: Release to NPM
+
+on:
+ release:
+ types: [published]
+
+jobs:
+ publish:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout repo
+ uses: actions/checkout@v6
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: '22'
+ cache: 'npm'
+ registry-url: 'https://registry.npmjs.org/'
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Build package
+ run: |
+ if node -e "process.exit(require('./package.json').scripts?.build ? 0 : 1)"; then npm run build; fi
+
+ - name: Publish to NPM
+ run: npm run release
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
new file mode 100644
index 0000000..b555363
--- /dev/null
+++ b/.github/workflows/validate.yml
@@ -0,0 +1,36 @@
+name: Validate
+
+on:
+ pull_request:
+ branches: [main, master, development]
+ push:
+ branches: [main, master, development]
+
+jobs:
+ validate:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v6
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v6
+ with:
+ node-version: '22'
+ cache: 'npm'
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Run linting
+ run: |
+ if node -e "process.exit(require('./package.json').scripts?.lint ? 0 : 1)"; then npm run lint; fi
+
+ - name: Run tests
+ run: |
+ if node -e "process.exit(require('./package.json').scripts?.test ? 0 : 1)"; then npm test; fi
+
+ - name: Run build
+ run: |
+ if node -e "process.exit(require('./package.json').scripts?.build ? 0 : 1)"; then npm run build; fi
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..99a1074
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,78 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+
+# VSCode
+.vscode/
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+**/.xcode.env.local
+
+# Android/IJ
+#
+.classpath
+.cxx
+.gradle
+.idea
+.project
+.settings
+local.properties
+android.iml
+
+# Cocoapods
+#
+example/ios/Pods
+
+# Ruby
+example/vendor/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Expo
+.expo/
+
+# Turborepo
+.turbo/
+
+# generated by bob
+lib/
+
+# React Native Codegen
+ios/generated
+android/generated
+
+# React Native Nitro Modules
+nitrogen/
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..c004e35
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v22.20.0
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..2d1d6c0
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+ printWidth: 120,
+ arrowParens: 'always',
+ tabWidth: 2,
+ semi: true,
+ bracketSameLine: true,
+ jsxSingleQuote: true,
+ singleQuote: true,
+ useTabs: false,
+};
diff --git a/.watchmanconfig b/.watchmanconfig
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/.watchmanconfig
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..9b5ef46
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,127 @@
+# Contributing
+
+This document provides guidelines for contributing to this project.
+
+## Development
+
+### Prerequisites
+
+- Node.js 22+
+- npm
+- For iOS: Xcode + CocoaPods (`gem install cocoapods`)
+- For Android: Android Studio + JDK 17+
+
+### Example app
+
+An example React Native application lives in the `example` directory. It demonstrates the component in action and serves as a testing ground during development.
+
+Run the Metro bundler from the repo root:
+
+```sh
+npm run example
+```
+
+Then launch the app on your target platform from the `example` directory:
+
+```sh
+# iOS
+cd example && npx react-native run-ios
+
+# Android
+cd example && npx react-native run-android
+```
+
+For iOS, install CocoaPods first:
+
+```sh
+cd example/ios && bundle exec pod install
+```
+
+### Local development
+
+1. **Clone and install dependencies**
+ - Clone the repo and navigate to the project directory
+ - Run `npm install` to install all dependencies
+
+ ```sh
+ git clone https://github.com/RonasIT/react-native-controlled-input.git
+ cd react-native-controlled-input
+ npm install
+ ```
+
+2. **Make changes**
+ - Edit source files under `src/`
+ - For native changes, edit files under `ios/` or `android/`
+
+3. **Test your changes**
+ - Run `npm run lint` to type-check (`tsc`) and lint the codebase (`eslint`)
+ - Verify your changes work end-to-end in the example app
+
+4. **Submit changes**
+ - Create a pull request with your modifications
+ - Include clear descriptions of changes
+ - Reference any related issues or discussions
+
+## Build
+
+Build the JS output (outputs to `lib/`):
+
+```sh
+npm run build
+```
+
+This runs `react-native-builder-bob` and produces ESM + TypeScript declaration files.
+
+To clean build artifacts:
+
+```sh
+npm run clean
+```
+
+## Repository guidelines
+
+### Branch naming
+
+Use descriptive branch names and follow [Conventional Branch](https://conventional-branch.github.io/) guidelines.
+
+### Commit messages
+
+Follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) format
+
+### Code checks
+
+Repository has pre-commit code style and correctness checks. You can run them manually using `lint` and `format` scripts.
+
+### Pull request process
+
+1. **Create a feature branch** from `main`
+2. **Make your changes** following the coding standards
+3. **Test your changes** thoroughly
+4. **Update documentation** if needed
+5. **Submit a pull request** with a clear description
+
+## Releases
+
+To create a new release:
+
+1. **Bump the version**: In the `plugin` directory run `npm version {patch|minor|major}` to update the version number in `package.json` and create a git commit and tag
+ - `patch`: Bug fixes (0.2.0 → 0.2.1)
+ - `minor`: New features (0.2.0 → 0.3.0)
+ - `major`: Breaking changes (0.2.0 → 1.0.0)
+
+2. **Push changes**: Create commit, tag and push them to the repository:
+
+ ```bash
+ git commit -m "chore: release v0.18.0"
+ git push && git push --tags
+ ```
+
+3. **Create GitHub release**: Go to the [GitHub Releases](../../releases) page and:
+ - Click "Create a new release"
+ - Select the tag created in step 1
+ - Add release notes describing the changes
+ - Click "Publish release"
+
+4. **Automatic NPM publication**: Once the GitHub release is published, the package will be automatically published to NPM via GitHub Actions workflow.
+
+> **Note**: Make sure you have the `NPM_TOKEN` secret configured in your repository settings for the NPM publication to work.
diff --git a/ControlledInput.podspec b/ControlledInput.podspec
new file mode 100644
index 0000000..055b2ab
--- /dev/null
+++ b/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/RonasIT/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
diff --git a/README.md b/README.md
index 84ce91a..394c62b 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,129 @@
-# react-native-controlled-input
-React Native Controlled Input
+# @ronas-it/react-native-controlled-input
+
+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.
+
+**`ControlledInputView`** (left) vs React Native **`TextInput`** (right), same JS formatting: with `TextInput`, rejected characters and intermediate states often flash until the filtered `value` is applied.
+
+### Promo / invite code (ABCD-1234)
+
+| ControlledInputView | TextInput |
+| :-----------------: | :-------: |
+| 
| 
|
+
+### Card expiry (MM/YY)
+
+| ControlledInputView | TextInput |
+| :-----------------: | :-------: |
+| 
| 
|
+
+## Problem
+
+With a regular controlled `TextInput`, native input is applied first, then JS receives the change, filters it, and sends the next `value` back.
+
+That means invalid characters can still flash in the field for a moment.
+
+`@ronas-it/react-native-controlled-input` is built for this exact case: you decide what text is valid, and the displayed value stays driven by `value`.
+
+
+## Install
+
+```sh
+npm install @ronas-it/react-native-controlled-input
+```
+
+Requires React Native New Architecture / Fabric.
+
+Compatible with [`react-native-keyboard-controller`](https://github.com/kirillzyusko/react-native-keyboard-controller).
+
+## Example
+
+```tsx
+import { useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+ ControlledInputView,
+ type ControlledInputViewRef,
+} from '@ronas-it/react-native-controlled-input';
+
+export function Example() {
+ const [value, setValue] = useState('');
+ const inputRef = useRef(null);
+
+ return (
+ setValue(text.replace(/\d/g, ''))}
+ style={styles.input}
+ onFocus={() => {}}
+ onBlur={() => {}}
+ />
+ );
+}
+
+const styles = StyleSheet.create({
+ input: {
+ height: 48,
+ borderWidth: 1,
+ borderColor: '#ccc',
+ borderRadius: 8,
+ paddingHorizontal: 12,
+ fontSize: 16,
+ color: '#111',
+ },
+});
+```
+
+```tsx
+inputRef.current?.focus();
+inputRef.current?.blur();
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Current input value. |
+| `onChangeText` | `(value: string) => void` | Called with the next text value. Filter it and update `value`. |
+| `onFocus` | `() => void` | Called when the text input is focused. |
+| `onBlur` | `() => void` | Called when the text input is blurred. |
+| `onSubmitEditing` | `() => 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). |
+| `autoCorrect` | `boolean` (default `true`) | Toggles auto-correct. Same as React Native [`TextInput`](https://reactnative.dev/docs/textinput#autocorrect). |
+| `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
+
+The same `style` API is supported on both iOS and Android.
+
+Commonly used supported styles:
+
+- `color`, `fontSize`, `fontFamily`
+- `padding`, `paddingVertical`, `paddingHorizontal`
+- `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`, `paddingStart`, `paddingEnd`
+- `borderWidth`, `borderRadius`, `borderColor`, `backgroundColor`
+- layout styles like `width`, `height`, `margin`, `flex`
+
+Implementation differs internally between platforms, but usage is the same for library consumers.
+
+## Fonts
+
+In Expo projects, **`fontFamily` on this input only applies when the font is linked for native use**. Relying on runtime loading alone (`useFonts` / `loadAsync`) is often not enough here; use the **expo-font config plugin** so fonts are embedded at build time. See [Expo Font — Configuration in app config](https://docs.expo.dev/versions/latest/sdk/font/#configuration-in-app-config).
+
+## Ref
+
+- `focus()`
+- `blur()`
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
diff --git a/android/build.gradle b/android/build.gradle
new file mode 100644
index 0000000..45d192b
--- /dev/null
+++ b/android/build.gradle
@@ -0,0 +1,94 @@
+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'
+ implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.8.7'
+ implementation 'androidx.savedstate:savedstate-ktx:1.2.1'
+ debugImplementation 'androidx.compose.ui:ui-tooling'
+}
diff --git a/android/gradle.properties b/android/gradle.properties
new file mode 100644
index 0000000..7d73b9d
--- /dev/null
+++ b/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
diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..a2f47b6
--- /dev/null
+++ b/android/src/main/AndroidManifest.xml
@@ -0,0 +1,2 @@
+
+
diff --git a/android/src/main/java/com/controlledinput/ControlledInputPackage.kt b/android/src/main/java/com/controlledinput/ControlledInputPackage.kt
new file mode 100644
index 0000000..db9b932
--- /dev/null
+++ b/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> {
+ val viewManagers: MutableList> = ArrayList()
+ viewManagers.add(ControlledInputViewManager())
+ return viewManagers
+ }
+
+ override fun createNativeModules(reactContext: ReactApplicationContext): List {
+ return emptyList()
+ }
+}
diff --git a/android/src/main/java/com/controlledinput/ControlledInputView.kt b/android/src/main/java/com/controlledinput/ControlledInputView.kt
new file mode 100644
index 0000000..05619e7
--- /dev/null
+++ b/android/src/main/java/com/controlledinput/ControlledInputView.kt
@@ -0,0 +1,401 @@
+package com.controlledinput
+
+import android.content.Context
+import android.util.AttributeSet
+import android.util.TypedValue
+import android.view.View
+import android.view.inputmethod.InputMethodManager
+import android.widget.EditText
+import android.widget.LinearLayout
+import androidx.annotation.UiThread
+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 androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.LifecycleRegistry
+import androidx.lifecycle.findViewTreeLifecycleOwner
+import androidx.lifecycle.setViewTreeLifecycleOwner
+import androidx.savedstate.SavedStateRegistryOwner
+import androidx.savedstate.setViewTreeSavedStateRegistryOwner
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import kotlinx.coroutines.flow.MutableStateFlow
+
+/**
+ * - [shouldUseAndroidLayout]: requestLayout posts measureAndLayout
+ * - onMeasure skips child [ComposeView] until attached (window + WindowRecomposer)
+ */
+class ControlledInputView : LinearLayout, LifecycleOwner {
+ 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)
+ }
+
+ private val lifecycleRegistry = LifecycleRegistry(this)
+ override val lifecycle: Lifecycle get() = lifecycleRegistry
+
+ internal lateinit var viewModel: JetpackComposeViewModel
+ private val blurSignal = MutableStateFlow(0)
+ private val focusSignal = MutableStateFlow(0)
+ private lateinit var composeView: ComposeView
+ private var usesLocalFallbackLifecycle = false
+ private var windowLifecycleBound = false
+
+ /**
+ * Hidden [EditText] used only as [FocusedInputObserver.lastFocusedInput] from
+ * https://github.com/kirillzyusko/react-native-keyboard-controller; [syncUpLayout] reads
+ * [EditText]-scoped geometry. It is NOT focused and does not participate in the focus
+ * chain — we push state via reflection + synthetic selection events instead.
+ */
+ private val kbcLayoutHost: EditText by lazy {
+ EditText(context).also { v ->
+ v.layoutParams = LayoutParams(0, 0)
+ v.alpha = 0f
+ v.isFocusable = false
+ v.isFocusableInTouchMode = false
+ v.showSoftInputOnFocus = false
+ v.isClickable = false
+ v.isCursorVisible = false
+ v.isLongClickable = false
+ }
+ }
+
+ /**
+ * EdgeToEdgeViewRegistry → KeyboardAnimationCallback + FocusedInputObserver
+ * (https://github.com/kirillzyusko/react-native-keyboard-controller).
+ * Null if that library is missing or not initialized.
+ */
+ private fun resolveKbcCallbackAndObserver(): Pair? {
+ try {
+ val registryClass =
+ Class.forName("com.reactnativekeyboardcontroller.views.EdgeToEdgeViewRegistry")
+ val registryInstance = registryClass.getField("INSTANCE").get(null)
+ val edgeToEdgeView =
+ registryClass.getDeclaredMethod("get").invoke(registryInstance) ?: return null
+
+ val callbackField =
+ edgeToEdgeView.javaClass.declaredFields.firstOrNull {
+ it.type.simpleName == "KeyboardAnimationCallback"
+ } ?: return null
+ callbackField.isAccessible = true
+ val callback = callbackField.get(edgeToEdgeView) ?: return null
+
+ val observerField =
+ callback.javaClass.declaredFields.firstOrNull {
+ it.type.simpleName == "FocusedInputObserver"
+ } ?: return null
+ observerField.isAccessible = true
+ val observer = observerField.get(callback) ?: return null
+ return Pair(callback, observer)
+ } catch (_: ClassNotFoundException) {
+ return null
+ } catch (_: Exception) {
+ return null
+ }
+ }
+
+ private fun setKbcViewTagFocused(callback: Any) {
+ try {
+ val f = callback.javaClass.getDeclaredField("viewTagFocused")
+ f.isAccessible = true
+ f.setInt(callback, id)
+ } catch (_: Exception) {
+ }
+ }
+
+ private fun setKbcFocusedInputHolder() {
+ try {
+ val holderClass =
+ Class.forName("com.reactnativekeyboardcontroller.traversal.FocusedInputHolder")
+ val instance = holderClass.getField("INSTANCE").get(null)
+ holderClass
+ .getMethod("set", EditText::class.java)
+ .invoke(instance, kbcLayoutHost)
+ } catch (_: Exception) {
+ }
+ }
+
+ /**
+ * `selection.end.y` for https://github.com/kirillzyusko/react-native-keyboard-controller / JS
+ * customHeight: prefer explicit style height (dp, same as padding in [InputStyle]), else measured
+ * view height in dp.
+ */
+ private fun approximateSelectionEndYDp(): Double {
+ viewModel.inputStyle.value?.height?.takeIf { it > 0 }?.let { return it }
+ val dm = resources.displayMetrics
+ if (height > 0) {
+ return (height / dm.density).toDouble()
+ }
+ return 12.0
+ }
+
+ private fun dispatchSyntheticKbcSelectionEvent(observer: Any) {
+ val reactContext = context as? ReactContext ?: return
+ try {
+ val epField = observer.javaClass.getDeclaredField("eventPropagationView")
+ epField.isAccessible = true
+ val propagationId = (epField.get(observer) as View).id
+
+ val surfaceId = UIManagerHelper.getSurfaceId(this)
+ val targetId = id
+ val endY = approximateSelectionEndYDp()
+
+ val dataClz =
+ Class.forName("com.reactnativekeyboardcontroller.events.FocusedInputSelectionChangedEventData")
+ val dataCtor =
+ dataClz.declaredConstructors.singleOrNull { it.parameterTypes.size == 7 } ?: return
+ dataCtor.isAccessible = true
+ val data =
+ dataCtor.newInstance(targetId, 0.0, 0.0, 0.0, endY, 0, 0)
+
+ val eventClz =
+ Class.forName("com.reactnativekeyboardcontroller.events.FocusedInputSelectionChangedEvent")
+ val eventCtor =
+ eventClz.getConstructor(
+ Int::class.javaPrimitiveType,
+ Int::class.javaPrimitiveType,
+ dataClz,
+ )
+ val event = eventCtor.newInstance(surfaceId, propagationId, data) as Event<*>
+
+ UIManagerHelper.getEventDispatcherForReactTag(reactContext, propagationId)
+ ?.dispatchEvent(event)
+ } catch (_: Exception) {
+ }
+ }
+
+ /**
+ * Pushes ControlledInput state into https://github.com/kirillzyusko/react-native-keyboard-controller
+ * without stealing Compose focus: viewTagFocused, lastFocusedInput, FocusedInputHolder,
+ * syncUpLayout, synthetic selection.
+ */
+ private fun syncKeyboardControllerFocusedInput() {
+ kbcLayoutHost.id = id
+ viewModel.inputStyle.value?.fontSize?.toFloat()?.let {
+ kbcLayoutHost.setTextSize(TypedValue.COMPLEX_UNIT_SP, it)
+ }
+
+ val (callback, observer) = resolveKbcCallbackAndObserver() ?: return
+
+ setKbcViewTagFocused(callback)
+ setKbcFocusedInputHolder()
+
+ try {
+ val lastFocusedField = observer.javaClass.getDeclaredField("lastFocusedInput")
+ lastFocusedField.isAccessible = true
+ lastFocusedField.set(observer, kbcLayoutHost)
+
+ val syncMethod = observer.javaClass.getDeclaredMethod("syncUpLayout")
+ syncMethod.isAccessible = true
+ syncMethod.invoke(observer)
+
+ dispatchSyntheticKbcSelectionEvent(observer)
+ } catch (_: Exception) {
+ }
+ }
+
+ private val shouldUseAndroidLayout = true
+
+ override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+ super.onLayout(changed, l, t, r, b)
+ kbcLayoutHost.layout(0, 0, width, height)
+ }
+
+ override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+ if (shouldUseAndroidLayout && !isAttachedToWindow) {
+ setMeasuredDimension(
+ MeasureSpec.getSize(widthMeasureSpec).coerceAtLeast(0),
+ MeasureSpec.getSize(heightMeasureSpec).coerceAtLeast(0)
+ )
+ return
+ }
+ super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+ }
+
+ override fun requestLayout() {
+ super.requestLayout()
+ if (shouldUseAndroidLayout) {
+ post { measureAndLayout() }
+ }
+ }
+
+ @UiThread
+ private fun measureAndLayout() {
+ measure(
+ MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+ MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+ )
+ layout(left, top, right, bottom)
+ }
+
+ override fun onAttachedToWindow() {
+ super.onAttachedToWindow()
+ bindComposeToWindowLifecycle()
+ }
+
+ override fun onDetachedFromWindow() {
+ if (usesLocalFallbackLifecycle) {
+ lifecycleRegistry.currentState = Lifecycle.State.CREATED
+ }
+ super.onDetachedFromWindow()
+ }
+
+ private fun bindComposeToWindowLifecycle() {
+ if (windowLifecycleBound) {
+ return
+ }
+ windowLifecycleBound = true
+
+ val activity = (context as? ReactContext)?.currentActivity
+ val activityOwner = activity as? LifecycleOwner
+ if (activityOwner != null) {
+ usesLocalFallbackLifecycle = false
+ composeView.setViewTreeLifecycleOwner(activityOwner)
+ val savedStateOwner = activity as? SavedStateRegistryOwner
+ if (savedStateOwner != null) {
+ composeView.setViewTreeSavedStateRegistryOwner(savedStateOwner)
+ }
+ } else {
+ findViewTreeLifecycleOwnerFromAncestors()?.let { parentOwner ->
+ usesLocalFallbackLifecycle = false
+ composeView.setViewTreeLifecycleOwner(parentOwner)
+ } ?: run {
+ usesLocalFallbackLifecycle = true
+ composeView.setViewTreeLifecycleOwner(this)
+ lifecycleRegistry.currentState = Lifecycle.State.RESUMED
+ }
+ }
+ }
+
+ private fun findViewTreeLifecycleOwnerFromAncestors(): LifecycleOwner? {
+ var parent = this.parent as? View ?: return null
+ while (true) {
+ parent.findViewTreeLifecycleOwner()?.let {
+ return it
+ }
+ parent = parent.parent as? View ?: return null
+ }
+ }
+
+ fun blur() {
+ blurSignal.value = blurSignal.value + 1
+ val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+ imm.hideSoftInputFromWindow(windowToken, 0)
+ clearFocus()
+ }
+
+ fun focus() {
+ focusSignal.value = focusSignal.value + 1
+ }
+
+ private fun configureComponent(context: Context) {
+ setBackgroundColor(android.graphics.Color.TRANSPARENT)
+ clipChildren = false
+ clipToPadding = false
+
+ layoutParams = LayoutParams(
+ LayoutParams.MATCH_PARENT,
+ LayoutParams.MATCH_PARENT
+ )
+
+ viewModel = JetpackComposeViewModel()
+
+ addView(kbcLayoutHost)
+
+ composeView = ComposeView(context).also { cv ->
+ cv.layoutParams = LayoutParams(
+ LayoutParams.MATCH_PARENT,
+ LayoutParams.MATCH_PARENT
+ )
+ cv.setBackgroundColor(android.graphics.Color.TRANSPARENT)
+ cv.setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+ cv.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() }
+
+ LaunchedEffect(blurTick) {
+ if (blurTick > 0) {
+ focusManager.clearFocus(force = true)
+ }
+ }
+
+ LaunchedEffect(focusTick) {
+ if (focusTick > 0) {
+ focusRequester.requestFocus()
+ }
+ }
+
+ JetpackComposeView(
+ value = value,
+ inputStyle = viewModel.inputStyle,
+ autoComplete = viewModel.autoComplete,
+ placeholder = viewModel.placeholder,
+ placeholderTextColor = viewModel.placeholderTextColor,
+ selectionColor = viewModel.selectionColor,
+ autoCapitalize = viewModel.autoCapitalize,
+ autoCorrect = viewModel.autoCorrect,
+ keyboardType = viewModel.keyboardType,
+ returnKeyType = viewModel.returnKeyType,
+ onTextChange = { value ->
+ val surfaceId = UIManagerHelper.getSurfaceId(context)
+ val viewId = this@ControlledInputView.id
+ UIManagerHelper
+ .getEventDispatcherForReactTag(context as ReactContext, viewId)
+ ?.dispatchEvent(
+ TextChangeEvent(
+ surfaceId,
+ viewId,
+ value
+ )
+ )
+ },
+ onFocus = {
+ val surfaceId = UIManagerHelper.getSurfaceId(context)
+ val viewId = this@ControlledInputView.id
+ UIManagerHelper
+ .getEventDispatcherForReactTag(context as ReactContext, viewId)
+ ?.dispatchEvent(FocusEvent(surfaceId, viewId))
+ post { syncKeyboardControllerFocusedInput() }
+ },
+ onBlur = {
+ val surfaceId = UIManagerHelper.getSurfaceId(context)
+ val viewId = this@ControlledInputView.id
+ UIManagerHelper
+ .getEventDispatcherForReactTag(context as ReactContext, viewId)
+ ?.dispatchEvent(BlurEvent(surfaceId, viewId))
+ },
+ onSubmitEditing = {
+ val surfaceId = UIManagerHelper.getSurfaceId(context)
+ val viewId = this@ControlledInputView.id
+ UIManagerHelper
+ .getEventDispatcherForReactTag(context as ReactContext, viewId)
+ ?.dispatchEvent(SubmitEditingEvent(surfaceId, viewId))
+ },
+ focusRequester = focusRequester
+ )
+ }
+ addView(cv)
+ }
+ }
+}
diff --git a/android/src/main/java/com/controlledinput/ControlledInputViewManager.kt b/android/src/main/java/com/controlledinput/ControlledInputViewManager.kt
new file mode 100644
index 0000000..d3824ab
--- /dev/null
+++ b/android/src/main/java/com/controlledinput/ControlledInputViewManager.kt
@@ -0,0 +1,120 @@
+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(),
+ ControlledInputViewManagerInterface {
+ private val mDelegate: ViewManagerDelegate
+
+ init {
+ mDelegate = ControlledInputViewManagerDelegate(this)
+ }
+
+ override fun getDelegate(): ViewManagerDelegate? {
+ 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?) {
+ view.viewModel.setValue(value ?: "")
+ }
+
+ @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 = "autoCorrect", defaultBoolean = true)
+ override fun setAutoCorrect(view: ControlledInputView, autoCorrect: Boolean) {
+ view.viewModel.setAutoCorrect(autoCorrect)
+ }
+
+ @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) {
+ 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,
+ fontFamily = if (inputStyle.hasKey("fontFamily")) inputStyle.getString("fontFamily") 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,
+ backgroundColor = if (inputStyle.hasKey("backgroundColor")) inputStyle.getString("backgroundColor") else null,
+ )
+ }
+ view.viewModel.setInputStyle(style)
+ }
+
+ companion object {
+ const val NAME = "ControlledInputView"
+ }
+
+ override fun getExportedCustomDirectEventTypeConstants(): MutableMap = mutableMapOf(
+ TextChangeEvent.EVENT_NAME to MapBuilder.of("registrationName", "onChangeText"),
+ FocusEvent.EVENT_NAME to MapBuilder.of("registrationName", "onFocus"),
+ BlurEvent.EVENT_NAME to MapBuilder.of("registrationName", "onBlur"),
+ SubmitEditingEvent.EVENT_NAME to MapBuilder.of("registrationName", "onSubmitEditing")
+ )
+
+ override fun focus(view: ControlledInputView?) {
+ view?.focus()
+ }
+
+ override fun blur(view: ControlledInputView?) {
+ view?.blur()
+ }
+}
diff --git a/android/src/main/java/com/controlledinput/JetpackComposeView.kt b/android/src/main/java/com/controlledinput/JetpackComposeView.kt
new file mode 100644
index 0000000..f5f9f86
--- /dev/null
+++ b/android/src/main/java/com/controlledinput/JetpackComposeView.kt
@@ -0,0 +1,341 @@
+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
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.clip
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.ui.unit.dp
+import androidx.compose.foundation.text.input.InputTransformation
+import androidx.compose.foundation.text.input.KeyboardActionHandler
+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 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 com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import kotlinx.coroutines.flow.StateFlow
+
+data class InputStyle(
+ val color: String? = null,
+ val fontSize: Double? = null,
+ val height: Double? = null,
+ val fontFamily: String? = 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,
+ val backgroundColor: String? = null,
+)
+
+@Composable
+fun JetpackComposeView(
+ value: String,
+ inputStyle: StateFlow,
+ autoComplete: StateFlow,
+ placeholder: StateFlow,
+ placeholderTextColor: StateFlow,
+ selectionColor: StateFlow,
+ autoCapitalize: StateFlow,
+ autoCorrect: StateFlow,
+ keyboardType: StateFlow,
+ returnKeyType: StateFlow,
+ onTextChange: (value: String) -> Unit,
+ onFocus: (() -> Unit)? = null,
+ onBlur: (() -> Unit)? = null,
+ onSubmitEditing: (() -> Unit)? = null,
+ focusRequester: FocusRequester,
+) {
+ val state = remember { TextFieldState(value) }
+ val style by inputStyle.collectAsState()
+ val keyboardTypeValue by keyboardType.collectAsState()
+ val autoCapitalizeValue by autoCapitalize.collectAsState()
+ val autoCorrectValue by autoCorrect.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)
+ }
+
+ LaunchedEffect(interactionSource) {
+ interactionSource.interactions.collect { interaction ->
+ when (interaction) {
+ is FocusInteraction.Focus -> {
+ onFocus?.invoke()
+ autofill?.requestAutofillForNode(autofillNode)
+ }
+ is FocusInteraction.Unfocus -> {
+ onBlur?.invoke()
+ autofill?.cancelAutofillForNode(autofillNode)
+ }
+ }
+ }
+ }
+
+ val context = LocalContext.current
+ val textColor = style?.color?.let { Color(android.graphics.Color.parseColor(it)) } ?: Color.White
+ val fontSize = style?.fontSize?.let { it.sp } ?: 24.sp
+ val fontFamily = remember(style?.fontFamily) {
+ style?.fontFamily?.let { name ->
+ try {
+ val typeface = com.facebook.react.views.text.ReactFontManager.getInstance()
+ .getTypeface(name, Typeface.NORMAL, context.assets)
+ typeface?.let { FontFamily(it) }
+ } catch (_: Exception) {
+ null
+ }
+ }
+ }
+
+ val paddingTop = style?.paddingTop?.dp ?: 0.dp
+ val paddingBottom = style?.paddingBottom?.dp ?: 0.dp
+ val paddingLeft = style?.paddingLeft?.dp ?: 0.dp
+ val paddingRight = style?.paddingRight?.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
+ val backgroundColor = style?.backgroundColor
+ ?.let { Color(android.graphics.Color.parseColor(it)) }
+ ?: Color.Transparent
+ val shape = RoundedCornerShape(borderRadius)
+
+ 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()
+ .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),
+ autoCorrectEnabled = autoCorrectValue,
+ ),
+ onKeyboardAction = onSubmitEditing?.let { cb ->
+ KeyboardActionHandler { performDefaultAction ->
+ cb()
+ performDefaultAction()
+ }
+ },
+ 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 = 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,
+ val value: String,
+) : Event(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 = "onChangeText"
+ }
+}
+
+class FocusEvent(
+ surfaceId: Int,
+ viewId: Int,
+) : Event(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(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 SubmitEditingEvent(
+ surfaceId: Int,
+ viewId: Int,
+) : Event(surfaceId, viewId) {
+ override fun getEventName() = EVENT_NAME
+
+ override fun getCoalescingKey(): Short = 0
+
+ override fun getEventData(): WritableMap? = Arguments.createMap()
+
+ companion object {
+ const val EVENT_NAME = "onSubmitEditing"
+ }
+}
diff --git a/android/src/main/java/com/controlledinput/JetpackComposeViewModel.kt b/android/src/main/java/com/controlledinput/JetpackComposeViewModel.kt
new file mode 100644
index 0000000..0a690a4
--- /dev/null
+++ b/android/src/main/java/com/controlledinput/JetpackComposeViewModel.kt
@@ -0,0 +1,104 @@
+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(null)
+ private val _autoComplete = MutableStateFlow(null)
+ private val _placeholder = MutableStateFlow(null)
+ private val _placeholderTextColor = MutableStateFlow(null)
+ private val _selectionColor = MutableStateFlow(null)
+ private val _autoCapitalize = MutableStateFlow(null)
+ private val _autoCorrect = MutableStateFlow(true)
+ private val _keyboardType = MutableStateFlow(null)
+ private val _returnKeyType = MutableStateFlow(null)
+
+ val value: StateFlow get() = _value
+ val inputStyle: StateFlow get() = _inputStyle
+ val autoComplete: StateFlow get() = _autoComplete
+ val placeholder: StateFlow get() = _placeholder
+ val placeholderTextColor: StateFlow get() = _placeholderTextColor
+ val selectionColor: StateFlow get() = _selectionColor
+ val autoCapitalize: StateFlow get() = _autoCapitalize
+ val autoCorrect: StateFlow get() = _autoCorrect
+ val keyboardType: StateFlow get() = _keyboardType
+ val returnKeyType: StateFlow 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 setAutoCorrect(enabled: Boolean) {
+ _autoCorrect.value = enabled
+ }
+
+ fun setKeyboardType(newValue: String?) {
+ _keyboardType.value = newValue
+ }
+
+ fun setReturnKeyType(newValue: String?) {
+ _returnKeyType.value = newValue
+ }
+}
diff --git a/assets/date-controlled-input.gif b/assets/date-controlled-input.gif
new file mode 100644
index 0000000..c2e1c2d
Binary files /dev/null and b/assets/date-controlled-input.gif differ
diff --git a/assets/date-default-input.gif b/assets/date-default-input.gif
new file mode 100644
index 0000000..41cd11a
Binary files /dev/null and b/assets/date-default-input.gif differ
diff --git a/assets/promo-code-controlled-input.gif b/assets/promo-code-controlled-input.gif
new file mode 100644
index 0000000..60d2c52
Binary files /dev/null and b/assets/promo-code-controlled-input.gif differ
diff --git a/assets/promo-code-default-input.gif b/assets/promo-code-default-input.gif
new file mode 100644
index 0000000..b6df103
Binary files /dev/null and b/assets/promo-code-default-input.gif differ
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..0c05fd6
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ overrides: [
+ {
+ exclude: /\/node_modules\//,
+ presets: ['module:react-native-builder-bob/babel-preset'],
+ },
+ {
+ include: /\/node_modules\//,
+ presets: ['module:@react-native/babel-preset'],
+ },
+ ],
+};
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..71f116a
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,258 @@
+import unusedImports from 'eslint-plugin-unused-imports';
+import _import from 'eslint-plugin-import';
+import { fixupPluginRules } from '@eslint/compat';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import tseslint from 'typescript-eslint';
+import stylistic from '@stylistic/eslint-plugin';
+import globals from 'globals';
+
+export default [
+ {
+ ignores: [
+ '**/node_modules',
+ '**/dist',
+ '**/lib',
+ 'eslint.config.mjs',
+ '**/build',
+ '**/coverage',
+ 'example/ios/Pods',
+ '**/.turbo',
+ ],
+ },
+ eslintConfigPrettier,
+ {
+ files: ['**/*.ts', '**/*.tsx'],
+ plugins: {
+ '@typescript-eslint': tseslint.plugin,
+ 'unused-imports': unusedImports,
+ import: fixupPluginRules(_import),
+ '@stylistic': stylistic,
+ },
+
+ languageOptions: {
+ parser: tseslint.parser,
+ ecmaVersion: 6,
+ sourceType: 'commonjs',
+
+ parserOptions: {
+ projectService: 'tsconfig.json',
+
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+
+ settings: {
+ 'import/parsers': {
+ '@typescript-eslint/parser': ['.ts', '.tsx'],
+ },
+
+ 'import/resolver': {
+ typescript: {
+ alwaysTryTypes: true,
+ },
+
+ node: {
+ extensions: ['.js', '.jsx', '.ts', '.tsx'],
+ },
+ },
+ },
+
+ rules: {
+ '@stylistic/quotes': [
+ 'warn',
+ 'single',
+ {
+ allowTemplateLiterals: true,
+ },
+ ],
+
+ 'object-shorthand': 'warn',
+ '@stylistic/arrow-parens': ['warn', 'always'],
+ 'no-var': 'warn',
+ 'no-dupe-class-members': 'off',
+ 'import/prefer-default-export': 'off',
+ '@stylistic/implicit-arrow-linebreak': ['warn', 'beside'],
+
+ '@stylistic/newline-per-chained-call': [
+ 'warn',
+ {
+ ignoreChainWithDepth: 2,
+ },
+ ],
+
+ '@stylistic/function-call-argument-newline': ['warn', 'consistent'],
+ '@stylistic/function-paren-newline': ['warn', 'consistent'],
+ '@stylistic/array-element-newline': ['warn', 'consistent'],
+
+ '@stylistic/array-bracket-newline': [
+ 'warn',
+ {
+ multiline: true,
+ },
+ ],
+
+ '@stylistic/padding-line-between-statements': [
+ 'warn',
+ {
+ blankLine: 'always',
+ prev: '*',
+ next: 'return',
+ },
+ {
+ blankLine: 'always',
+ prev: '*',
+ next: 'multiline-block-like',
+ },
+ ],
+
+ '@typescript-eslint/no-use-before-define': [
+ 'warn',
+ {
+ variables: false,
+ },
+ ],
+
+ '@stylistic/lines-between-class-members': ['warn'],
+
+ '@typescript-eslint/no-inferrable-types': [
+ 'warn',
+ {
+ ignoreParameters: true,
+ },
+ ],
+
+ '@typescript-eslint/explicit-module-boundary-types': [
+ 'warn',
+ {
+ allowArgumentsExplicitlyTypedAsAny: true,
+ },
+ ],
+
+ '@typescript-eslint/no-explicit-any': 'off',
+
+ '@typescript-eslint/explicit-member-accessibility': [
+ 'warn',
+ {
+ accessibility: 'explicit',
+
+ overrides: {
+ constructors: 'no-public',
+ },
+ },
+ ],
+
+ '@typescript-eslint/explicit-function-return-type': [
+ 'warn',
+ {
+ allowExpressions: true,
+ },
+ ],
+
+ '@typescript-eslint/no-require-imports': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+
+ '@typescript-eslint/array-type': [
+ 'warn',
+ {
+ default: 'generic',
+ readonly: 'generic',
+ },
+ ],
+
+ '@typescript-eslint/member-ordering': [
+ 'warn',
+ {
+ default: [
+ 'public-static-field',
+ 'protected-static-field',
+ 'private-static-field',
+ 'public-instance-field',
+ 'protected-instance-field',
+ 'private-instance-field',
+ 'public-constructor',
+ 'protected-constructor',
+ 'private-constructor',
+ 'public-static-method',
+ 'public-instance-method',
+ 'protected-static-method',
+ 'protected-instance-method',
+ 'private-static-method',
+ 'private-instance-method',
+ ],
+ },
+ ],
+
+ '@typescript-eslint/naming-convention': [
+ 'warn',
+ {
+ selector: 'typeLike',
+ format: ['PascalCase'],
+ },
+ {
+ selector: ['parameter'],
+ format: ['camelCase', 'PascalCase'],
+ leadingUnderscore: 'allow',
+ },
+ {
+ selector: ['classProperty'],
+ format: ['camelCase', 'snake_case'],
+ leadingUnderscore: 'allow',
+ },
+ {
+ selector: ['method', 'accessor'],
+ format: ['camelCase'],
+ },
+ {
+ selector: ['function', 'typeProperty'],
+ format: ['camelCase', 'PascalCase'],
+ },
+ {
+ selector: 'variable',
+ format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+ },
+ {
+ selector: 'enumMember',
+ format: ['UPPER_CASE'],
+ },
+ ],
+
+ 'unused-imports/no-unused-imports': 'error',
+
+ 'unused-imports/no-unused-vars': [
+ 'error',
+ {
+ vars: 'all',
+ varsIgnorePattern: '^_',
+ argsIgnorePattern: '^_',
+ ignoreRestSiblings: true,
+ caughtErrors: 'none',
+ },
+ ],
+
+ '@stylistic/jsx-quotes': ['warn', 'prefer-single'],
+ 'import/newline-after-import': 'warn',
+ 'import/no-unresolved': 'error',
+
+ 'import/order': [
+ 'warn',
+ {
+ groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
+
+ alphabetize: {
+ order: 'asc',
+ },
+ },
+ ],
+
+ 'import/no-duplicates': 'warn',
+ },
+ },
+ {
+ files: ['**/__tests__/**/*.{ts,tsx}', '**/*.test.{ts,tsx}'],
+ languageOptions: {
+ globals: globals.jest,
+ },
+ },
+];
diff --git a/example/.bundle/config b/example/.bundle/config
new file mode 100644
index 0000000..848943b
--- /dev/null
+++ b/example/.bundle/config
@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1
diff --git a/example/.watchmanconfig b/example/.watchmanconfig
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/example/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/example/Gemfile b/example/Gemfile
new file mode 100644
index 0000000..6a4c5f1
--- /dev/null
+++ b/example/Gemfile
@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
diff --git a/example/Gemfile.lock b/example/Gemfile.lock
new file mode 100644
index 0000000..ff53663
--- /dev/null
+++ b/example/Gemfile.lock
@@ -0,0 +1,112 @@
+GEM
+ remote: https://rubygems.org/
+ specs:
+ CFPropertyList (3.0.9)
+ activesupport (6.1.7.10)
+ concurrent-ruby (~> 1.0, >= 1.0.2)
+ i18n (>= 1.6, < 2)
+ minitest (>= 5.1)
+ tzinfo (~> 2.0)
+ zeitwerk (~> 2.3)
+ addressable (2.8.9)
+ public_suffix (>= 2.0.2, < 8.0)
+ algoliasearch (1.27.5)
+ httpclient (~> 2.8, >= 2.8.3)
+ json (>= 1.5.1)
+ atomos (0.1.3)
+ benchmark (0.5.0)
+ bigdecimal (4.0.1)
+ claide (1.1.0)
+ cocoapods (1.15.2)
+ addressable (~> 2.8)
+ claide (>= 1.0.2, < 2.0)
+ cocoapods-core (= 1.15.2)
+ cocoapods-deintegrate (>= 1.0.3, < 2.0)
+ cocoapods-downloader (>= 2.1, < 3.0)
+ cocoapods-plugins (>= 1.0.0, < 2.0)
+ cocoapods-search (>= 1.0.0, < 2.0)
+ cocoapods-trunk (>= 1.6.0, < 2.0)
+ cocoapods-try (>= 1.1.0, < 2.0)
+ colored2 (~> 3.1)
+ escape (~> 0.0.4)
+ fourflusher (>= 2.3.0, < 3.0)
+ gh_inspector (~> 1.0)
+ molinillo (~> 0.8.0)
+ nap (~> 1.0)
+ ruby-macho (>= 2.3.0, < 3.0)
+ xcodeproj (>= 1.23.0, < 2.0)
+ cocoapods-core (1.15.2)
+ activesupport (>= 5.0, < 8)
+ addressable (~> 2.8)
+ algoliasearch (~> 1.0)
+ concurrent-ruby (~> 1.1)
+ fuzzy_match (~> 2.0.4)
+ nap (~> 1.0)
+ netrc (~> 0.11)
+ public_suffix (~> 4.0)
+ typhoeus (~> 1.0)
+ cocoapods-deintegrate (1.0.5)
+ cocoapods-downloader (2.1)
+ cocoapods-plugins (1.0.0)
+ nap
+ cocoapods-search (1.0.1)
+ cocoapods-trunk (1.6.0)
+ nap (>= 0.8, < 2.0)
+ netrc (~> 0.11)
+ cocoapods-try (1.2.0)
+ colored2 (3.1.2)
+ concurrent-ruby (1.3.3)
+ escape (0.0.4)
+ ethon (0.18.0)
+ ffi (>= 1.15.0)
+ logger
+ ffi (1.17.3)
+ fourflusher (2.3.1)
+ fuzzy_match (2.0.4)
+ gh_inspector (1.1.3)
+ httpclient (2.9.0)
+ mutex_m
+ i18n (1.14.8)
+ concurrent-ruby (~> 1.0)
+ json (2.7.6)
+ logger (1.7.0)
+ minitest (5.25.4)
+ molinillo (0.8.0)
+ mutex_m (0.3.0)
+ nanaimo (0.3.0)
+ nap (1.1.0)
+ netrc (0.11.0)
+ public_suffix (4.0.7)
+ rexml (3.4.4)
+ ruby-macho (2.5.1)
+ typhoeus (1.6.0)
+ ethon (>= 0.18.0)
+ tzinfo (2.0.6)
+ concurrent-ruby (~> 1.0)
+ xcodeproj (1.25.1)
+ CFPropertyList (>= 2.3.3, < 4.0)
+ atomos (~> 0.1.3)
+ claide (>= 1.0.2, < 2.0)
+ colored2 (~> 3.1)
+ nanaimo (~> 0.3.0)
+ rexml (>= 3.3.6, < 4.0)
+ zeitwerk (2.6.18)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ activesupport (>= 6.1.7.5, != 7.1.0)
+ benchmark
+ bigdecimal
+ cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+ concurrent-ruby (< 1.3.4)
+ logger
+ mutex_m
+ xcodeproj (< 1.26.0)
+
+RUBY VERSION
+ ruby 2.6.10p210
+
+BUNDLED WITH
+ 1.17.2
diff --git a/example/README.md b/example/README.md
new file mode 100644
index 0000000..a88d359
--- /dev/null
+++ b/example/README.md
@@ -0,0 +1,91 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
+
+## Step 1: Start Metro
+
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
+
+To start the Metro dev server, run the following command from the root of your React Native project:
+
+```sh
+npm start
+```
+
+From the repository root (npm workspaces):
+
+```sh
+npm run start -w react-native-controlled-input-example
+```
+
+## Step 2: Build and run your app
+
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
+
+### Android
+
+```sh
+npm run android
+```
+
+### iOS
+
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
+```
+
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+```sh
+npm run ios
+```
+
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app — you can also build it directly from Android Studio or Xcode.
+
+## Step 3: Modify your app
+
+Now that you have successfully run the app, let's make changes!
+
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
+
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
+
+- **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS).
+- **iOS**: Press R in iOS Simulator.
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
new file mode 100644
index 0000000..1f06ecb
--- /dev/null
+++ b/example/android/app/build.gradle
@@ -0,0 +1,119 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+ /* Folders */
+ // The root of your project, i.e. where "package.json" lives. Default is '../..'
+ // root = file("../../")
+ // The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+ // reactNativeDir = file("../../node_modules/react-native")
+ // The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+ // codegenDir = file("../../node_modules/@react-native/codegen")
+ // The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+ // cliFile = file("../../node_modules/react-native/cli.js")
+
+ /* Variants */
+ // The list of variants to that are debuggable. For those we're going to
+ // skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+ // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+ // debuggableVariants = ["liteDebug", "prodDebug"]
+
+ /* Bundling */
+ // A list containing the node command and its flags. Default is just 'node'.
+ // nodeExecutableAndArgs = ["node"]
+ //
+ // The command to run when bundling. By default is 'bundle'
+ // bundleCommand = "ram-bundle"
+ //
+ // The path to the CLI configuration file. Default is empty.
+ // bundleConfig = file(../rn-cli.config.js)
+ //
+ // The name of the generated asset file containing your JS bundle
+ // bundleAssetName = "MyApplication.android.bundle"
+ //
+ // The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+ // entryFile = file("../js/MyApplication.android.js")
+ //
+ // A list of extra flags to pass to the 'bundle' commands.
+ // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+ // extraPackagerArgs = []
+
+ /* Hermes Commands */
+ // The hermes compiler command to run. By default it is 'hermesc'
+ // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+ //
+ // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+ // hermesFlags = ["-O", "-output-source-map"]
+
+ /* Autolinking */
+ autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+ ndkVersion rootProject.ext.ndkVersion
+ buildToolsVersion rootProject.ext.buildToolsVersion
+ compileSdk rootProject.ext.compileSdkVersion
+
+ namespace "controlledinput.example"
+ defaultConfig {
+ applicationId "controlledinput.example"
+ minSdkVersion rootProject.ext.minSdkVersion
+ targetSdkVersion rootProject.ext.targetSdkVersion
+ versionCode 1
+ versionName "1.0"
+ }
+ signingConfigs {
+ debug {
+ storeFile file('debug.keystore')
+ storePassword 'android'
+ keyAlias 'androiddebugkey'
+ keyPassword 'android'
+ }
+ }
+ buildTypes {
+ debug {
+ signingConfig signingConfigs.debug
+ }
+ release {
+ // Caution! In production, you need to generate your own keystore file.
+ // see https://reactnative.dev/docs/signed-apk-android.
+ signingConfig signingConfigs.debug
+ minifyEnabled enableProguardInReleaseBuilds
+ proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+ }
+ }
+}
+
+dependencies {
+ // The version of react-native is set by the React Native Gradle Plugin
+ implementation("com.facebook.react:react-android")
+
+ if (hermesEnabled.toBoolean()) {
+ implementation("com.facebook.react:hermes-android")
+ } else {
+ implementation jscFlavor
+ }
+}
diff --git a/example/android/app/debug.keystore b/example/android/app/debug.keystore
new file mode 100644
index 0000000..364e105
Binary files /dev/null and b/example/android/app/debug.keystore differ
diff --git a/example/android/app/proguard-rules.pro b/example/android/app/proguard-rules.pro
new file mode 100644
index 0000000..11b0257
--- /dev/null
+++ b/example/android/app/proguard-rules.pro
@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+# http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..fb78f39
--- /dev/null
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/android/app/src/main/assets/fonts/AlbertSans-Regular.otf b/example/android/app/src/main/assets/fonts/AlbertSans-Regular.otf
new file mode 100644
index 0000000..aaa19f7
Binary files /dev/null and b/example/android/app/src/main/assets/fonts/AlbertSans-Regular.otf differ
diff --git a/example/android/app/src/main/java/controlledinput/example/MainActivity.kt b/example/android/app/src/main/java/controlledinput/example/MainActivity.kt
new file mode 100644
index 0000000..26cc95f
--- /dev/null
+++ b/example/android/app/src/main/java/controlledinput/example/MainActivity.kt
@@ -0,0 +1,22 @@
+package controlledinput.example
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MainActivity : ReactActivity() {
+
+ /**
+ * Returns the name of the main component registered from JavaScript. This is used to schedule
+ * rendering of the component.
+ */
+ override fun getMainComponentName(): String = "ControlledInputExample"
+
+ /**
+ * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+ * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+ */
+ override fun createReactActivityDelegate(): ReactActivityDelegate =
+ DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
diff --git a/example/android/app/src/main/java/controlledinput/example/MainApplication.kt b/example/android/app/src/main/java/controlledinput/example/MainApplication.kt
new file mode 100644
index 0000000..87a91f8
--- /dev/null
+++ b/example/android/app/src/main/java/controlledinput/example/MainApplication.kt
@@ -0,0 +1,27 @@
+package controlledinput.example
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+
+class MainApplication : Application(), ReactApplication {
+
+ override val reactHost: ReactHost by lazy {
+ getDefaultReactHost(
+ context = applicationContext,
+ packageList =
+ PackageList(this).packages.apply {
+ // Packages that cannot be autolinked yet can be added manually here, for example:
+ // add(MyReactNativePackage())
+ },
+ )
+ }
+
+ override fun onCreate() {
+ super.onCreate()
+ loadReactNative(this)
+ }
+}
diff --git a/example/android/app/src/main/res/drawable/rn_edit_text_material.xml b/example/android/app/src/main/res/drawable/rn_edit_text_material.xml
new file mode 100644
index 0000000..5c25e72
--- /dev/null
+++ b/example/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+