Foundations of React Native

1. Introduction

The comprehensive introduction to React Native outlines the prerequisites and course objectives and offers guidance on efficient learning practices. Understand what to expect from the course and how to approach the learning journey effectively.

Greeting

Course Objectives

Course Prerequisites

Efficient Learning

2. Basic Concepts

Explore the foundational concepts of React Native, from setting up the development environment to understanding React Native components. Get hands-on experience building a simple app and laying the groundwork for more complex projects.

Setting up the Project

React Native Components

View and Text Components

Image Component

Styling

Challenge: Adding Styles

TouchableOpacity Component

ScrollView Component

Rendering Data Lists

Challenge: Interactive Resort List

Quiz

3. Common Principles

Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.

State

Props

Challenge: Props and State

4. Advanced Concepts

Explore advanced aspects of React Native development, covering crucial topics such as Input handling, StatusBar, ActivityIndicators, and more. Dive deep into practical techniques for building sophisticated mobile applications.

Switch Component

ActivityIndicator Component

Modal Component

TextInput Component

Challenge: Dark/Light Mode Toggler with Activity Indicator

Quiz

TextInput Component

Theory

The TextInput component is used to allow users to input text. It provides a text input field where users can type, paste, or edit text, making it a fundamental component for collecting user input in forms, search bars, chat applications, and more.

Why Do We Need It?

User Input Handling:
- Allows users to input text data into your application;
- Essential for gathering information from users, such as usernames, passwords, messages, search queries, and more.
Versatility:
- Can be customized and configured to meet various input requirements, including keyboard type, placeholder text, secure text entry, and input validation.

How to Work with TextInput

The TextInput can be controlled through its props and state;
We can listen for user input events using callback functions provided by the component, such as onChangeText.

Example

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

const App = () => {
  const [name, setName] = useState("");
  const [welcomeMessage, setWelcomeMessage] = useState("");

  const handleNameChange = (inputValue) => {
    setName(inputValue);
  };

  const handleNameSubmission = () => {
    if (name.trim() !== "") {
      setWelcomeMessage(`Welcome, ${name}!`);
      setName(""); // Clear the input field
    } else {
      setWelcomeMessage("Please enter your name.");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>{welcomeMessage}</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name..."
        onChangeText={handleNameChange}
        value={name}
      />
      <TouchableOpacity style={styles.button} onPress={handleNameSubmission}>
        <Text style={styles.buttonText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Code Description

Lines 11-12: name: Holds the value entered in the input field for the user's name.
welcomeMessage: Displays a welcome message or an error message.
Lines 14-16: Updates the name state with the current value entered in the input field.
Lines 18-25: Checks if the entered name is not empty.
If not empty, sets the welcome message with the entered name and clears the input field.
If empty, sets an error message asking the user to enter their name.
Lines 30-35: TextInput: Allows users to enter their name.
Attributes include style, placeholder, onChangeText, and value to control the appearance and behavior of the input field.
Line 36:The onPress event triggers the handleNameSubmission function.

Explanation

We use the useState hook to manage two state variables: name and welcomeMessage. name stores the user's input text, while welcomeMessage stores the message displayed at the top of the screen;
The handleNameChange function is called whenever the user types or edits their name in the TextInput component. It updates the name state with the new input value;
The handleNameSubmission function is called when the user submits their name.
1. It first checks if the input name is not empty (using trim() to remove leading and trailing whitespace);
2. If the input name is not empty, it updates the welcomeMessage state to display a personalized welcome message ("Welcome, [name]!");
3. It then clears the name state by setting it to an empty string, effectively resetting the TextInput component to an empty state for the next input;
4. If the input name is empty, it updates the welcomeMessage state to prompt the user to enter their name ("Please enter your name.").

Result

In Practice

Все було зрозуміло?

Секція 4. Розділ 4

Зміст курсу

Foundations of React Native

TextInput Component

Theory

Why Do We Need It?

User Input Handling:
- Allows users to input text data into your application;
- Essential for gathering information from users, such as usernames, passwords, messages, search queries, and more.
Versatility:
- Can be customized and configured to meet various input requirements, including keyboard type, placeholder text, secure text entry, and input validation.

How to Work with TextInput

The TextInput can be controlled through its props and state;
We can listen for user input events using callback functions provided by the component, such as onChangeText.

Example

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

const App = () => {
  const [name, setName] = useState("");
  const [welcomeMessage, setWelcomeMessage] = useState("");

  const handleNameChange = (inputValue) => {
    setName(inputValue);
  };

  const handleNameSubmission = () => {
    if (name.trim() !== "") {
      setWelcomeMessage(`Welcome, ${name}!`);
      setName(""); // Clear the input field
    } else {
      setWelcomeMessage("Please enter your name.");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>{welcomeMessage}</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name..."
        onChangeText={handleNameChange}
        value={name}
      />
      <TouchableOpacity style={styles.button} onPress={handleNameSubmission}>
        <Text style={styles.buttonText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Code Description

Lines 11-12: name: Holds the value entered in the input field for the user's name.
welcomeMessage: Displays a welcome message or an error message.
Lines 14-16: Updates the name state with the current value entered in the input field.
Lines 18-25: Checks if the entered name is not empty.
If not empty, sets the welcome message with the entered name and clears the input field.
If empty, sets an error message asking the user to enter their name.
Lines 30-35: TextInput: Allows users to enter their name.
Attributes include style, placeholder, onChangeText, and value to control the appearance and behavior of the input field.
Line 36:The onPress event triggers the handleNameSubmission function.

Explanation

We use the useState hook to manage two state variables: name and welcomeMessage. name stores the user's input text, while welcomeMessage stores the message displayed at the top of the screen;
The handleNameChange function is called whenever the user types or edits their name in the TextInput component. It updates the name state with the new input value;
The handleNameSubmission function is called when the user submits their name.
1. It first checks if the input name is not empty (using trim() to remove leading and trailing whitespace);
2. If the input name is not empty, it updates the welcomeMessage state to display a personalized welcome message ("Welcome, [name]!");
3. It then clears the name state by setting it to an empty string, effectively resetting the TextInput component to an empty state for the next input;
4. If the input name is empty, it updates the welcomeMessage state to prompt the user to enter their name ("Please enter your name.").

Result

In Practice

Все було зрозуміло?

Секція 4. Розділ 4