Essential React Native

About

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.

Agenda

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

Note

No React Native knowledge is required. Participants should be familiar with Javascript and ideally, basics of React. We will do a quick introduction to both before we start though.

Trainer

Callstack Developers

Sep 1, 2020

€199

Online

Buy Workshop

Let's talk

conference@callstack.com