TextInput: управляемое поле и вид клавиатуры

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Управляемое поле устроено как в части IV (статья «Управляемые поля: состояние вместо DOM»); меняется сам обработчик. У TextInput есть onChangeText, и получает он не событие, а готовую строку. onChange с событием тоже остался — в примере стоят оба. Прогноз: в каком порядке они сработают на один ввод и сколько раз напечатается «рендер»?

rn

const { View, Text, TextInput, StyleSheet } = ReactNative;

function SetRow() {
  const [weight, setWeight] = React.useState("");
  console.log("рендер, вес:", JSON.stringify(weight));
  return (
    <View style={styles.row}>
      <TextInput
        testID="weight"
        style={styles.input}
        placeholder="вес, кг"
        value={weight}
        onChange={(e) => console.log("onChange:", e.nativeEvent.text)}
        onChangeText={(text) => {
          console.log("onChangeText:", text);
          setWeight(text);
        }}
      />
      <Text>{weight === "" ? "вес не введён" : weight + " кг"}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center", gap: 12 },
  input: { borderWidth: 1, borderColor: "#999", borderRadius: 6, padding: 8, width: 100 },
});

mount(<SetRow />);
// mount рисует не сразу, поэтому ввод — в следующем такте
setTimeout(() => fireEvent.changeText("weight", "82.5"), 50);

экран примера

Сначала предположите, что выведет код

Сначала onChange, потом onChangeText, оба от одного и того же ввода, и отрисовка после них одна. Текст в событии лежит не в target, а в e.nativeEvent.text, и onChangeText — это он же, уже вынутый из события. Никакой магии тут нет, это видно по исходнику самого TextInput:

jsлистинг · не запускается

// react-native 0.86 · Libraries/Components/TextInput/TextInput.js, сокращено
const _onChange = (event) => {
  const currentText = event.nativeEvent.text;
  props.onChange && props.onChange(event);
  props.onChangeText && props.onChangeText(currentText);
  // …
  setLastNativeText(currentText);
  setMostRecentEventCount(event.nativeEvent.eventCount);
};

// react-native 0.86 · Libraries/Components/TextInput/TextInput.js, сокращено
const _onChange = (event) => {
  const currentText = event.nativeEvent.text;
  props.onChange && props.onChange(event);
  props.onChangeText && props.onChangeText(currentText);
  // …
  setLastNativeText(currentText);
  setMostRecentEventCount(event.nativeEvent.eventCount);
};

Две последние строки понадобятся в следующем разделе. А пока — привычка из части IV, от которой пальцы сами не отвыкнут: достать текст из узла, на котором случилось событие. Прогноз в два этажа: что скажет компилятор и что напечатает пример?

rn

const { TextInput } = ReactNative;

function WeightField() {
  const [weight, setWeight] = React.useState("");
  console.log("вес:", JSON.stringify(weight));
  // привычка из части IV: достать текст из узла, на котором случилось событие
  return <TextInput testID="weight" value={weight} onChange={(e) => setWeight(e.target.value)} />;
}

mount(<WeightField />);
setTimeout(() => fireEvent.changeText("weight", "80"), 50);

экран примера

Сначала предположите, что выведет код

Компилятор отказывается: Свойство "value" не существует в типе "ReactNativeElement". Типы здесь настоящие, из пакета react-native 0.86, и по ним в e.target лежит не узел <input>, а нативный компонент: у него есть focus() и measure(), а value нет. Пример при этом отработал, и вес доехал до состояния. Это то место, где предпросмотр вам польстил: под TextInput в песочнице лежит обычный <input> от react-native-web, а у DOM-события target.value есть. На телефоне в состояние лёг бы undefined, и сборку это не остановило бы: Metro снимает типы, не проверяя их. Верьте здесь компилятору, а не предпросмотру.

onChange нужен редко — когда кроме текста важно само событие. Для всего остального есть onChangeText, и в нём нечего перепутать.

В части IV было правило: после каждого события React сверяет поле с value, поэтому обработчик, не позвавший сеттер, работает как фильтр (раздел «Поле, в котором нельзя печатать»). Проверим его на поле повторов — туда нужны только цифры. Прогноз: сколько будет отрисовок и что окажется в поле после двух вводов?

rn

declare function inspectField(testID: string): { value: string };
const { TextInput } = ReactNative;

function RepsField() {
  const [reps, setReps] = React.useState("");
  console.log("рендер:", JSON.stringify(reps));
  return (
    <TextInput
      testID="reps"
      placeholder="повторы"
      value={reps}
      // фильтр из части IV: не подходит — сеттер не зовём
      onChangeText={(text) => {
        if (/^\d*$/.test(text)) setReps(text);
      }}
    />
  );
}

mount(<RepsField />);
setTimeout(() => {
  fireEvent.changeText("reps", "12");
  fireEvent.changeText("reps", "12x");
  console.log("в поле:", inspectField("reps").value);
}, 50);

экран примера

Сначала предположите, что выведет код

Отрисовок две — при монтировании и после «12»; на «12x» сеттер не позвали, и отрисовки не было вовсе. А поле уже на следующей строке кода снова показывает 12: react-dom вернул узел к value прямо внутри события, и «x» не пробыл на экране ни мгновения.

На телефоне тот же код ведёт себя иначе, и дело не в React, а в том, где живёт текст. Букву принимает нативное поле — наследник UITextField на iOS, EditText на Android, — оно же сразу её и рисует. В JS она приезжает событием с номером (eventCount из листинга выше), а ответ «верни как было» уезжает обратно командой setTextAndSelection с тем же номером — по нему нативная сторона понимает, на какое из её событий пришёл ответ. Между этими моментами «x» на экране есть. Исходник TextInput говорит об этом прямо: синхронизация нужна из-за асинхронной природы событий ввода — на случай, когда натив текст уже обновил, а JS решил обновление отбросить. Отсюда мигание: буква появляется и исчезает.

Лечится это не ловкостью в JS, а тем, чтобы лишнее не набиралось вовсе. Длину ограничивает maxLength: его проверяет само нативное поле, ещё до JS, и в типах react-native у него так и написано — ставьте его вместо логики в JS, чтобы не было мигания. Состав ограничивает клавиатура без букв, о ней следующий раздел. Фильтр в onChangeText остаётся последним рубежом — от вставки из буфера и внешней клавиатуры, — но не единственным.

В первой статье части было правило чтения: несколько fireEvent в одном такте — одна отрисовка. Там нажимали кнопку, а теперь в примерах появилось поле. Прогноз: сколько строк «рендер» даст пара нажатий в одном такте и сколько — пара вводов?

rn

const { View, Text, TextInput, Pressable } = ReactNative;

function Probe() {
  const [sets, setSets] = React.useState(0);
  const [note, setNote] = React.useState("");
  console.log("рендер:", sets, JSON.stringify(note));
  return (
    <View>
      <Pressable testID="add" onPress={() => setSets((n) => n + 1)}>
        <Text>+ подход</Text>
      </Pressable>
      <TextInput testID="note" placeholder="заметка" value={note} onChangeText={setNote} />
    </View>
  );
}

mount(<Probe />);
setTimeout(() => {
  fireEvent.press("add");
  fireEvent.press("add");
}, 50);
setTimeout(() => {
  fireEvent.changeText("note", "т");
  fireEvent.changeText("note", "тя");
}, 100);

экран примера

Сначала предположите, что выведет код

Нажатия склеились, как в статье «Первый экран: тот же React, другие элементы». А вводы — нет: управляемое поле react-dom обязан сверить с value сразу после события, поэтому доводит отрисовку до конца, не дожидаясь конца такта. Значит, правило первой статьи верно для нажатий, а для ввода его надо уточнить: после fireEvent.changeText поле можно читать следующей же строкой, а после fireEvent.press — не раньше, чем доработает текущий код; в примерах это следующий setTimeout.

У браузерного поля на компьютере клавиатура одна — та, что под руками. У телефона их с десяток, и какую показать, решает поле. В React Native для этого два свойства: старое keyboardType и новое inputMode с теми же значениями, что у одноимённого атрибута HTML; если заданы оба, главнее inputMode. Клавиатуры в песочнице нет, зато видно, во что react-native-web превратил свойства, — в атрибуты <input>, по которым браузер телефона выбрал бы клавиатуру. Прогноз: что получат пять полей?

rn

declare function inspectField(testID: string): { type: string; inputMode: string | null };
const { View, TextInput } = ReactNative;

function Keyboards() {
  return (
    <View style={{ gap: 8 }}>
      <TextInput testID="weight" placeholder="вес" keyboardType="decimal-pad" />
      <TextInput testID="reps" placeholder="повторы" keyboardType="number-pad" />
      <TextInput testID="numeric" placeholder="просто число" keyboardType="numeric" />
      <TextInput testID="email" placeholder="почта" keyboardType="email-address" />
      <TextInput testID="both" placeholder="оба сразу" keyboardType="number-pad" inputMode="decimal" />
    </View>
  );
}

mount(<Keyboards />);
setTimeout(() => {
  for (const id of ["weight", "reps", "numeric", "email", "both"]) {
    const field = inspectField(id);
    console.log(id, "→ type:", field.type, "| inputmode:", field.inputMode);
  }
}, 50);

экран примера

Сначала предположите, что выведет код

Вес и повторы разошлись по inputmode: decimal и numeric. Почта ушла не в inputmode, а в type="email". В последнем поле победил inputMode, как и обещано. А numeric в предпросмотре дал то же, что number-pad. На телефоне он означает другое — вот что делают со значениями нативные исходники react-native 0.86 (RCTTextInputUtils.mm для iOS, ReactTextInputManager.kt для Android):

`keyboardType`	iPhone	Android	предпросмотр
`decimal-pad`	`UIKeyboardTypeDecimalPad`: цифры и десятичный разделитель	`TYPE_CLASS_NUMBER` + `FLAG_DECIMAL`	`inputmode="decimal"`
`number-pad`	`UIKeyboardTypeNumberPad`: только цифры	`TYPE_CLASS_NUMBER`	`inputmode="numeric"`
`numeric`	`UIKeyboardTypeDecimalPad` — как `decimal-pad`	`TYPE_CLASS_NUMBER` + `FLAG_DECIMAL` + `FLAG_SIGNED`: ещё и минус	`inputmode="numeric"`: разделитель не обещан
`email-address`	`UIKeyboardTypeEmailAddress`	`TYPE_CLASS_TEXT` + `VARIATION_EMAIL_ADDRESS`	`type="email"`
`phone-pad`	`UIKeyboardTypePhonePad`	`TYPE_CLASS_PHONE`	`type="tel"`

Строка numeric — единственная, где разошлись все три платформы: на iPhone это та же клавиатура, что decimal-pad, на Android к ней добавляется минус, а в браузере разделителя может не оказаться. Поэтому в «Подходе» пишем прямо, что нужно: вес — decimal-pad, повторы — number-pad. У inputMode соответствие то же: на телефоне decimal превращается в decimal-pad, а numeric — в number-pad.

Клавиатура — подсказка, а не замок. Вставку из буфера и внешнюю клавиатуру она не остановит, поэтому фильтр из прошлого раздела остаётся.

Десятичный разделитель на decimal-pad берётся из региона телефона. На iPhone с русским регионом это запятая, и вес приходит в onChangeText как "82,5". На Android — как решит клавиатура: react-native принимает любую клавишу, которую она покажет (в ReactEditText.kt ради этого подменён обработчик клавиш), так что приехать может и точка, и запятая. В состоянии поля, как и в части IV, лежит строка; вопрос в том, как получить из неё число. Прогноз для четырёх строк, которые на самом деле приходят с таких клавиатур:

ts

// так вес приходит с разных клавиатур: точка, запятая, недописанное, пустое поле
for (const text of ["82.5", "82,5", "82,", ""]) {
  console.log(JSON.stringify(text), "→ Number:", Number(text), "| parseFloat:", parseFloat(text));
}

страница примера

Сначала предположите, что выведет код

Number честно говорит NaN, а parseFloat молча отрезает всё после запятой: вес «82,5» станет 82, и полкило пропадёт из дневника без единой ошибки. Последняя строка ещё коварнее: пустое поле для Number — ноль, то есть «ещё не ввели» превращается в «гриф без блинов». Разбор пишется один раз, и берут его все поля с числами. Прогноз: что он вернёт для "8,2,5"?

ts

function parseAmount(text: string): number | null {
  // запятая — не опечатка: её ставит decimal-pad на iPhone с русским регионом
  const normalized = text.trim().replace(",", ".");
  // пустое поле — «ещё не ввели», а не ноль
  if (normalized === "") return null;
  const value = Number(normalized);
  return Number.isFinite(value) ? value : null;
}

for (const text of ["82.5", " 82,5 ", "82,", "", "8,2,5"]) {
  console.log(JSON.stringify(text), "→", parseAmount(text));
}

страница примера

Сначала предположите, что выведет код

replace со строкой меняет только первую запятую, поэтому «8,2,5» становится «8.2,5» и честно проваливается в null, а не превращается в 8.25. Пустое поле — тоже null: у числа для «ещё не ввели» представления нет, это правило из части IV. Недописанное «82,» даёт 82 — пока человек не допечатал дробь, это правильный ответ.

У «Подхода» есть вход — почта и пароль. Пароль прячется свойством secureTextEntry. Но у поля есть и умолчания, которых вы не задавали. Прогноз: что react-native-web отдаст браузеру для трёх полей ниже и что вы увидите на экране примера в третьем?

rn

declare function inspectField(testID: string): {
  tag: string;
  type: string;
  autoCapitalize: string | null;
};
const { View, TextInput } = ReactNative;

function Login() {
  return (
    <View style={{ gap: 8 }}>
      <TextInput testID="email" placeholder="почта" keyboardType="email-address" />
      <TextInput testID="password" placeholder="пароль" secureTextEntry />
      <TextInput testID="long" placeholder="пароль подлиннее" secureTextEntry multiline />
    </View>
  );
}

mount(<Login />);
setTimeout(() => {
  fireEvent.changeText("password", "штанга2026");
  fireEvent.changeText("long", "штанга2026");
  for (const id of ["email", "password", "long"]) {
    const field = inspectField(id);
    console.log(id, "→", field.tag, "| type:", field.type, "| autocapitalize:", field.autoCapitalize);
  }
}, 50);

экран примера

Сначала предположите, что выведет код

Первое: autocapitalize="sentences" у всех трёх, хотя никто его не просил. Это умолчание самого React Native, а не веба, и рядом с ним второе — autoCorrect, включённый по умолчанию. На телефоне почта превратится в «Rico@mail.ru» после первой же буквы, а автоисправление может заменить незнакомое слово в адресе на знакомое. Второе: пароль в многострочном поле виден целиком — посмотрите на экран примера. react-native-web для multiline рисует <textarea>, у которой скрытого режима нет, и secureTextEntry просто пропадает. На телефоне то же самое, только сказано словами: в описании свойства в react-native написано, что с multiline={true} оно не работает.

Поэтому поле почты получает autoCapitalize="none" и autoCorrect={false}, а оба поля — autoComplete: по нему менеджер паролей понимает, что предложить. Значения email, current-password (вход), new-password (регистрация) и one-time-code (код из СМС) по типам react-native работают на обеих платформах. У iOS есть и своё свойство с тем же смыслом — textContentType (password, newPassword, oneTimeCode).

onEndEditing в типах react-native есть, а в react-native-web его нет: в предпросмотре он не вызовется ни разу, хотя focus и blur приходят. Конец ввода здесь ловите через onBlur или onSubmitEditing — на телефоне работают все три.

Найденное удобно не повторять на каждом экране, а собрать в один словарь: экран берёт поле по смыслу — «вес», «повторы», «пароль», — а не вспоминает, какая клавиатура нужна весу. Тип значений — настоящий TextInputProps из react-native, поэтому опечатку ловит компилятор: keyboardType: "decimal" вместо "decimal-pad" даст Тип ""decimal"" не может быть назначен для типа "KeyboardTypeOptions | undefined", а рантайм промолчал бы и открыл обычную клавиатуру. parseAmount из прошлого раздела и inspectField лежат в подложке. Прогноз: сколько раз напечатается тоннаж и какими будут значения?

rn

declare function inspectField(testID: string): { inputMode: string | null };
declare function parseAmount(text: string): number | null;
const { View, Text, TextInput, StyleSheet } = ReactNative;

type TextInputProps = import("react-native").TextInputProps;
type FieldKind = "weight" | "reps" | "email" | "password";

// одна правда о клавиатурах на всё приложение: экран берёт поле по смыслу
const fieldKinds: Record<FieldKind, TextInputProps> = {
  weight: { keyboardType: "decimal-pad", maxLength: 6, placeholder: "вес, кг" },
  reps: { keyboardType: "number-pad", maxLength: 3, placeholder: "повторы" },
  email: { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, autoComplete: "email" },
  password: { secureTextEntry: true, autoCapitalize: "none", autoCorrect: false, autoComplete: "current-password" },
};

function SetRow() {
  const [weight, setWeight] = React.useState("");
  const [reps, setReps] = React.useState("");
  const kg = parseAmount(weight);
  const times = parseAmount(reps);
  const volume = kg !== null && times !== null ? kg * times : null;
  console.log("тоннаж:", volume);
  return (
    <View style={styles.row}>
      <TextInput {...fieldKinds.weight} testID="weight" style={styles.input} value={weight} onChangeText={setWeight} />
      <TextInput {...fieldKinds.reps} testID="reps" style={styles.input} value={reps} onChangeText={setReps} />
      <Text>{volume === null ? "—" : volume + " кг"}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center", gap: 8 },
  input: { borderWidth: 1, borderColor: "#999", borderRadius: 6, padding: 8, width: 90 },
});

mount(<SetRow />);
setTimeout(() => {
  fireEvent.changeText("weight", "82,5");
  fireEvent.changeText("reps", "5");
  console.log("вес:", inspectField("weight").inputMode, "| повторы:", inspectField("reps").inputMode);
}, 50);

declare function inspectField(testID: string): { inputMode: string | null };
declare function parseAmount(text: string): number | null;
const { View, Text, TextInput, StyleSheet } = ReactNative;

type TextInputProps = import("react-native").TextInputProps;
type FieldKind = "weight" | "reps" | "email" | "password";

// одна правда о клавиатурах на всё приложение: экран берёт поле по смыслу
const fieldKinds: Record<FieldKind, TextInputProps> = {
  weight: { keyboardType: "decimal-pad", maxLength: 6, placeholder: "вес, кг" },
  reps: { keyboardType: "number-pad", maxLength: 3, placeholder: "повторы" },
  email: { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, autoComplete: "email" },
  password: { secureTextEntry: true, autoCapitalize: "none", autoCorrect: false, autoComplete: "current-password" },
};

const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center", gap: 8 },
  input: { borderWidth: 1, borderColor: "#999", borderRadius: 6, padding: 8, width: 90 },
});

mount(<SetRow />);
setTimeout(() => {
  fireEvent.changeText("weight", "82,5");
  fireEvent.changeText("reps", "5");
  console.log("вес:", inspectField("weight").inputMode, "| повторы:", inspectField("reps").inputMode);
}, 50);

экран примера

Сначала предположите, что выведет код

Три строки тоннажа — по одной на отрисовку: при монтировании, после веса и после повторов. После веса тоннаж ещё null: повторов нет, а ноль вместо пустоты мы запретили сами. Вес пришёл с запятой и посчитался верно. Свойства из словаря стоят в разметке первыми, до testID, value и onChangeText: так экран может переопределить любое из них, а словарь не перетрёт экранное.

Словарь fieldKinds, parseAmount и inspectField переезжают в подложку следующей статьи. Там из этих полей собирается форма подхода: фокус переходит по полям кнопкой «Далее» на клавиатуре (returnKeyType и onSubmitEditing), ошибка встаёт рядом с полем, результат записывается.

Управляемое поле — как в части IV, но новый текст приходит в onChangeText готовой строкой. В событии onChange он лежит в e.nativeEvent.text, а e.target — нативный компонент без value.
e.target.value в предпросмотре срабатывает, потому что под ним DOM; компилятор с настоящими типами его запрещает, на телефоне это undefined, а Metro типы не проверяет.
На телефоне текст сперва принимает нативное поле, а JS поправляет его только после события — поэтому фильтр в onChangeText мигает, а maxLength и клавиатура без букв работают до JS.
Клавиатуру выбирают keyboardType или inputMode, и второй главнее: вес — decimal-pad, повторы — number-pad; numeric на трёх платформах означает три разные клавиатуры.
С русским регионом вес приходит с запятой: Number даст NaN, parseFloat молча отрежет дробь. Разбирать своей функцией, а пустое поле считать «не ввели», а не нулём.
По умолчанию поле ставит заглавную букву и исправляет слова: почте нужны autoCapitalize="none" и autoCorrect={false}, паролю — secureTextEntry и autoComplete, и никогда — multiline.

1/4Что получает обработчик onChangeText?

2/4Обработчик onChange={(e) => setWeight(e.target.value)} в предпросмотре работает, хотя компилятор подчеркнул value. Что будет на телефоне?

3/4Поле повторов фильтрует буквы в onChangeText. В предпросмотре всё чисто, а на телефоне буква на миг появляется и исчезает. Почему?

4/4Какую клавиатуру дать полю веса, если «Подход» выходит и на iPhone, и на Android?

Повторы: только цифры и не больше трёх

В подложке — inspectField. Поле повторов уже с number-pad и maxLength, но в предпросмотре принимает всё подряд. Добейтесь, чтобы после трёх вводов в поле оставалось 12. А потом ответьте: почему maxLength={3} не остановил «1234», хотя он в разметке есть?

rn

declare function inspectField(testID: string): { value: string };
const { TextInput } = ReactNative;

function RepsField() {
  const [reps, setReps] = React.useState("");
  return (
    <TextInput
      testID="reps"
      placeholder="повторы"
      keyboardType="number-pad"
      maxLength={3}
      value={reps}
      onChangeText={setReps} // ваш код: пропускать только до трёх цифр
    />
  );
}

mount(<RepsField />);
setTimeout(() => {
  for (const text of ["12", "12x", "1234"]) {
    fireEvent.changeText("reps", text);
    console.log(JSON.stringify(text), "→ в поле:", inspectField("reps").value);
  }
}, 50);
// сейчас в поле попадает всё подряд, а нужно 12, 12, 12

экран примера

Сначала предположите, что выведет код

Фильтр — тот же, что в статье, только с длиной: сеттер зовётся лишь тогда, когда текст подходит целиком.

jsлистинг · не запускается

onChangeText={(text) => {
  // пусто, одна, две или три цифры — остальное не пускаем
  if (/^\d{0,3}$/.test(text)) setReps(text);
}}

onChangeText={(text) => {
  // пусто, одна, две или три цифры — остальное не пускаем
  if (/^\d{0,3}$/.test(text)) setReps(text);
}}

Вывод становится 12, 12, 12. А maxLength в предпросмотре не помог потому, что fireEvent.changeText ставит значение программно, как скрипт, а атрибут maxlength браузер применяет только к набору с клавиатуры. Убирать maxLength всё равно не надо: на телефоне его проверяет само нативное поле (на iOS — в обработчике изменения текста, на Android — фильтром длины), до JS и без мигания. number-pad на телефоне не даст набрать букву, а фильтр в JS ловит то, что обходит обе защиты: вставку из буфера и внешнюю клавиатуру.

Глазок у пароля

Рядом с паролем — кнопка «показать», которая пока ничего не делает. Сделайте так, чтобы первое нажатие показывало пароль, а второе прятало обратно. Подпись кнопки пусть тоже меняется. Помните из статьи: после fireEvent.press поле читается не следующей строкой, а в следующем setTimeout.

rn

declare function inspectField(testID: string): { type: string };
const { View, Text, TextInput, Pressable } = ReactNative;

function PasswordField() {
  const [password, setPassword] = React.useState("");
  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
      <TextInput
        testID="password"
        placeholder="пароль"
        secureTextEntry
        autoComplete="current-password"
        value={password}
        onChangeText={setPassword}
      />
      <Pressable testID="eye" onPress={() => {}}>
        <Text>показать</Text>
      </Pressable>
    </View>
  );
}

mount(<PasswordField />);
setTimeout(() => {
  fireEvent.changeText("password", "штанга2026");
  console.log("до:", inspectField("password").type);
  fireEvent.press("eye");
}, 50);
// нажатие отрисуется, когда этот код доработает, — поэтому читаем в следующем таймере
setTimeout(() => {
  console.log("после нажатия:", inspectField("password").type);
  fireEvent.press("eye");
}, 100);
setTimeout(() => console.log("после второго:", inspectField("password").type), 150);
// сейчас все три строки — password, а нужно password, text, password

declare function inspectField(testID: string): { type: string };
const { View, Text, TextInput, Pressable } = ReactNative;

function PasswordField() {
  const [password, setPassword] = React.useState("");
  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
      <TextInput
        testID="password"
        placeholder="пароль"
        secureTextEntry
        autoComplete="current-password"
        value={password}
        onChangeText={setPassword}
      />
      <Pressable testID="eye" onPress={() => {}}>
        <Text>показать</Text>
      </Pressable>
    </View>
  );
}

mount(<PasswordField />);
setTimeout(() => {
  fireEvent.changeText("password", "штанга2026");
  console.log("до:", inspectField("password").type);
  fireEvent.press("eye");
}, 50);
// нажатие отрисуется, когда этот код доработает, — поэтому читаем в следующем таймере
setTimeout(() => {
  console.log("после нажатия:", inspectField("password").type);
  fireEvent.press("eye");
}, 100);
setTimeout(() => console.log("после второго:", inspectField("password").type), 150);
// сейчас все три строки — password, а нужно password, text, password

экран примера

Сначала предположите, что выведет код

Видимость — обычное состояние, а secureTextEntry — обычный пропс, который от него зависит.

tsxлистинг · не запускается

function PasswordField() {
  const [password, setPassword] = React.useState("");
  const [visible, setVisible] = React.useState(false);
  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
      <TextInput
        testID="password"
        placeholder="пароль"
        secureTextEntry={!visible}
        autoComplete="current-password"
        value={password}
        onChangeText={setPassword}
      />
      <Pressable testID="eye" onPress={() => setVisible((v) => !v)}>
        <Text>{visible ? "скрыть" : "показать"}</Text>
      </Pressable>
    </View>
  );
}

function PasswordField() {
  const [password, setPassword] = React.useState("");
  const [visible, setVisible] = React.useState(false);
  return (
    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
      <TextInput
        testID="password"
        placeholder="пароль"
        secureTextEntry={!visible}
        autoComplete="current-password"
        value={password}
        onChangeText={setPassword}
      />
      <Pressable testID="eye" onPress={() => setVisible((v) => !v)}>
        <Text>{visible ? "скрыть" : "показать"}</Text>
      </Pressable>
    </View>
  );
}

Вывод: password, text, password. Набранное при переключении не теряется: текст лежит в состоянии, а меняется только способ его показать. Поле при этом остаётся однострочным — вспомните раздел про multiline: там показывать и прятать было бы нечего, пароль виден всегда.

Вес, который нельзя набрать

parseAmount из статьи пропускает то, чего человек в зале набрать не мог, но мог вставить из буфера: минус, экспоненту, шестнадцатеричную запись. Напишите parseWeight: только цифры с необязательной дробной частью через точку или запятую, от 0 до 500 кг, иначе null.

ts

function parseAmount(text: string): number | null {
  const normalized = text.trim().replace(",", ".");
  if (normalized === "") return null;
  const value = Number(normalized);
  return Number.isFinite(value) ? value : null;
}

function parseWeight(text: string): number | null {
  // ваш код: только цифры и дробная часть через точку или запятую, от 0 до 500
  return parseAmount(text);
}

for (const text of ["82,5", "-5", "1e3", "0x1F", "500,5"]) {
  console.log(JSON.stringify(text), "→", parseWeight(text));
}
// сейчас: 82.5, -5, 1000, 31, 500.5 — а нужно 82.5 и четыре null

страница примера

Сначала предположите, что выведет код

Сперва форма, потом число: Number слишком сговорчив и понимает запись, которую человек в поле веса в виду не имел.

tsлистинг · не запускается

function parseWeight(text: string): number | null {
  // форма проверяется до Number: иначе «1e3» и «0x1F» сойдут за числа
  if (!/^\d+([.,]\d+)?$/.test(text.trim())) return null;
  const value = parseAmount(text);
  return value !== null && value <= 500 ? value : null;
}

function parseWeight(text: string): number | null {
  // форма проверяется до Number: иначе «1e3» и «0x1F» сойдут за числа
  if (!/^\d+([.,]\d+)?$/.test(text.trim())) return null;
  const value = parseAmount(text);
  return value !== null && value <= 500 ? value : null;
}

Вывод: 82.5 и четыре null. Нижняя граница проверяется самим выражением: минуса оно не пускает. Обратите внимание, что недописанное «82,» теперь тоже null — и это нормально: в состоянии лежит строка, человек видит в поле свои «82,», а тоннажа просто нет, пока он не допечатает дробь.

TextInput: управляемое поле и вид клавиатуры

Видеоразбор темы за 5–7 минут

onChangeText: строка вместо событияГде искать набранное, если не в event.target.value

Текст сперва попадает в нативное полеПочему фильтр из части IV на телефоне мигает

Клавиатура — свойство поляВес, повторы, почта: что открыть и что это значит на трёх платформах

Запятая вместо точкиВо что превращается «82,5», набранное на русском iPhone

Пароль и почта: что телефон делает с текстом самsecureTextEntry, заглавная буква в адресе и подсказки менеджеру паролей

Поля «Подхода» по смыслуСловарь свойств, который уедет в следующую статью

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Повторы: только цифры и не больше трёх

Глазок у пароля

Вес, который нельзя набрать