feat(TextField): add keyboard options, icons, and character counter

Add comprehensive keyboard configuration and visual enhancements to TextField component:

- Add keyboard type options (email, number, phone, decimal, url)
- Add IME action types (done, go, next, search, send) with onSubmitEditing callback
- Add auto-capitalization modes (none, sentences, words, characters)
- Add auto-correct toggle
- Add leading/trailing Material Icons support (Search, Email, Phone, Person, Lock, Clear, Close, Check, Edit, Info, Warning)
- Add interactive trailing icon with onTrailingIconPress callback
- Add automatic character counter display when maxLength is set (with showCounter toggle)
- Update README with new props table and supported icons section

Author: mgcrea

README.md

@@ -311,7 +311,7 @@ function MyComponent() {
 
 ### TextField
 
-A Material 3 OutlinedTextField for text input with floating labels, error states, and helper text.
+A Material 3 OutlinedTextField for text input with floating labels, error states, icons, and keyboard configuration.
 
 ```tsx
 import { useState } from "react";
@@ -326,6 +326,9 @@ function MyComponent() {
       value={email}
       label="Email"
       placeholder="Enter your email"
+      leadingIcon="Email"
+      keyboardType="email"
+      autoCapitalize="none"
       error={error}
       helperText={error ? "Invalid email address" : undefined}
       onChange={(text) => {
@@ -339,22 +342,39 @@ function MyComponent() {
 
 #### Props
 
-| Prop              | Type                   | Default | Description                          |
-| ----------------- | ---------------------- | ------- | ------------------------------------ |
-| `value`           | `string`               | -       | Current text value                   |
-| `label`           | `string`               | -       | Floating label text                  |
-| `placeholder`     | `string`               | -       | Placeholder when empty               |
-| `disabled`        | `boolean`              | `false` | Whether the field is disabled        |
-| `editable`        | `boolean`              | `true`  | Whether text can be edited           |
-| `multiline`       | `boolean`              | `false` | Enable multiline input               |
-| `maxLength`       | `number`               | -       | Maximum character count              |
-| `secureTextEntry` | `boolean`              | `false` | Hide text for password fields        |
-| `error`           | `boolean`              | `false` | Show error state styling             |
-| `helperText`      | `string`               | -       | Helper or error text below field     |
-| `onChange`        | `(text: string) => void` | -     | Called when text changes             |
-| `onFocus`         | `() => void`           | -       | Called when field gains focus        |
-| `onBlur`          | `() => void`           | -       | Called when field loses focus        |
-| `style`           | `StyleProp<ViewStyle>` | -       | Custom styles                        |
+| Prop                | Type                        | Default       | Description                                    |
+| ------------------- | --------------------------- | ------------- | ---------------------------------------------- |
+| `value`             | `string`                    | -             | Current text value                             |
+| `label`             | `string`                    | -             | Floating label text                            |
+| `placeholder`       | `string`                    | -             | Placeholder when empty                         |
+| `disabled`          | `boolean`                   | `false`       | Whether the field is disabled                  |
+| `editable`          | `boolean`                   | `true`        | Whether text can be edited                     |
+| `multiline`         | `boolean`                   | `false`       | Enable multiline input                         |
+| `maxLength`         | `number`                    | -             | Maximum character count                        |
+| `secureTextEntry`   | `boolean`                   | `false`       | Hide text for password fields                  |
+| `error`             | `boolean`                   | `false`       | Show error state styling                       |
+| `helperText`        | `string`                    | -             | Helper or error text below field               |
+| `keyboardType`      | `string`                    | `"default"`   | Keyboard type: default, email, number, phone, decimal, url |
+| `returnKeyType`     | `string`                    | `"done"`      | IME action: done, go, next, search, send       |
+| `autoCapitalize`    | `string`                    | `"sentences"` | Capitalization: none, sentences, words, characters |
+| `autoCorrect`       | `boolean`                   | `true`        | Enable/disable auto-correct                    |
+| `leadingIcon`       | `string`                    | -             | Leading icon name (see supported icons)        |
+| `trailingIcon`      | `string`                    | -             | Trailing icon name (see supported icons)       |
+| `showCounter`       | `boolean`                   | `true`        | Show character counter when maxLength is set   |
+| `onChange`          | `(text: string) => void`    | -             | Called when text changes                       |
+| `onFocus`           | `() => void`                | -             | Called when field gains focus                  |
+| `onBlur`            | `() => void`                | -             | Called when field loses focus                  |
+| `onSubmitEditing`   | `() => void`                | -             | Called when IME action button is pressed       |
+| `onTrailingIconPress` | `() => void`              | -             | Called when trailing icon is pressed           |
+| `style`             | `StyleProp<ViewStyle>`      | -             | Custom styles                                  |
+
+#### Supported Icons
+
+The following Material Icons are available for `leadingIcon` and `trailingIcon`:
+
+- **Common**: `Search`, `Clear`, `Close`, `Check`, `Edit`, `Info`
+- **Input**: `Email`, `Phone`, `Person`, `Lock`
+- **Status**: `Warning`
 
 ## Theming
 

android/src/main/java/com/mgcrea/reactnative/jetpackcompose/TextFieldView.kt

@@ -1,19 +1,43 @@
 package com.mgcrea.reactnative.jetpackcompose
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.Clear
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Phone
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.filled.Warning
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.vector.ImageVector
+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.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import com.facebook.react.uimanager.ThemedReactContext
 import com.mgcrea.reactnative.jetpackcompose.core.InlineComposeView
 import com.mgcrea.reactnative.jetpackcompose.events.TextFieldChangeEvent
 import com.mgcrea.reactnative.jetpackcompose.events.TextFieldBlurEvent
 import com.mgcrea.reactnative.jetpackcompose.events.TextFieldFocusEvent
+import com.mgcrea.reactnative.jetpackcompose.events.TextFieldSubmitEvent
+import com.mgcrea.reactnative.jetpackcompose.events.TextFieldTrailingIconPressEvent
 
 internal class TextFieldView(reactContext: ThemedReactContext) :
   InlineComposeView(reactContext, TAG) {
@@ -35,6 +59,15 @@ internal class TextFieldView(reactContext: ThemedReactContext) :
   private val _helperText = mutableStateOf<String?>(null)
   private val _isFocused = mutableStateOf(false)
 
+  // New state for keyboard and icons
+  private val _keyboardType = mutableStateOf("default")
+  private val _returnKeyType = mutableStateOf("done")
+  private val _autoCapitalize = mutableStateOf("sentences")
+  private val _autoCorrect = mutableStateOf(true)
+  private val _leadingIcon = mutableStateOf<String?>(null)
+  private val _trailingIcon = mutableStateOf<String?>(null)
+  private val _showCounter = mutableStateOf(true)
+
   // Property setters called by ViewManager
   fun setValue(value: String?) {
     _value.value = value ?: ""
@@ -76,6 +109,73 @@ internal class TextFieldView(reactContext: ThemedReactContext) :
     _helperText.value = value
   }
 
+  fun setKeyboardType(value: String?) {
+    _keyboardType.value = value ?: "default"
+  }
+
+  fun setReturnKeyType(value: String?) {
+    _returnKeyType.value = value ?: "done"
+  }
+
+  fun setAutoCapitalize(value: String?) {
+    _autoCapitalize.value = value ?: "sentences"
+  }
+
+  fun setAutoCorrect(value: Boolean) {
+    _autoCorrect.value = value
+  }
+
+  fun setLeadingIcon(value: String?) {
+    _leadingIcon.value = value
+  }
+
+  fun setTrailingIcon(value: String?) {
+    _trailingIcon.value = value
+  }
+
+  fun setShowCounter(value: Boolean) {
+    _showCounter.value = value
+  }
+
+  private fun getKeyboardType(type: String): KeyboardType = when (type) {
+    "email" -> KeyboardType.Email
+    "number" -> KeyboardType.Number
+    "phone" -> KeyboardType.Phone
+    "decimal" -> KeyboardType.Decimal
+    "url" -> KeyboardType.Uri
+    else -> KeyboardType.Text
+  }
+
+  private fun getImeAction(type: String): ImeAction = when (type) {
+    "go" -> ImeAction.Go
+    "next" -> ImeAction.Next
+    "search" -> ImeAction.Search
+    "send" -> ImeAction.Send
+    else -> ImeAction.Done
+  }
+
+  private fun getCapitalization(type: String): KeyboardCapitalization = when (type) {
+    "none" -> KeyboardCapitalization.None
+    "words" -> KeyboardCapitalization.Words
+    "characters" -> KeyboardCapitalization.Characters
+    else -> KeyboardCapitalization.Sentences
+  }
+
+  private fun getIcon(name: String?): ImageVector? = when (name?.lowercase()) {
+    "search" -> Icons.Default.Search
+    "email" -> Icons.Default.Email
+    "phone" -> Icons.Default.Phone
+    "person" -> Icons.Default.Person
+    "lock" -> Icons.Default.Lock
+    "clear" -> Icons.Default.Clear
+    "close" -> Icons.Default.Close
+    "check" -> Icons.Default.Check
+    "edit" -> Icons.Default.Edit
+    "info" -> Icons.Default.Info
+    "warning" -> Icons.Default.Warning
+    else -> null
+  }
+
   @Composable
   override fun ComposeContent() {
     val value = _value.value
@@ -88,6 +188,17 @@ internal class TextFieldView(reactContext: ThemedReactContext) :
     val secureTextEntry = _secureTextEntry.value
     val error = _error.value
     val helperText = _helperText.value
+    val keyboardType = _keyboardType.value
+    val returnKeyType = _returnKeyType.value
+    val autoCapitalize = _autoCapitalize.value
+    val autoCorrect = _autoCorrect.value
+    val leadingIconName = _leadingIcon.value
+    val trailingIconName = _trailingIcon.value
+    val showCounter = _showCounter.value
+
+    val onSubmit = {
+      dispatchEvent(TextFieldSubmitEvent(getSurfaceId(), id))
+    }
 
     OutlinedTextField(
       modifier = Modifier
@@ -125,12 +236,53 @@ internal class TextFieldView(reactContext: ThemedReactContext) :
       isError = error,
       label = label?.let { { Text(it) } },
       placeholder = placeholder?.let { { Text(it, maxLines = 1) } },
-      supportingText = helperText?.let { { Text(it) } },
+      supportingText = if (helperText != null || (showCounter && maxLength != null)) {
+        {
+          Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+          ) {
+            Text(helperText ?: "")
+            if (showCounter && maxLength != null) {
+              Text("${value.length}/$maxLength")
+            }
+          }
+        }
+      } else null,
       visualTransformation = if (secureTextEntry) {
         PasswordVisualTransformation()
       } else {
         VisualTransformation.None
       },
+      keyboardOptions = KeyboardOptions(
+        keyboardType = getKeyboardType(keyboardType),
+        imeAction = getImeAction(returnKeyType),
+        capitalization = getCapitalization(autoCapitalize),
+        autoCorrectEnabled = autoCorrect
+      ),
+      keyboardActions = KeyboardActions(
+        onDone = { onSubmit() },
+        onGo = { onSubmit() },
+        onNext = { onSubmit() },
+        onSearch = { onSubmit() },
+        onSend = { onSubmit() }
+      ),
+      leadingIcon = leadingIconName?.let { iconName ->
+        getIcon(iconName)?.let { icon ->
+          { Icon(icon, contentDescription = iconName) }
+        }
+      },
+      trailingIcon = trailingIconName?.let { iconName ->
+        getIcon(iconName)?.let { icon ->
+          {
+            IconButton(onClick = {
+              dispatchEvent(TextFieldTrailingIconPressEvent(getSurfaceId(), id))
+            }) {
+              Icon(icon, contentDescription = iconName)
+            }
+          }
+        }
+      },
     )
   }
 }

android/src/main/java/com/mgcrea/reactnative/jetpackcompose/TextFieldViewManager.kt

@@ -72,6 +72,34 @@ internal class TextFieldViewManager :
     view.setHelperText(value)
   }
 
+  override fun setKeyboardType(view: TextFieldView, value: String?) {
+    view.setKeyboardType(value)
+  }
+
+  override fun setReturnKeyType(view: TextFieldView, value: String?) {
+    view.setReturnKeyType(value)
+  }
+
+  override fun setAutoCapitalize(view: TextFieldView, value: String?) {
+    view.setAutoCapitalize(value)
+  }
+
+  override fun setAutoCorrect(view: TextFieldView, value: Boolean) {
+    view.setAutoCorrect(value)
+  }
+
+  override fun setLeadingIcon(view: TextFieldView, value: String?) {
+    view.setLeadingIcon(value)
+  }
+
+  override fun setTrailingIcon(view: TextFieldView, value: String?) {
+    view.setTrailingIcon(value)
+  }
+
+  override fun setShowCounter(view: TextFieldView, value: Boolean) {
+    view.setShowCounter(value)
+  }
+
   companion object {
     const val NAME = "TextFieldView"
   }

android/src/main/java/com/mgcrea/reactnative/jetpackcompose/events/TextFieldEvents.kt

@@ -51,3 +51,33 @@ class TextFieldBlurEvent(surfaceId: Int, viewId: Int) :
     const val EVENT_NAME = "topTextFieldBlur"
   }
 }
+
+/**
+ * Fired when the IME action button is pressed.
+ */
+class TextFieldSubmitEvent(surfaceId: Int, viewId: Int) :
+  Event<TextFieldSubmitEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "topSubmitEditing"
+  }
+}
+
+/**
+ * Fired when the trailing icon is pressed.
+ */
+class TextFieldTrailingIconPressEvent(surfaceId: Int, viewId: Int) :
+  Event<TextFieldTrailingIconPressEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "topTrailingIconPress"
+  }
+}