Text Input

Native text input with shared state

useNativeState creates one observable handle shared between JavaScript and the bound native views. Pass the handle as value to One.UI.TextInput: keystrokes land in every bound view without a React render. The ref carries focus, blur, clear, isFocused, and setSelection.

import { One, useNativeState } from 'one'

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

  return (
    <One.UI.TextInput
      value={name}
      placeholder="Name"
      onSubmitEditing={(text) => save(text)}
    />
  )
}

One.UI.TextInput props mirror the familiar text input contract. value takes a native state handle (or is left uncontrolled with defaultValue); onChangeText reports edits; editable and readOnly gate input; multiline scrolls inside the field height on native (default 56) while web grows; maxLength clamps in host on Android and web and converges on the controlled round-trip on iOS; secureTextEntry obscures input; keyboardType and inputMode pick the keyboard; autoCapitalize, autoCorrect, and autoComplete tune corrections (autoComplete runs on iOS and web and is ignored on Android); returnKeyType and enterKeyHint name the return key; textAlign runs on Android and web and is ignored on iOS; autoFocus focuses on mount. Events are onFocus, onBlur, and onSubmitEditing, which receives the text. The web-only props (numberOfLines, rows, onContentSizeChange, onSelectionChange, selection, selectTextOnFocus, selectionColor, selectionHandleColor, cursorColor, caretHidden, placeholderTextColor, textStyle) apply on web and are accepted but ignored on native.

One.UI.SafeArea is documented under SafeAreaView.