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

ActivityIndicator Component

Theory

The ActivityIndicator component in is used to indicate that a task is ongoing, providing visual feedback to the user. It typically appears as a spinning wheel or other animated indicator to convey that the application is busy performing an operation.

Why Do We Need It?

Indicates that the application is working on a task, preventing the user from assuming the application has frozen.

How to Work with ActivityIndicator

The ActivityIndicator is straightforward to use and does not require state management;
We can control its visibility by conditionally rendering it based on the status of a task.

Example

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

const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [additionalData, setAdditionalData] = useState(null);

  const fetchData = () => {
    setIsLoading(true);
    setTimeout(() => {
      // Simulated data fetching completion after 3 seconds
      setIsLoading(false);
      setAdditionalData("Additional data loaded!");
    }, 3000);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to the App!</Text>
      <TouchableOpacity onPress={fetchData} style={styles.button}>
        <Text style={styles.buttonText}>Load Additional Data</Text>
      </TouchableOpacity>
      {isLoading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        additionalData && (
          <Text style={styles.additionalData}>{additionalData}</Text>
        )
      )}
    </View>
  );
};

export default App;

Code Description

Lines 11-12: isLoading: Manages the loading state, initialized as false.
additionalData: Holds additional data fetched, initialized as null.
Lines 14-21: Simulates data fetching by setting isLoading to true and then, after a delay of 3 seconds, sets isLoading to false and updates additionalData.
Lines 26-28: Triggers data fetching when pressed.
Lines 29-35: Conditional Rendering ({isLoading ? ... : ...})
Renders an ActivityIndicator while loading (isLoading is true).
Renders additional data (additionalData) when loading is complete (isLoading is false) and additionalData is available.

Explanation

Initially, the component renders a welcome message using the Text component and a button using the TouchableOpacity component;
When the button is pressed, the fetchData function is called, which sets isLoading to true to display the ActivityIndicator;
After a 3-second delay (simulating data fetching), the fetchData function sets isLoading back to false and updates the additionalData state with some text;
The ActivityIndicator is displayed while isLoading is true, and once isLoading becomes false, the additionalData is shown using the Text component.

Result

In Practice

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

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

Зміст курсу

Foundations of React Native

ActivityIndicator Component

Theory

Why Do We Need It?

Indicates that the application is working on a task, preventing the user from assuming the application has frozen.

How to Work with ActivityIndicator

The ActivityIndicator is straightforward to use and does not require state management;
We can control its visibility by conditionally rendering it based on the status of a task.

Example

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

const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [additionalData, setAdditionalData] = useState(null);

  const fetchData = () => {
    setIsLoading(true);
    setTimeout(() => {
      // Simulated data fetching completion after 3 seconds
      setIsLoading(false);
      setAdditionalData("Additional data loaded!");
    }, 3000);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to the App!</Text>
      <TouchableOpacity onPress={fetchData} style={styles.button}>
        <Text style={styles.buttonText}>Load Additional Data</Text>
      </TouchableOpacity>
      {isLoading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        additionalData && (
          <Text style={styles.additionalData}>{additionalData}</Text>
        )
      )}
    </View>
  );
};

export default App;

Code Description

Lines 11-12: isLoading: Manages the loading state, initialized as false.
additionalData: Holds additional data fetched, initialized as null.
Lines 14-21: Simulates data fetching by setting isLoading to true and then, after a delay of 3 seconds, sets isLoading to false and updates additionalData.
Lines 26-28: Triggers data fetching when pressed.
Lines 29-35: Conditional Rendering ({isLoading ? ... : ...})
Renders an ActivityIndicator while loading (isLoading is true).
Renders additional data (additionalData) when loading is complete (isLoading is false) and additionalData is available.

Explanation

Initially, the component renders a welcome message using the Text component and a button using the TouchableOpacity component;
When the button is pressed, the fetchData function is called, which sets isLoading to true to display the ActivityIndicator;
After a 3-second delay (simulating data fetching), the fetchData function sets isLoading back to false and updates the additionalData state with some text;
The ActivityIndicator is displayed while isLoading is true, and once isLoading becomes false, the additionalData is shown using the Text component.

Result

In Practice

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

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