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

Styling

Before we proceed with working on components and delving deeper into React Native, let's address styling. Currently, we have added three elements to our project, but the visual presentation may need to be more optimal.

In React Native, styling is done using both inline styles and the StyleSheet API. Here's an overview of each along with real-world examples:

Inline Styles

Inline styles in React Native are similar to how you write styles in regular React for the web. Styles are passed as objects directly within the component's props.

Theory

Inline styles allow for a quick and straightforward way to apply styles directly to a component;
Inline styles use JavaScript objects to define styles directly within the component's props;
Each style property is written in camelCase, similar to how it's done in CSS, but without hyphens;
Values can be either strings or numbers, depending on the property.

Example

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

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "lightblue",
      }}
    >
      <Text style={{ fontSize: 24, color: "firebrick" }}>
        Hello, Inline Styles!
      </Text>
    </View>
  );
};

export default App;

Code Description

View Styles:

Line 8: flex: 1: The View component takes up all available space within its container, ensuring it expands to fill the entire screen.

Line 9: justifyContent: "center": Vertically centers the content within the View.

Line 10: alignItems: "center": Horizontally centers the content within the View.

Line 11: backgroundColor: "lightblue": Sets the background color of the View to light blue.

Text Styles:

Line 14: fontSize: 24: Sets the font size of the Text component to 24 units.

Line 14: color: "firebrick": Sets the text color of the Text component to firebrick.

StyleSheet

React Native encourages the use of the StyleSheet API for defining styles, especially for performance optimization.

Theory

The StyleSheet.create method is used to create an optimized style object;
Styles created with StyleSheet.create are processed during build time, resulting in better performance compared to inline styles;
Style properties are defined in the same camelCase format as inline styles;
The resulting object is then referenced in the component.

Example

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, StyleSheet!</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightblue",
  },
  text: {
    fontSize: 24,
    color: "firebrick",
  },
});

Code Description

Line 2: Import StyleSheet from react-native.
Lines 6-7: Apply the class names container and text to the appropriate elements.
Lines 14-25: Create a stylesheet object using the StyleSheet.create method. This object contains style definitions for the container and text styles.
All styles remain the same as in the previous example.

Result after implementing any of the approaches.

In Practice

Everything was clear?

Section 2. Chapter 5

Course Content

Foundations of React Native

Styling

In React Native, styling is done using both inline styles and the StyleSheet API. Here's an overview of each along with real-world examples:

Inline Styles

Inline styles in React Native are similar to how you write styles in regular React for the web. Styles are passed as objects directly within the component's props.

Theory

Inline styles allow for a quick and straightforward way to apply styles directly to a component;
Inline styles use JavaScript objects to define styles directly within the component's props;
Each style property is written in camelCase, similar to how it's done in CSS, but without hyphens;
Values can be either strings or numbers, depending on the property.

Example

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

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "lightblue",
      }}
    >
      <Text style={{ fontSize: 24, color: "firebrick" }}>
        Hello, Inline Styles!
      </Text>
    </View>
  );
};

export default App;

Code Description

View Styles:

Line 8: flex: 1: The View component takes up all available space within its container, ensuring it expands to fill the entire screen.

Line 9: justifyContent: "center": Vertically centers the content within the View.

Line 10: alignItems: "center": Horizontally centers the content within the View.

Line 11: backgroundColor: "lightblue": Sets the background color of the View to light blue.

Text Styles:

Line 14: fontSize: 24: Sets the font size of the Text component to 24 units.

Line 14: color: "firebrick": Sets the text color of the Text component to firebrick.

StyleSheet

React Native encourages the use of the StyleSheet API for defining styles, especially for performance optimization.

Theory

The StyleSheet.create method is used to create an optimized style object;
Styles created with StyleSheet.create are processed during build time, resulting in better performance compared to inline styles;
Style properties are defined in the same camelCase format as inline styles;
The resulting object is then referenced in the component.

Example

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, StyleSheet!</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightblue",
  },
  text: {
    fontSize: 24,
    color: "firebrick",
  },
});

Code Description

Line 2: Import StyleSheet from react-native.
Lines 6-7: Apply the class names container and text to the appropriate elements.
Lines 14-25: Create a stylesheet object using the StyleSheet.create method. This object contains style definitions for the container and text styles.
All styles remain the same as in the previous example.

Result after implementing any of the approaches.

In Practice

Everything was clear?

Section 2. Chapter 5