TextInput - Podstawy wprowadzania danych

Witaj w Perłowej Pracowni! Tutaj nauczysz się zbierać dane od mieszkańców Atlantydy poprzez formularze.

Podstawowy TextInput

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Imię:</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Wpisz swoje imię"
        placeholderTextColor="#888"
      />
      <Text>Wpisano: {name}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    color: '#1a5276',
  },
  input: {
    borderWidth: 1,
    borderColor: '#1a5276',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    backgroundColor: '#fff',
  },
});

Ważne właściwości TextInput

<TextInput
  // Podstawowe
  value={value}
  onChangeText={(text) => setValue(text)}
  placeholder="Podpowiedź"
  placeholderTextColor="#999"

  // Typ klawiatury
  keyboardType="default"        // domyślna
  keyboardType="email-address"  // email z @
  keyboardType="numeric"        // tylko cyfry
  keyboardType="phone-pad"      // telefon
  keyboardType="decimal-pad"    // liczby z przecinkiem

  // Zachowanie
  autoCapitalize="none"         // bez wielkich liter
  autoCapitalize="sentences"    // wielka na początku zdania
  autoCapitalize="words"        // wielka każde słowo
  autoCorrect={false}           // wyłącz autokorektę
  autoComplete="email"          // sugestie (email, password, name)

  // Wygląd
  multiline={true}              // pole wieloliniowe
  numberOfLines={4}             // liczba linii (Android)
  maxLength={100}               // maksymalna długość

  // Hasło
  secureTextEntry={true}        // ukrycie tekstu

  // Focus
  autoFocus={true}              // automatyczny focus
  selectTextOnFocus={true}      // zaznacz tekst przy focus

  // Przyciski klawiatury
  returnKeyType="done"          // done, go, next, search, send
  onSubmitEditing={() => {}}    // akcja przy Enter

  // Edytowalność
  editable={true}               // czy można edytować
/>

Różne typy pól

function InputTypes() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [bio, setBio] = useState('');

  return (
    <View style={styles.container}>
      {/* Email */}
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        autoComplete="email"
      />

      {/* Hasło */}
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        placeholder="Hasło"
        secureTextEntry
        autoComplete="password"
      />

      {/* Telefon */}
      <TextInput
        style={styles.input}
        value={phone}
        onChangeText={setPhone}
        placeholder="Numer telefonu"
        keyboardType="phone-pad"
        maxLength={12}
      />

      {/* Wieloliniowe */}
      <TextInput
        style={[styles.input, styles.multiline]}
        value={bio}
        onChangeText={setBio}
        placeholder="Opowiedz o sobie..."
        multiline
        numberOfLines={4}
        textAlignVertical="top"
      />
    </View>
  );
}

Stylowanie stanów

function StyledInput() {
  const [value, setValue] = useState('');
  const [isFocused, setIsFocused] = useState(false);
  const [error, setError] = useState('');

  const validateEmail = (text: string) => {
    setValue(text);
    if (text && !text.includes('@')) {
      setError('Nieprawidłowy email');
    } else {
      setError('');
    }
  };

  return (
    <View>
      <TextInput
        style={[
          styles.input,
          isFocused && styles.inputFocused,
          error && styles.inputError,
        ]}
        value={value}
        onChangeText={validateEmail}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        placeholder="Email"
      />
      {error ? <Text style={styles.errorText}>{error}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 2,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
  },
  inputFocused: {
    borderColor: '#1a5276',
    backgroundColor: '#f0f8ff',
  },
  inputError: {
    borderColor: '#e74c3c',
    backgroundColor: '#fdf2f2',
  },
  errorText: {
    color: '#e74c3c',
    fontSize: 12,
    marginTop: 4,
  },
});

TextInput to podstawowy element formularzy w React Native!

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

export default function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Logowanie do Atlantydy</Text>

      {/* TODO: dodaj <TextInput> dla email, który:
          - ma value={email} oraz onChangeText={setEmail}
          - ma placeholder="Email"
          - ma keyboardType="email-address"
          - ma autoCapitalize="none"
          - korzysta ze stylu styles.input */}

      {/* TODO: dodaj <TextInput> dla hasła, który:
          - ma value={password} oraz onChangeText={setPassword}
          - ma placeholder="Hasło"
          - ukrywa tekst za pomocą secureTextEntry
          - korzysta ze stylu styles.input */}

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 22,
    color: '#fff',
    marginBottom: 24,
    textAlign: 'center',
  },
  input: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 14,
    fontSize: 16,
    color: '#1a5276',
    marginBottom: 16,
  },
});