Module details

Essential React Native

Length: 8 hours

Level: A

Categories: React Native

Description

In this workshop, attendees will learn how to build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React. We’ll guide participants through the framework, ecosystem, syntax, and best practices to build a real-world application.

Book a training
Agenda

a. What is React Native

Introduction to the React Native framework with historical context. We’re going to explain how to build mobile apps for both the Android and iOS platform writing JavaScript code.

b. Set up the project with Expo

We’ll initiate the project using Expo, which provides the easiest way to start building a React Native app without installing neither the XCode nor Android Studio.

c. Core components

Each screen in a React Native app is a composition of rendered components. In this section, we’ll discover framework fundamental building blocks and make some of our own.

d. Styling

Structuring and defining the styles object is a way to customize your components and layout. We will dive into the StyleSheet module and also check the Flexbox algorithm.

e. Using native APIs (StatusBar, Dimensions)

Controlling more native components, such as StatusBar or Alert and handling the differences is possible with React Native. This part is dedicated to investigating those components APIs.

f. Lists (ScrollView, ListView, FlatList, SectionList)

React Native provides us with a couple of components for displaying lists of data. Within that scope, we are going to check the differences between them and choose the most effective one.

g. Navigation (StackNavigator, TabNavigator, Drawer)

Transitioning between screens and managing navigation history can be achieved by using React Navigation, which is currently an official navigation maintained and created by the community.

h. Data persistence

AsyncStorage is React Native’s answer for storing data persistently on a device. This storage system allows you to store data in key-value pairs similar to localStorage, which is well-known from the web.

i. Animations & Gestures

We are going to attain a great user experience. We’ll work on gestures and functional animations to provide a delightful UX to the end users of an app.

j. Ejecting the app and linking the native module

In the last part of this module we’ll go through the process of ejecting Expo from our project and include a library using react-native-link.

Other modules

See more
modules