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

TouchableOpacity Component

Theory

The TouchableOpacity component provides touch feedback to the user. It's a wrapper that detects taps or clicks and provides a visual response. This component is commonly used to create interactive elements like buttons. Here's how we can work with it:

Why Use TouchableOpacity

Touchable Feedback: It provides a visual response (opacity change) when the user presses the component, giving feedback that their touch has been recognized;
Touchable Area: Defines an area that responds to touches, making it suitable for creating interactive elements like buttons;
Consistent Behavior: Ensures a consistent touch experience across different devices.

Working with TouchableOpacity

We wrap the content we want to make touchable inside the TouchableOpacity component;
The onPress prop is used to specify the function that should be executed when the component is pressed.

Example

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

const App = () => {
  const handlePress = () => {
    alert("Button pressed");
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress} style={styles.button}>
        <Text style={styles.buttonText}>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

Code Description

Line 2: Import TouchableOpacity from react-native.
Lines 11-13: TouchableOpacity: Wraps the Text component, making it touchable. It provides a touchable effect and triggers the onPress event when pressed.
Lines 5-7: Defines a function handlePress that displays an alert when the button is pressed.
Line 11: onPress={handlePress}: Specifies that the handlePress function should be called when the TouchableOpacity is pressed.

We created a button that displays "Press Me". When pressed, it triggers an alert saying "Button pressed".

Result

In Practice

Everything was clear?

Section 2. Chapter 7

Course Content

Foundations of React Native

TouchableOpacity Component

Theory

Why Use TouchableOpacity

Touchable Feedback: It provides a visual response (opacity change) when the user presses the component, giving feedback that their touch has been recognized;
Touchable Area: Defines an area that responds to touches, making it suitable for creating interactive elements like buttons;
Consistent Behavior: Ensures a consistent touch experience across different devices.

Working with TouchableOpacity

We wrap the content we want to make touchable inside the TouchableOpacity component;
The onPress prop is used to specify the function that should be executed when the component is pressed.

Example

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

const App = () => {
  const handlePress = () => {
    alert("Button pressed");
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress} style={styles.button}>
        <Text style={styles.buttonText}>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

Code Description

Line 2: Import TouchableOpacity from react-native.
Lines 11-13: TouchableOpacity: Wraps the Text component, making it touchable. It provides a touchable effect and triggers the onPress event when pressed.
Lines 5-7: Defines a function handlePress that displays an alert when the button is pressed.
Line 11: onPress={handlePress}: Specifies that the handlePress function should be called when the TouchableOpacity is pressed.

We created a button that displays "Press Me". When pressed, it triggers an alert saying "Button pressed".

Result

In Practice

Everything was clear?

Section 2. Chapter 7