The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Forms and Controlled Components

Next ►
►

In this section, we will delve into forms and controlled components in React Native. Forms are essential for collecting user input, and understanding controlled components is crucial for managing form data effectively.

Key Concepts

  1. Forms in React Native:

    • Forms are used to collect user input.
    • Common form elements include TextInput, Switch, and Picker.

  2. Controlled Components:

    • A controlled component is an input element whose value is controlled by the state.
    • The state is the single source of truth for the input value.

  3. Uncontrolled Components:

    • An uncontrolled component manages its own state internally.
    • React does not control the input value.

Controlled Components

Example: Controlled TextInput

A controlled TextInput is an input field where the value is controlled by the state.

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

const ControlledTextInput = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="Type here"
      />
      <Text style={styles.text}>You typed: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default ControlledTextInput;

Explanation

  • useState Hook: We use the useState hook to create a state variable text and a function setText to update it.
  • TextInput: The value prop is set to the state variable text, making it a controlled component. The onChangeText prop updates the state with the new input value.
  • Text: Displays the current value of the text state.

Practical Exercise

Task: Create a Controlled Form

Create a form with the following fields:

  • Name (TextInput)
  • Email (TextInput)
  • Age (TextInput)
  • Gender (Picker)

Solution

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

const ControlledForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState('');
  const [gender, setGender] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Name"
      />
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
      />
      <TextInput
        style={styles.input}
        value={age}
        onChangeText={setAge}
        placeholder="Age"
        keyboardType="numeric"
      />
      <Picker
        selectedValue={gender}
        style={styles.picker}
        onValueChange={(itemValue) => setGender(itemValue)}
      >
        <Picker.Item label="Select Gender" value="" />
        <Picker.Item label="Male" value="male" />
        <Picker.Item label="Female" value="female" />
        <Picker.Item label="Other" value="other" />
      </Picker>
      <Text style={styles.text}>Name: {name}</Text>
      <Text style={styles.text}>Email: {email}</Text>
      <Text style={styles.text}>Age: {age}</Text>
      <Text style={styles.text}>Gender: {gender}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  picker: {
    height: 50,
    width: '100%',
    marginBottom: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default ControlledForm;

Explanation

  • TextInput: Each TextInput is controlled by its respective state variable (name, email, age).
  • Picker: The Picker component is controlled by the gender state variable. The onValueChange prop updates the state with the selected value.
  • Text: Displays the current values of the form fields.

Common Mistakes and Tips

  • Forgetting to Update State: Ensure that the onChangeText or onValueChange props are correctly updating the state.
  • Initial State: Initialize state variables with appropriate default values.
  • Keyboard Types: Use the keyboardType prop to specify the type of keyboard for different inputs (e.g., email-address for email, numeric for numbers).

Conclusion

In this section, we covered the basics of forms and controlled components in React Native. We learned how to create controlled TextInput and Picker components and manage their state effectively. Understanding controlled components is crucial for building robust and user-friendly forms in your React Native applications.

Next, we will explore navigation in React Native, starting with an introduction to React Navigation.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved