Course Code: reactnativebspk
Duration: 14 hours
Prerequisites:
  • Knowledge of Javascript, HTML, and CSS.
  • Basic understanding of Object Oriented Programming (OOP) is useful.

Audience

  • Mobile application developers
Overview:

React Native is an open-source, cross-platform development framework for building mobile apps. Developed by Facebook, it enables developers to create a native look-and-feel experience for their apps on both Android and iOS. Unlike other cross-platform mobile development tools such as PhoneGap, React Native generates fully-native application UIs. No HTML5 UIs. React Native provides a consistent developer experience based on JavaScript and the React (aka React.js or ReactJS) library and enables true rapid mobile development by focusing on developer efficiency across all platforms -- learn once, write anywhere.

In this instructor-led, live training, participants learn the principles and approach behind React Native as they take on the development of their own mobile application for Android and iOS.

Format of the Course

  • Overview of React Native features and capabilities along with step-by-step development of a mobile application.
Course Outline:

Introducing React Native

  • The strengths of React Native
  • Creating components
  • Creating a starter project

Working with Styles

  • Styling using JavaScript
  • Applying and organizing styles
  • Applying styles to View components
  • Applying styles to Text components
  • Platform-specific sizes and styles
  • Adding drop shadows to components
  • Moving and rotating components on the x- and y-axes
  • Scaling and skewing components
  • Using flexbox for layout

Navigation

  • Navigation in React Native vs. the web
  • Navigating using tabs, stacks, and drawers
  • Managing nested navigators
  • Passing data and methods between routes

Animations

  • Using Animated.timing
  • Using interpolation with animated values
  • Creating animations and in parallel
  • Using Animated.stagger
  • Using the native driver to offload animations to the native UI thread

Cross-platform APIs

  • Creating native application alert dialogs
  • Detecting whether the app is in the foreground, background, or inactive
  • Storing and updating text to the device clipboard
  • Using geolocation
  • Detecting device attributes

iOS-specific components and APIs

  • Strategies for effectively targeting platform-specific code
  • Using the picker components, DatePickerIOS, and PickerIOS
  • Showing loading progress using ProgressViewIOS
  • Choosing views using SegmentedControlIOS and TabBarIOS
  • Calling and choosing items in an action sheet using ActionSheetIOS

Android-specific components and APIs

  • Using DrawerLayoutAndroid to create a side menu
  • Creating a native toolbar with ToolbarAndroid
  • Create paging views using ViewPagerAndroid
  • Create date/time pickers using DatePickerAndroid and TimePickerAndroid
  • Creating toasts using ToastAndroid

Using Redux for State Management

  • Redux core concepts
  • Redux with React Native
  • Benefits of using Redux
  • Creating a Redux store
  • How to use Redux actions and reducers to manage global state
  • Reducer composition using combineReducers

Testing Your Application

  • Static type checking with Flow
  • Jest with React Native
  • Snapshot testing

Building a sample app using cross-platform components

  • The basics of fetching data using the Fetch API
  • Using a Modal component to show and hide views
  • Creating a list using the FlatList component
  • Using the ActivityIndicator to show loading state
  • Using React Navigation in a real-world project to handle navigation

Summary and Conclusion