This is a fast-paced course to get you started building mobile applications for Android and iOS using React Native.

Students should be familiar with ReactJS Programming as covered in our ReactJS Masterclass course. By default the labs and demos are using TypeScript. Though not required, experience with TypeScript can be helpful.

Introduction

• Introduce React Native/s Architecture
• Understand key inner workings
• Discuss Native Modules and View Managers
• Understand implications on threading
• Setting up projects using React Native CLI
• Understand the role of Metro
• Setting up projects using Expo
• Developing Using Emulators/Simulators and real devices
• Debugging expo Applications (including react native debugger)

Core Components

• Understand the relation between React components and native views
• Introduce View components
• Understand styling in React Native (and the differences with CSS)
• Appreciate and use the flex-layout
• Building responsive UIs (Detecting and adapting to dimensions, orientation, device type/model etc)
• Best practices for working with colours and themes (including dark settings)
• Working with safe areas
• Working with Images (sources, resizing, caching, optimisation)
• Adding and styling Text
• Accepting touch gestures using Touchable components
• Introduce the Pressable API
• Using scrollable and list components (e.g, FlatList, SectionList)
• Using list component features (separators, headers/footers, refreshing, infinite scroll, …)
• Use and explore other Core components

Animations

• Understand the core Animated architecture
• Using native animations
• Using animatable components
• Discuss animation best practices
• Understand and configure different types of animations (e.g, timed, spring, ..)
• Use easing functions
• Composing animations
• Appreciate and apply Interpolation and Extrapolation
• Using Events with animations

Gestures

• Discuss various gestures types (e.g, tap, pan, pinch)
• Understand and use React Native Gesture Responder System
• Introduce the react-native-gesture-handler library
• Discuss the different gesture handlers
• Using the PanGestureHandler
• List and use various gesture components (e.g, Swipeable, FlatList, …)

Navigation

• Introduce the react-navigation library
• Discuss and use various navigation techniques (stack, tabs, drawer, ..)
• Using react-navigation with TypeScript
• Nesting navigators
• Configure navigators and screens
• Tune tab navigation layout (icons, headers, buttons, etc)
• Using the Imperative navigation API
• Using Params

Accessing back-end services

• Recap using Axios and Apisauce to access backends
• Authentication and Authorisation (using JWT)
• Offline authentication

Local Storage and caching

• Changing application behaviour based on network status
• Discuss storage techniques
• Using the key-value AsyncStorage
• Accessing the file system to store/cache files
• Downloading/uploading files