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

State

Theory

In React Native, state is a JavaScript object that stores a component's dynamic data and determines its behavior. State allows a component to keep track of information that can change over time, such as user input, API responses, or any other dynamic content.

Why do we need State?

State is essential when you want your component to be dynamic and respond to user interactions. For example, if you have a button that toggles a modal or a counter that increments on each button press, you need state to keep track of the current state of these elements.

Working with State

React Native state is used to manage dynamic data within a component. It allows components to have values that can change over time. Common use cases include:

User Input: Capturing and updating user input (e.g., form fields, text input);
Component Visibility: Toggling the visibility of certain elements;
API Requests: Storing and updating data fetched from APIs;
Dynamic UI: Handling changes in UI based on user interactions.

Example 1

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>Increment</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Code Description

Line 1: Import useState from react.
Line 5: Initializes a state variable count with an initial value of 0, and a function setCount to update the value of count.
Line 9: Displays the current value of the count state variable.
Line 10: Handles the press event and increments the count state by 1 using the setCount function.

Result 1

Example 2

Consider a scenario where we want to toggle the visibility of a component based on a button press.

In this example, the isVisible state determines whether the <Text> component is rendered. The button press toggles the visibility.

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

const App = () => {
  const [visible, setVisible] = useState(false);

  const handleBtnPress = () => {
    setVisible(!visible);
  };

  return (
    <View>
      <Text>{visible && "Visible Text"}</Text>
      <TouchableOpacity onPress={handleBtnPress}>
        <Text>Change visibility</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Code Description

Line 1: Import useState from react.
Line 5: Initializes a state variable visible with an initial value of false, and a function setVisible to update the visibility state.
Line 13: Uses conditional rendering to display "Visible Text" only if visible is true.
Line 14: Handles the press event and calls the handleBtnPress function to toggle the visibility.
Lines 7-9: Toggles the visible state when the button is pressed.

Result 2

In Practice

¿Todo estuvo claro?

Sección 3. Capítulo 1

Contenido del Curso

Foundations of React Native

State

Theory

Why do we need State?

Working with State

React Native state is used to manage dynamic data within a component. It allows components to have values that can change over time. Common use cases include:

User Input: Capturing and updating user input (e.g., form fields, text input);
Component Visibility: Toggling the visibility of certain elements;
API Requests: Storing and updating data fetched from APIs;
Dynamic UI: Handling changes in UI based on user interactions.

Example 1

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>Increment</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Code Description

Line 1: Import useState from react.
Line 5: Initializes a state variable count with an initial value of 0, and a function setCount to update the value of count.
Line 9: Displays the current value of the count state variable.
Line 10: Handles the press event and increments the count state by 1 using the setCount function.

Result 1

Example 2

Consider a scenario where we want to toggle the visibility of a component based on a button press.

In this example, the isVisible state determines whether the <Text> component is rendered. The button press toggles the visibility.

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

const App = () => {
  const [visible, setVisible] = useState(false);

  const handleBtnPress = () => {
    setVisible(!visible);
  };

  return (
    <View>
      <Text>{visible && "Visible Text"}</Text>
      <TouchableOpacity onPress={handleBtnPress}>
        <Text>Change visibility</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Code Description

Line 1: Import useState from react.
Line 5: Initializes a state variable visible with an initial value of false, and a function setVisible to update the visibility state.
Line 13: Uses conditional rendering to display "Visible Text" only if visible is true.
Line 14: Handles the press event and calls the handleBtnPress function to toggle the visibility.
Lines 7-9: Toggles the visible state when the button is pressed.

Result 2

In Practice

¿Todo estuvo claro?

Sección 3. Capítulo 1