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

ScrollView Component

Theory

The ScrollView component creates a scrollable view with a flexible height. It's particularly useful when you have content that exceeds the available space on the screen.

Why Use ScrollView

Scrolling Content: Allows you to create a container that can be scrolled vertically or horizontally to view its content;
Handling Overflow: Useful when the content inside a view is too large to fit on the screen.

Working with ScrollView

Wrap the content we want to make scrollable inside the ScrollView component;
The contentContainerStyle prop is used to style the content inside the scroll view;
We can change the default vertical scroll behavior to horizontal by providing the prop horizontal.

Example

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

const App = () => {
  return (
    <View style={styles.view}>
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.text}>Item 1</Text>
        <Text style={styles.text}>Item 2</Text>
        {/* More Items */}
      </ScrollView>
    </View>
  );
};

export default App;

Code Description

Line 2: Import ScrollView from react-native.
Line 7: Wraps the Text components and provides a scrollable view. The contentContainerStyle prop is used to apply styles to the content inside the ScrollView.

Result

In Practice

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

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

Зміст курсу

Foundations of React Native

ScrollView Component

Theory

The ScrollView component creates a scrollable view with a flexible height. It's particularly useful when you have content that exceeds the available space on the screen.

Why Use ScrollView

Scrolling Content: Allows you to create a container that can be scrolled vertically or horizontally to view its content;
Handling Overflow: Useful when the content inside a view is too large to fit on the screen.

Working with ScrollView

Wrap the content we want to make scrollable inside the ScrollView component;
The contentContainerStyle prop is used to style the content inside the scroll view;
We can change the default vertical scroll behavior to horizontal by providing the prop horizontal.

Example

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

const App = () => {
  return (
    <View style={styles.view}>
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.text}>Item 1</Text>
        <Text style={styles.text}>Item 2</Text>
        {/* More Items */}
      </ScrollView>
    </View>
  );
};

export default App;

Code Description

Line 2: Import ScrollView from react-native.
Line 7: Wraps the Text components and provides a scrollable view. The contentContainerStyle prop is used to apply styles to the content inside the ScrollView.

Result

In Practice

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

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