Форми, ввід і валідація

+-------------------------------------------------------------------------+
|                  КЛАСИФІКАЦІЯ КОНТРОЛІВ REACT NATIVE                    |
+-------------------------------------------------------------------------+
|  Тип даних               | Нативний компонент   | Платформова реалізація|
+--------------------------+----------------------+-----------------------+
|  Вільний текст           | TextInput            | UITextField / EditText|
|  Бінарний перемикач      | Switch               | UISwitch / Switch     |
|  Логічна згода           | Checkbox (Community) | Checkbox / Custom SVG |
|  Неперервний діапазон    | Slider (Community)   | UISlider / SeekBar    |
|  Дискретний список (1..N)| Picker (Community)   | UIPicker / Spinner    |
|  Календарна дата / час   | DateTimePicker (Comm)| UIDatePicker / Dialog |
+-------------------------------------------------------------------------+

       ВЕБ-АРХІТЕКТУРА (DOM)                     REACT NATIVE (NATIVE VIEWS)
+---------------------------------+       +---------------------------------------+
|  <form onSubmit={...}>          |       |  <View> (Контейнер без форми)         |
|    <input type="email" />       |  vs   |    <TextInput keyboardType="email" /> |
|    <button type="submit" />     |       |    <Pressable onPress={handleSubmit}> |
|  </form>                        |       |  </View>                              |
+---------------------------------+       +---------------------------------------+
| • Події спливають (Bubbling)    |       | • Немає спливання подій               |
| • Синтетичний event.target.value|       | • onChangeText передає чистий рядок   |
| • Неконтрольовані ref у RHF     |       | • RHF вимагає Controller              |
+---------------------------------+       +---------------------------------------+

import { useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';

export function NameField() {
  const [name, setName] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Повне ім'я</Text>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Олена Ковальчук"
        autoCapitalize="words"
        autoCorrect={false}
        style={styles.input}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { gap: 6 },
  label: { fontSize: 13, fontWeight: '700', textTransform: 'uppercase' },
  input: {
    borderWidth: 1,
    borderRadius: 12,
    paddingHorizontal: 14,
    paddingVertical: 12,
    fontSize: 16,
    minHeight: 48,
  },
});

import { useRef } from 'react';
import { TextInput, View } from 'react-native';

export function ChainedInputsForm() {
  const emailRef = useRef<TextInput>(null);
  const passwordRef = useRef<TextInput>(null);

  return (
    <View>
      <TextInput
        placeholder="Ім'я користувача"
        returnKeyType="next"
        blurOnSubmit={false}
        onSubmitEditing={() => emailRef.current?.focus()}
      />
      <TextInput
        ref={emailRef}
        placeholder="Електронна пошта"
        keyboardType="email-address"
        autoCapitalize="none"
        returnKeyType="next"
        blurOnSubmit={false}
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        placeholder="Пароль"
        secureTextEntry
        returnKeyType="done"
        onSubmitEditing={() => console.log('Submit')}
      />
    </View>
  );
}

       +---------------------------------------------+
       |                  IDLE                       |
       +---------------------------------------------+
           |                                     ^
       onPressIn                             onPressOut / Cancel
           v                                     |
       +---------------------------------------------+
       |   PRESSED (style: ({ pressed }) => [...])   |
       +---------------------------------------------+
           |
       Touch Released (within hitSlop boundary)
           v
       +---------------------------------------------+
       |          EXECUTE: onPress (Submit)          |
       +---------------------------------------------+

import { ActivityIndicator, Pressable, StyleSheet, Text } from 'react-native';

interface SubmitButtonProps {
  onPress: () => void;
  isSubmitting: boolean;
  title: string;
}

export function SubmitButton({ onPress, isSubmitting, title }: SubmitButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={isSubmitting}
      style={({ pressed }) => [
        styles.button,
        pressed && !isSubmitting && styles.buttonPressed,
        isSubmitting && styles.buttonDisabled,
      ]}
    >
      {isSubmitting ? (
        <ActivityIndicator color="#FFFFFF" />
      ) : (
        <Text style={styles.buttonText}>{title}</Text>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2563EB',
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 48,
  },
  buttonPressed: { opacity: 0.85, transform: [{ scale: 0.99 }] },
  buttonDisabled: { backgroundColor: '#94A3B8' },
  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '700' },
});

import { useState } from 'react';
import { StyleSheet, Switch, Text, View } from 'react-native';

export function PrivateToggle() {
  const [isPrivate, setIsPrivate] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.textGroup}>
        <Text style={styles.title}>Приватний доступ</Text>
        <Text style={styles.subtitle}>Приховати маршрут із публічного каталогу</Text>
      </View>
      <Switch
        value={isPrivate}
        onValueChange={setIsPrivate}
        trackColor={{ false: '#E2E8F0', true: '#2563EB' }}
        thumbColor="#FFFFFF"
        ios_backgroundColor="#E2E8F0"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
  },
  textGroup: { flex: 1, paddingRight: 16 },
  title: { fontSize: 16, fontWeight: '600' },
  subtitle: { fontSize: 13, color: '#64748B', marginTop: 2 },
});

import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Checkbox from '@react-native-community/checkbox';

export function TermsAgreement() {
  const [accepted, setAccepted] = useState(false);

  return (
    <View style={styles.row}>
      <Checkbox
        value={accepted}
        onValueChange={setAccepted}
        boxType="square"
        tintColors={{ true: '#2563EB', false: '#CBD5E1' }}
      />
      <Text style={styles.label}>
        Я погоджуюся з регламентом обробки персональних даних
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8 },
  label: { flex: 1, fontSize: 14, color: '#334155', lineHeight: 20 },
});

import { z } from 'zod';

export const registrationSchema = z.object({
  // 1. Опційне булеве поле: приймає true або false
  subscribeToNewsletter: z.boolean(),

  // 2. Обов'язкова згода: валідація проходить ТІЛЬКИ якщо значення строго дорівнює true
  acceptedTerms: z.literal(true, {
    errorMap: () => ({ message: 'Для продовження необхідно підтвердити згоду з правилами' }),
  }),
});

import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Slider from '@react-native-community/slider';

export function DaysDurationSelector() {
  const [days, setDays] = useState(3);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.label}>Орієнтовна тривалість</Text>
        <Text style={styles.valueText}>{days} {days === 1 ? 'день' : 'днів'}</Text>
      </View>
      <Slider
        minimumValue={1}
        maximumValue={14}
        step={1}
        value={days}
        onValueChange={setDays}
        minimumTrackTintColor="#2563EB"
        maximumTrackTintColor="#CBD5E1"
        thumbTintColor="#2563EB"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { paddingVertical: 8, gap: 8 },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  label: { fontSize: 14, fontWeight: '600', color: '#334155' },
  valueText: { fontSize: 15, fontWeight: '700', color: '#2563EB' },
});

import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Picker } from '@react-native-picker/picker';

export const TRIP_REGIONS = [
  'Карпати',
  'Поділля',
  'Полісся',
  'Причорноморʼя',
  'Слобожанщина',
] as const;

export type TripRegion = (typeof TRIP_REGIONS)[number];

export function RegionSelector() {
  const [region, setRegion] = useState<TripRegion>('Карпати');

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Географічний регіон</Text>
      <View style={styles.pickerWrapper}>
        <Picker
          selectedValue={region}
          onValueChange={(itemValue) => setRegion(itemValue as TripRegion)}
        >
          {TRIP_REGIONS.map((item) => (
            <Picker.Item key={item} label={item} value={item} />
          ))}
        </Picker>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { gap: 6 },
  label: { fontSize: 13, fontWeight: '700', textTransform: 'uppercase', color: '#64748B' },
  pickerWrapper: {
    borderWidth: 1,
    borderColor: '#E2E8F0',
    borderRadius: 12,
    overflow: 'hidden',
  },
});

import { z } from 'zod';

export const TRIP_REGIONS = ['Карпати', 'Поділля', 'Полісся', 'Причорноморʼя'] as const;

export const tripSchema = z.object({
  region: z.enum(TRIP_REGIONS, {
    errorMap: () => ({ message: 'Оберіть дійсний регіон зі списку' }),
  }),
});

export type TripFormValues = z.infer<typeof tripSchema>;

+---------------------------+       +---------------------------+
| Screen Header             |       | Screen Header             |
+---------------------------+       +---------------------------+
| Field: Name               |       | Field: Name               |
+---------------------------+       +---------------------------+
| Field: Email              |  ==>  | Field: Email (FOCUSED)    |
+---------------------------+       +---------------------------+
| Field: Password           |       | [ SOFT KEYBOARD ]         |
+---------------------------+       | [ Q W E R T Y U I O P ]   |
| Button: [ SUBMIT ] (LOST) |       | [ A S D F G H J K L ]     |
+---------------------------+       +---------------------------+

SafeAreaView (Edges: top, left, right)
  └── KeyboardAvoidingView (behavior="padding", flex: 1)
        └── ScrollView (keyboardShouldPersistTaps="handled", flex: 1)
              ├── Інпути та контроли форми
              └── Кнопка Submit (навіть при зсуві залишається доступною для скролу)

+-------------------------------------------------------------------------+
|                  ДВОРІВНЕВА АРХІТЕКТУРА ВАЛІДАЦІЇ                       |
+-------------------------------------------------------------------------+
|  РІВЕНЬ 1: КЛІЄНТСЬКИЙ ШАР (UX)      |  РІВЕНЬ 2: СЕРВЕРНИЙ ШАР (SECURITY)|
|  • Миттєвий зворотний зв'язок        |  • Абсолютний захист бізнес-правил |
|  • Працює без доступу до мережі      |  • Захист від скомпрометованих API |
|  • Підсвічування рамок та підказки   |  • Криптографічні перевірки та DB  |
|  • Інструменти: Zod + React Hook Form|  • Інструменти: Backend DTO / Zod  |
+--------------------------------------+----------------------------------+

┌─────────────────────────────────────────────────────────────────────────────┐
│                           ВЗАЄМОДІЯ RHF ТА ZOD                              │
├──────────────────────────────────────┬──────────────────────────────────────┤
│ 📋 REACT HOOK FORM                   │ 🛡️ ZOD                               │
├──────────────────────────────────────┼──────────────────────────────────────┤
│ • Керує станом полів форми           │ • Описує правила валідації (схему)   │
│ • Не перемальовує зайві компоненти   │ • Автоматично генерує типи TypeScript│
│ • Відстежує submit, dirty, touched   │ • Парсить та трансформує дані (.trim)│
│ • Надає Controller для нативних полів│ • Повертає зрозумілі тексти помилок  │
└──────────────────────────────────────┴──────────────────────────────────────┘

// ❌ Ручний підхід: спагетті з перевірок
if (!title || title.trim().length < 2) {
  setError('Назва надто коротка');
}

// ✅ Декларативний контракт із Zod
import { z } from 'zod';

export const tripSchema = z.object({
  title: z
    .string({ required_error: "Назва є обов'язковою" })
    .trim()
    .min(2, 'Назва має містити щонайменше 2 символи')
    .max(50, 'Назва не може перевищувати 50 символів'),
  plannedDays: z
    .number()
    .int()
    .min(1, 'Мінімум 1 день')
    .max(30, 'Максимум 30 днів'),
  isPrivate: z.boolean(),
  agreeTerms: z.literal(true, {
    errorMap: () => ({ message: 'Необхідно погодитися з правилами' }),
  }),
});

// Автоматичне виведення типу TypeScript із Zod-схеми:
export type TripFormValues = z.infer<typeof tripSchema>;

// 🌐 Тільки у Web: реєстрація через прямий DOM ref
<input {...register('email')} />

<Controller
  control={control}
  name="title"
  render={({ field: { onChange, onBlur, value, ref }, fieldState: { error } }) => (
    <View>
      <TextInput
        ref={ref}
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
        placeholder="Введіть назву"
      />
      {error && <Text style={styles.errorText}>{error.message}</Text>}
    </View>
  )}
/>

{/* 1. Текстове поле (TextInput) */}
<Controller
  control={control}
  name="name"
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput value={value} onChangeText={onChange} onBlur={onBlur} />
  )}
/>

{/* 2. Перемикач (Switch) */}
<Controller
  control={control}
  name="isPrivate"
  render={({ field: { onChange, value } }) => (
    <Switch value={value} onValueChange={onChange} />
  )}
/>

{/* 3. Чекбокс (Checkbox) */}
<Controller
  control={control}
  name="agreeTerms"
  render={({ field: { onChange, value } }) => (
    <Checkbox value={value} onValueChange={onChange} />
  )}
/>

{/* 4. Повзунок (Slider) */}
<Controller
  control={control}
  name="plannedDays"
  render={({ field: { onChange, value } }) => (
    <Slider value={value} onValueChange={onChange} minimumValue={1} maximumValue={14} step={1} />
  )}
/>

{/* 5. Селектор (Picker) */}
<Controller
  control={control}
  name="ticketType"
  render={({ field: { onChange, value } }) => (
    <Picker selectedValue={value} onValueChange={onChange}>
      <Picker.Item label="Стандарт" value="standard" />
      <Picker.Item label="VIP" value="vip" />
    </Picker>
  )}
/>

       USER ACTION: Тап по кнопці «Зберегти»
                         │
                         ▼
             handleSubmit(onValid, onInvalid)
                         │
                         ▼
        zodResolver(schema): schema.safeParse(data)
                         │
        ┌────────────────┴────────────────┐
        ▼                                 ▼
   [ VALID ]                         [ INVALID ]
        │                                 │
        ▼                                 ▼
  onValid(data)                  formState.errors
Чисті типізовані дані           Оновлення UI з текстом
готові до відправки на API       помилок під кожним полем

import { z } from 'zod';

export const createTripSchema = z.object({
  title: z.string().trim().min(2, 'Мінімум 2 символи'),
  isPrivate: z.boolean(),
});

export type CreateTripFormValues = z.infer<typeof createTripSchema>;

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const {
  control,
  handleSubmit,
  reset,
  formState: { errors, isSubmitting, isValid, isDirty },
} = useForm<CreateTripFormValues>({
  resolver: zodResolver(createTripSchema),
  defaultValues: {
    title: '',
    isPrivate: false,
  },
  mode: 'onSubmit',
  reValidateMode: 'onChange',
});

const onValid = async (data: CreateTripFormValues) => {
  // data гарантовано відповідає схемі Zod та типу CreateTripFormValues!
  console.log('Відправка на сервер:', data);
  await api.createTrip(data);
  reset(); // Очищення форми до defaultValues після успіху
};

<Pressable 
  onPress={handleSubmit(onValid)} 
  disabled={isSubmitting}
  style={styles.submitBtn}
>
  {isSubmitting ? <ActivityIndicator color="#fff" /> : <Text>Зберегти</Text>}
</Pressable>

event-signup/
  App.tsx          ← увесь застосунок (повний код нижче)
  package.json
  app.json
  index.ts
  …