Text Input

One text field for iOS, Android, and web, drawn by each platform's own control

One.UI.TextInput is the text field to reach for when the same screen runs on more than one platform. It renders the platform’s own control: a SwiftUI TextField on iOS, a Material 3 TextField from Jetpack Compose on Android, and an <input> or <textarea> on web. You get native editing, AutoFill, keyboards, and accessibility, with one set of props.

For options only one platform has, use the platform field directly: One.iOS.TextField for SwiftUI field styles and form labels, or One.Android.TextField for the outlined Material variant.

Usage

import { One, useNativeState } from 'one'

function NameField() {
  const name = useNativeState('')

  return <One.UI.TextInput value={name} placeholder="Name" />
}

value takes a handle from useNativeState, not a string. Read the text with name.value and replace it with name.set(text). Leave value out and pass defaultValue for a field you only read on submit.

How it works

The text lives in native memory, not in React state. useNativeState creates an entry in One’s native registry and returns a handle that carries its id. The field binds to that entry by id, and so does any other view you pass the same handle to.

When the user types, the native field shows the character and writes the entry first. Then it sends an event to JavaScript, which calls onChangeText and re-renders the component that owns the handle. Typing never waits for JavaScript, so a busy JS thread cannot drop characters or move the caret.

When your code calls name.set(text), the write is synchronous. On iOS it runs on the main thread and returns once SwiftUI has the new text, so the field is already updated on the next line of your code. On Android it writes Compose snapshot state, which is safe from any thread.

On iOS and Android the field fills its parent’s width and sizes its own height: the SwiftUI view or Compose node measures itself and reports the height to React Native’s layout, with a minimum of 56 on Android. A multiline field grows a line at a time. Give it a height in style to make it scroll inside a fixed box instead. On web it is a plain <input> or <textarea>, sized by style like any element.

API reference

These props apply on web. iOS and Android accept them and ignore them, so shared code can pass them freely.

The field also takes View props such as testID, nativeID, and accessibilityLabel.

Platform differences

The return key row covers single line fields.

Limits and gotchas

• Text styling is web only. style sizes and places the field on every platform, but font, size, and color of the text come from the platform default on iOS and Android. textStyle applies only on web.
• Writes from code are silent. name.set() and ref.clear() update the field without calling onChangeText, which reports only what the user typed.
• next does not submit on Android. Compose runs its own next and previous actions, so onSubmitEditing never fires for those return keys there. Use done or go on the last field of a form.
• iOS trims maxLength after the fact. The SwiftUI field has no length limit of its own, so an extra character can show for a frame before One writes the trimmed text back.
• A secure field is one line on iOS. SwiftUI’s SecureField has no vertical axis, so multiline has no effect with secureTextEntry.
• defaultValue is read once. Changing it later does nothing. Pass a handle as value and call set to change the text from code.

Examples

import { One, useNativeState } from 'one'

function Composer({ onSend }: { onSend: (text: string) => void }) {
  const draft = useNativeState('')

  return (
    <One.UI.TextInput
      value={draft}
      placeholder="Message"
      returnKeyType="send"
      onSubmitEditing={(text) => {
        if (!text.trim()) return
        onSend(text)
        draft.set('')
      }}
    />
  )
}

The handler receives the submitted text, so it needs no read of draft. draft.set('') empties the field at once, on every platform.

import { One, useNativeState } from 'one'

function SignIn({ signIn }: { signIn: () => void }) {
  const email = useNativeState('')
  const password = useNativeState('')

  return (
    <>
      <One.UI.TextInput
        value={email}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="username"
      />
      <One.UI.TextInput
        value={password}
        placeholder="Password"
        secureTextEntry
        autoComplete="current-password"
        returnKeyType="go"
        onSubmitEditing={signIn}
      />
    </>
  )
}

On iOS, username and current-password set each field’s AutoFill content type, marking the pair as a login form. Web passes the tokens to the autocomplete attribute. Android ignores autoComplete.

import { Text } from 'react-native'
import { One, useNativeState } from 'one'

function Bio() {
  const bio = useNativeState('')

  return (
    <>
      <One.UI.TextInput value={bio} multiline maxLength={160} style={{ height: 120 }} />
      <Text>{bio.value.length} / 160</Text>
    </>
  )
}

The component that calls useNativeState subscribes to the handle, so it re-renders after each keystroke and bio.value is always current.

import { useRef, type ComponentRef } from 'react'
import { Button } from 'react-native'
import { One } from 'one'

function Search() {
  const input = useRef<ComponentRef<typeof One.UI.TextInput>>(null)

  return (
    <>
      <One.UI.TextInput ref={input} placeholder="Search" returnKeyType="search" />
      <Button title="Search" onPress={() => input.current?.focus()} />
    </>
  )
}

onFocus runs as soon as focus() is called, once per change, without waiting for the native field to confirm.