TextInput - Basics of Data Input

Welcome to the Pearl Workshop! Here you will learn how to collect data from the residents of Atlantis through forms.

Basic 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}>Name:</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Enter your name"
        placeholderTextColor="#888"
      />
      <Text>Entered: {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',
  },
});

Important TextInput Properties

<TextInput
  // Basic
  value={value}
  onChangeText={(text) => setValue(text)}
  placeholder="Hint"
  placeholderTextColor="#999"

  // Keyboard type
  keyboardType="default"        // default
  keyboardType="email-address"  // email with @
  keyboardType="numeric"        // numbers only
  keyboardType="phone-pad"      // phone
  keyboardType="decimal-pad"    // numbers with decimal

  // Behavior
  autoCapitalize="none"         // no capitalization
  autoCapitalize="sentences"    // capitalize first letter of sentence
  autoCapitalize="words"        // capitalize each word
  autoCorrect={false}           // disable autocorrect
  autoComplete="email"          // suggestions (email, password, name)

  // Appearance
  multiline={true}              // multiline field
  numberOfLines={4}             // number of lines (Android)
  maxLength={100}               // maximum length

  // Password
  secureTextEntry={true}        // hide text

  // Focus
  autoFocus={true}              // automatic focus
  selectTextOnFocus={true}      // select text on focus

  // Keyboard buttons
  returnKeyType="done"          // done, go, next, search, send
  onSubmitEditing={() => {}}    // action on Enter

  // Editability
  editable={true}               // whether editable
/>

Different Field Types

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"
      />

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

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

      {/* Multiline */}
      <TextInput
        style={[styles.input, styles.multiline]}
        value={bio}
        onChangeText={setBio}
        placeholder="Tell us about yourself..."
        multiline
        numberOfLines={4}
        textAlignVertical="top"
      />
    </View>
  );
}

Styling States

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('Invalid 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 is the fundamental form element in 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}>Login to Atlantis</Text>

      {/* TODO: add a <TextInput> for email that:
          - has value={email} and onChangeText={setEmail}
          - has placeholder="Email"
          - has keyboardType="email-address"
          - has autoCapitalize="none"
          - uses the styles.input style */}

      {/* TODO: add a <TextInput> for password that:
          - has value={password} and onChangeText={setPassword}
          - has placeholder="Password"
          - hides the text using secureTextEntry
          - uses the styles.input style */}

    </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,
  },
});