Projet : Formulaire d'inscription de l'Atlantide

Combinons tout dans un formulaire d'inscription complet !

Formulaire complet

import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
  View,
  Text,
  TextInput,
  Switch,
  Pressable,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
  Alert,
} from 'react-native';

// Schéma
const registrationSchema = z.object({
  name: z.string().min(2, 'Min. 2 caractères').max(50),
  email: z.string().email('Email invalide'),
  password: z
    .string()
    .min(8, 'Min. 8 caractères')
    .regex(/[A-Z]/, 'Majuscule requise')
    .regex(/[0-9]/, 'Chiffre requis'),
  confirmPassword: z.string(),
  birthDate: z.date().refine(
    (date) => {
      const age = (Date.now() - date.getTime()) / (365.25 * 24 * 60 * 60 * 1000);
      return age >= 18;
    },
    { message: 'Tu dois avoir au moins 18 ans' }
  ),
  newsletter: z.boolean(),
  terms: z.literal(true, {
    errorMap: () => ({ message: 'Tu dois accepter les conditions' }),
  }),
}).refine((data) => data.password === data.confirmPassword, {
  message: 'Les mots de passe doivent correspondre',
  path: ['confirmPassword'],
});

type FormData = z.infer<typeof registrationSchema>;

export function RegistrationForm() {
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>({
    resolver: zodResolver(registrationSchema),
    defaultValues: {
      name: '',
      email: '',
      password: '',
      confirmPassword: '',
      birthDate: new Date(),
      newsletter: true,
      terms: false,
    },
  });

  const onSubmit = async (data: FormData) => {
    try {
      // Simuler un appel API
      await new Promise((resolve) => setTimeout(resolve, 2000));

      Alert.alert(
        'Réussi !',
        `Bienvenue en Atlantide, ${data.name} !`,
        [{ text: 'OK', onPress: () => reset() }]
      );
    } catch (error) {
      Alert.alert('Erreur', 'L\'inscription a échoué');
    }
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView contentContainerStyle={styles.scroll}>
        <Text style={styles.title}>S'inscrire en Atlantide</Text>

        {/* Nom */}
        <View style={styles.field}>
          <Text style={styles.label}>Nom</Text>
          <Controller
            control={control}
            name="name"
            render={({ field: { onChange, onBlur, value } }) => (
              <TextInput
                style={[styles.input, errors.name && styles.inputError]}
                placeholder="Ton nom"
                onBlur={onBlur}
                onChangeText={onChange}
                value={value}
              />
            )}
          />
          {errors.name && (
            <Text style={styles.error}>{errors.name.message}</Text>
          )}
        </View>

        {/* Email */}
        <View style={styles.field}>
          <Text style={styles.label}>Email</Text>
          <Controller
            control={control}
            name="email"
            render={({ field: { onChange, onBlur, value } }) => (
              <TextInput
                style={[styles.input, errors.email && styles.inputError]}
                placeholder="email@atlantide.mer"
                keyboardType="email-address"
                autoCapitalize="none"
                onBlur={onBlur}
                onChangeText={onChange}
                value={value}
              />
            )}
          />
          {errors.email && (
            <Text style={styles.error}>{errors.email.message}</Text>
          )}
        </View>

        {/* Mot de passe */}
        <View style={styles.field}>
          <Text style={styles.label}>Mot de passe</Text>
          <Controller
            control={control}
            name="password"
            render={({ field: { onChange, onBlur, value } }) => (
              <TextInput
                style={[styles.input, errors.password && styles.inputError]}
                placeholder="Min. 8 caractères"
                secureTextEntry
                onBlur={onBlur}
                onChangeText={onChange}
                value={value}
              />
            )}
          />
          {errors.password && (
            <Text style={styles.error}>{errors.password.message}</Text>
          )}
        </View>

        {/* Confirmation du mot de passe */}
        <View style={styles.field}>
          <Text style={styles.label}>Confirme le mot de passe</Text>
          <Controller
            control={control}
            name="confirmPassword"
            render={({ field: { onChange, onBlur, value } }) => (
              <TextInput
                style={[styles.input, errors.confirmPassword && styles.inputError]}
                placeholder="Répète le mot de passe"
                secureTextEntry
                onBlur={onBlur}
                onChangeText={onChange}
                value={value}
              />
            )}
          />
          {errors.confirmPassword && (
            <Text style={styles.error}>{errors.confirmPassword.message}</Text>
          )}
        </View>

        {/* Newsletter */}
        <Controller
          control={control}
          name="newsletter"
          render={({ field: { onChange, value } }) => (
            <View style={styles.switchRow}>
              <Text>Newsletter de l'Atlantide</Text>
              <Switch value={value} onValueChange={onChange} />
            </View>
          )}
        />

        {/* Conditions */}
        <Controller
          control={control}
          name="terms"
          render={({ field: { onChange, value } }) => (
            <View>
              <View style={styles.switchRow}>
                <Text>J'accepte les conditions</Text>
                <Switch value={value} onValueChange={onChange} />
              </View>
              {errors.terms && (
                <Text style={styles.error}>{errors.terms.message}</Text>
              )}
            </View>
          )}
        />

        {/* Envoyer */}
        <Pressable
          style={[styles.button, isSubmitting && styles.buttonDisabled]}
          onPress={handleSubmit(onSubmit)}
          disabled={isSubmitting}
        >
          {isSubmitting ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <Text style={styles.buttonText}>S'inscrire</Text>
          )}
        </Pressable>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

Ce projet combine toutes les techniques apprises : TextInput, KeyboardAvoidingView, react-hook-form, la validation Zod, Switch et le style !

import React from 'react';
import { View, Text, TextInput, Switch, Pressable, StyleSheet } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2, 'Min. 2 caractères'),
  email: z.string().email('Email invalide'),
  newsletter: z.boolean(),
});

type FormData = z.infer<typeof schema>;

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    // TODO : connecte la validation du schéma via resolver: zodResolver(schema)
    defaultValues: { name: '', email: '', newsletter: true },
  });

  const onSubmit = (data: FormData) => console.log(data);

  return (
    <View style={styles.container}>
      {/* TODO : ajoute un <Controller name="name"> avec un <TextInput> (onChange, onBlur, value) et placeholder "Nom" */}

      {/* TODO : ajoute un <Controller name="email"> avec un <TextInput> (keyboardType="email-address") et placeholder "Email" */}

      <Controller
        control={control}
        name="newsletter"
        render={({ field: { onChange, value } }) => (
          <View style={styles.row}>
            <Text style={styles.label}>Newsletter de l'Atlantide</Text>
            {/* TODO : ajoute un <Switch value={value} onValueChange={onChange} /> */}
          </View>
        )}
      />

      <Pressable style={styles.button} onPress={handleSubmit(onSubmit)}>
        <Text style={styles.buttonText}>S'inscrire</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#1a5276',
  },
  input: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 14,
    fontSize: 16,
    color: '#1a5276',
    marginBottom: 8,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginVertical: 12,
  },
  label: {
    color: '#fff',
    fontSize: 16,
  },
  error: {
    color: '#e74c3c',
    marginBottom: 12,
  },
  button: {
    backgroundColor: '#2980b9',
    borderRadius: 8,
    padding: 14,
    alignItems: 'center',
    marginTop: 12,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});