TextInput y Teclado

TextInput Básico

typescript
Copiar
1import { TextInput, StyleSheet } from "react-native";
2import { useState } from "react";
3
4function BasicForm() {
5  const [text, setText] = useState("");
6  const [email, setEmail] = useState("");
7  const [password, setPassword] = useState("");
8
9  return (
10    <View style={styles.container}>
11      <TextInput
12        style={styles.input}
13        value={text}
14        onChangeText={setText}
15        placeholder="Nombre"
16        placeholderTextColor="#999"
17      />
18
19      <TextInput
20        style={styles.input}
21        value={email}
22        onChangeText={setEmail}
23        placeholder="Email"
24        keyboardType="email-address"
25        autoCapitalize="none"
26        autoComplete="email"
27        autoCorrect={false}
28      />
29
30      <TextInput
31        style={styles.input}
32        value={password}
33        onChangeText={setPassword}
34        placeholder="Contraseña"
35        secureTextEntry
36        autoComplete="password"
37      />
38    </View>
39  );
40}
41
42const styles = StyleSheet.create({
43  container: {
44    padding: 20,
45  },
46  input: {
47    height: 50,
48    backgroundColor: "white",
49    borderWidth: 1,
50    borderColor: "#ddd",
51    borderRadius: 8,
52    paddingHorizontal: 15,
53    fontSize: 16,
54    marginBottom: 15,
55  },
56});

Tipos de Teclado

typescript
Copiar
1<TextInput
2  keyboardType="default" // Teclado normal
3  keyboardType="email-address" // @ y .com
4  keyboardType="numeric" // Solo números
5  keyboardType="phone-pad" // Teclado de teléfono
6  keyboardType="decimal-pad" // Números con decimales
7  keyboardType="url" // .com / .net
8/>

Manejo del Teclado

typescript
Copiar
1import {
2  KeyboardAvoidingView,
3  Platform,
4  TouchableWithoutFeedback,
5  Keyboard,
6} from "react-native";
7
8function FormWithKeyboard() {
9  return (
10    <KeyboardAvoidingView
11      behavior={Platform.OS === "ios" ? "padding" : "height"}
12      style={styles.container}
13    >
14      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
15        <View style={styles.inner}>
16          <TextInput style={styles.input} placeholder="Nombre" />
17          <TextInput style={styles.input} placeholder="Email" />
18          <TouchableOpacity style={styles.button}>
19            <Text>Enviar</Text>
20          </TouchableOpacity>
21        </View>
22      </TouchableWithoutFeedback>
23    </KeyboardAvoidingView>
24  );
25}

Focus y Refs

typescript
Copiar
1import { useRef } from "react";
2
3function FormWithRefs() {
4  const emailRef = useRef<TextInput>(null);
5  const passwordRef = useRef<TextInput>(null);
6
7  return (
8    <View>
9      <TextInput
10        placeholder="Nombre"
11        returnKeyType="next"
12        onSubmitEditing={() => emailRef.current?.focus()}
13        blurOnSubmit={false}
14      />
15
16      <TextInput
17        ref={emailRef}
18        placeholder="Email"
19        returnKeyType="next"
20        onSubmitEditing={() => passwordRef.current?.focus()}
21        blurOnSubmit={false}
22      />
23
24      <TextInput
25        ref={passwordRef}
26        placeholder="Contraseña"
27        returnKeyType="done"
28        onSubmitEditing={handleSubmit}
29      />
30    </View>
31  );
32}