Manejo de Formularios con react-native-use-form-lite

---

npm install react-native-use-form-lite
# Si usas Picker
npm install @react-native-picker/picker

import {
View,
TextInput,
Switch,
Button,
Text,
StyleSheet,
Platform,
} from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useFormLite } from 'react-native-use-form-lite';

const MyForm = () => {
const { formData, register, resetForm, getEmptyFields } = useFormLite({
  name: '',
  email: '',
  isActive: false,
  selectedOption: '',
});

const handleSubmit = () => {
  console.log(formData);
  const emptyFields = getEmptyFields();
  console.log('Campos vacíos:', emptyFields);
};

return (
  <View style={styles.container}>
    <Text style={styles.title}>Formulario Moderno</Text>

    <TextInput
      placeholder="Nombre"
      style={styles.input}
      {...register('name')}
    />

    <TextInput
      placeholder="Correo electrónico"
      style={styles.input}
      keyboardType="email-address"
      {...register('email')}
    />

    <View style={styles.switchContainer}>
      <Text style={styles.label}>¿Activo?</Text>
      <Switch {...register('isActive', { type: 'switch' })} />
    </View>

    <Picker
      style={styles.picker}
      {...register('selectedOption', { type: 'select' })}
    >
      <Picker.Item label="Seleccione un país" value="" />
      <Picker.Item label="Colombia" value="CO" />
      <Picker.Item label="México" value="MX" />
      <Picker.Item label="Argentina" value="AR" />
    </Picker>

    <View style={styles.buttonContainer}>
      <Button title="Enviar" onPress={handleSubmit} color="#4A90E2" />
    </View>
    <View style={styles.buttonContainer}>
      <Button title="Resetear" onPress={resetForm} color="#FF3B30" />
    </View>
  </View>
);
};

const styles = StyleSheet.create({
container: {
  padding: 20,
  backgroundColor: '#F9F9F9',
  flex: 1,
  justifyContent: 'center',
},
title: {
  fontSize: 24,
  fontWeight: '700',
  color: '#333',
  marginBottom: 20,
  textAlign: 'center',
},
input: {
  borderWidth: 1,
  borderColor: '#CCC',
  borderRadius: 8,
  padding: 10,
  marginBottom: 16,
  backgroundColor: '#FFF',
},
switchContainer: {
  flexDirection: 'row',
  alignItems: 'center',
  marginBottom: 16,
  justifyContent: 'space-between',
},
label: {
  fontSize: 16,
  color: '#333',
},
picker: {
  borderWidth: 1,
  borderColor: '#CCC',
  borderRadius: 8,
  backgroundColor: Platform.OS === 'android' ? '#FFF' : 'transparent',
  marginBottom: 16,
},
buttonContainer: {
  marginBottom: 12,
  borderRadius: 8,
  overflow: 'hidden',
},
});

export default MyForm;