TextInput and Forms

import { TextInput } from "react-native";
 
const [email, setEmail] = useState("");
return (
  <TextInput
    value={email}
    onChangeText={setEmail}
    autoCapitalize="none"
    keyboardType="email-address"
  />
);

<TextInput
  value={password}
  onChangeText={setPassword}
  secureTextEntry={!visible}
  textContentType="password"
/>

<TextInput keyboardType="number-pad" value={code} onChangeText={setCode} />

<TextInput returnKeyType="next" onSubmitEditing={() => passwordRef.current?.focus()} />

<TextInput
  multiline
  value={notes}
  onChangeText={setNotes}
  style={{ minHeight: 96, textAlignVertical: "top" }}
/>

<TextInput
  autoCapitalize="none"
  autoCorrect={false}
  autoComplete="email"
  value={email}
  onChangeText={setEmail}
/>

const passwordRef = useRef<TextInput>(null);
// email field:
onSubmitEditing={() => passwordRef.current?.focus()}
// password:
<TextInput ref={passwordRef} />

<TextInput
  returnKeyType="go"
  onSubmitEditing={onSubmit}
  blurOnSubmit
  value={query}
  onChangeText={setQuery}
/>

<TextInput
  placeholder="Search"
  placeholderTextColor="#9ca3af"
  selectionColor="#2563eb"
  value={q}
  onChangeText={setQ}
/>

<TextInput value={accountId} editable={false} selectTextOnFocus />

const max = 120;
<TextInput maxLength={max} value={bio} onChangeText={setBio} />
<Text>{bio.length}/{max}</Text>

import { Switch } from "react-native";
 
<Switch value={enabled} onValueChange={setEnabled} />

<Pressable
  onPress={() => setChecked((v) => !v)}
  accessibilityRole="checkbox"
  accessibilityState={{ checked }}
>
  <Text>{checked ? "☑" : "☐"} Agree to terms</Text>
</Pressable>

const [form, setForm] = useState({ name: "", email: "" });
const setField = (k: keyof typeof form, v: string) =>
  setForm((f) => ({ ...f, [k]: v }));

import { Keyboard } from "react-native";
 
function onDone() {
  Keyboard.dismiss();
  onSubmit();
}