Learn React Native Tips, Tricks & Troubleshooting Techniques

Name: Learn React Native Tips, Tricks & Troubleshooting Techniques
Rating: 4.5 (4 reviews)

Get started with React Native development for iOS and Android & troubleshoot using tips, tricks & techniques.

Created byPackt Publishing

Last updated 6/2019

English

What you'll learn

Build cross-platform native iOS and Android application development with React Native.
Work with HTTP requests and local storage with React Native.
Separation of concerns and useful techniques about it.
Tips for styling, using colors, fonts, metrics, and upgrading React Native version.
Overcome the most common bugs and pitfalls that plague React Native developers today.
Effectively evaluate the tradeoffs of using pure JavaScript libraries versus a native solution in building performant apps.
Implement build versions for test releases.
Set up error monitoring/reporting for your production application.

Course content

3 sections • 71 lectures • 7h 19m total length

The Course Overview3:38
This video will give you an overview about the course.
Setup Development Environment6:15
The aim of this video is to configure a local environment for React Native development.
• Install and configure packages for development
• Set up firebase as a data source
• Begin developing application
Introduction to the React Native Ecosystem5:33
The aim of this video is to introduce different libraries that will be utilized for application development in the React Native ecosystem.
• Familiarize audience with React Native ecosystem
• Explain the benefit of libraries to expedite development
• Explain the usage of libraries
Set Up Firebase Account3:10
This video introduces Firebase and explains the benefits for React Native development.
• Setup Firebase account
• Explain Firebase console
• Review Firebase package for React Native
Set Up a Database in Firebase2:37
The aim of this video is to setup datasource for app development.
• Explain use of database for application being developed
• Create sample data structure for database
• Walk user through setting up a sample database
Hello React Native Project3:34
In this video, you will learn to setup React Native project.
• Install react-native-cli for project setup
• Examine application structure
• Run Code and make modification
Show RN Tester Project Review4:29
The aim of this video is to showcase React Natives built in components and APIS, and to utilize this sample project as a reference for learning.
• Install and configure RNtester locally
• Review components and APIs
• Review example code in RNtester project
Creating User Inputs3:50
Applications need to be able to collect data and interface with a user. In this module, users will be introduced to inputs in react native.
• Utilize React Native API for user interaction
• Modify code to present user input
• Test data input with alert component
Introduction to FlatList7:18
Due to small screens, there is an issue when presenting sets of data. React Native provides a solution with FlatList - a component that presents an efficient scrolling list of data.
• Review the FlatList component API
• Implement the FlatList component
• Experiment with FlatList component API
Handling Touches5:12
Touch is a key aspect of mobile applications, and it’s imperative to research the options, and know when to utilize specific components
• Review the different touchable options in react native
• Determine when to use specific touchable components
React Native Platforms5:41
React Native will bridge our code into each platform iOS and Android. The aim of this video is to confront those issues and discuss how to handle them.
• Review platform, and dimension component in detail
• Run sample code in android emulator and compare
• Make modifications to highlight dimensions, and platform packages
Introduction to Flexbox6:20
The aim of this video is to introduce Flexbox within react native.
• Cover basics of Flexbox
• Review Flexbox container properties
• Experiment with basic Flexbox properties
Flexbox Deep Dive5:42
Now that the foundation for Flexbox has been established, the aim of this video is to explore the layout props that Flexbox provides.
• Introduce key layout props for Flexbox
• Create layout the utilizes several layout props
• Examine layout across multiple devices
Overview of NativeBase7:02
To enhance the development experience, we will install NativeBase and implement it into our test code to save time when it comes to styling.
• Review the NativeBase API
• Implement several NativeBase components
• Examine NativeBase components across multiple devices
Easy Grid of NativeBase2:35
Manipulating layout is a key with limited real estate when it comes to a mobile application. The aim of this video is to simplify this issue with react-native-easy-grid.
• Introduce the react-native-easy-grid package within NativeBase
• Compare use of react-native-easy-grid to Flexbox
• Utilize react-native-easy-grid to create a layout
Custom Theme with NativeBase3:15
NativeBase has a lot to offer, but the generic components may not be the best fit for your application. In this video, we will see how NativeBase Themes can take your application to the next level.
• Review NativeBase Theme generation
• Create a NativeBase theme
• Implement and examine the custom NativeBase theme
Creating Reusable Components5:19
The aim of this video is to leverage React-Native to create components that can be reused.
• Understanding Props Vs State
• Set up the component directory for application
• Create a simple reusable component
Displaying and Resizing an Image4:34
The goal of this video is to build a foundation for managing assets and utilizing them within your apps.
• Review Image component in detail
• Making Images responsive
• Using Image as a background
Setting Up a Form8:32
Collecting data in a UI friendly way is imperative for mobile applications. The aim of this video is to setup a form and explore options for controls.
• Create a basic form using the Nativebase form structure
• Implement and configure several controls for data input
• Utilize state to store and manipulate data
Adding Form Validation6:16
When collecting data, we need to ensure the proper data is input. The aim of this video is to add validation to a form.
• Add simple validation to a form
• Discuss form validation libraries
• Store data in async storage
Composing Screens from Reusable Components2:28
A major benefit of react-native is its capability of code sharing. In this video, we will compose a screen with all the elements we’ve discussed.
• Set up an external style sheet
• Refactor to use in file component
• Refactor the screen to use reusable components
Understanding React Navigation2:19
The aim of this section is to gain a better understanding of the react native navigation.
• Discuss what React navigation is
• Tradeoffs of React navigation
• Introduce the different navigator types
Stack Navigator6:50
The goal of this video is to take a deeper look at a stack navigator and implement it. We will also discuss when to use it.
• Introduce Stack navigator
• Implement a Stack navigator
• Discuss when to use Stack navigator
Navigation Practices4:55
Once a Navigator has been established, that presents a new level of configuration. In this section, we will discuss how to handle this.
• Navigate to a screen
• How to pass the data between screens?
• How to navigate back to a screen?
Tab Navigator5:44
React Navigation allows the use of the tab navigator. In this section, we will add it to our app and discuss when to use it.
• Introduce Tab navigator
• Implement a tab navigator
• Discuss when to use the tab navigator
Drawer Navigator4:12
The Drawer Navigator is a clean way to embed navigation within the UI. In this section, we will add it to our app and discuss when to use it.
• Introduce Drawer navigator
• Implement a Drawer navigator
• Discuss when to use Drawer navigator
Configure Firebase3:55
The aim of this section is configuring our app to connect it to firebase as the applications backend.
• Navigate firebase console to get apps configuration
• Discuss the firestore
• Set up the app configuration to connect to Firebase
Creating Data in Firebase4:52
The goal of this video is to create a firebase service that our app will utilize to create data in Firebase.
• Setup services in application
• Discuss add method of Firebase SDK
• Modify code to create data in Firebase
Reading Data in Firebase4:48
The goal of this video is to create a service in the application to read data from Firebase.
• Discuss documents and collections
• Discuss get method of Firebase SDK
• Modify code to read data from Firebase
Updating Data in Firebase6:48
The goal of this video is to create a service that can update parts of our data.
• Discuss update method in Firebase SDK
• Set up the update screen
• Modify the code to update data in Firebase
Deleting Data from Firebase4:07
The goal of this video is to be able to remove data from Firebase.
• Discuss delete method in Firebase SDK
• Discuss other options for removing data
• Modify code to delete data from Firebase
Deploy Applications8:50
The aim of this section is to discuss the steps that need to be taken to deploy applications to their perspective stores.
• Setup app an icon
• Set up the splash screen
• Explain other required information for each store
Build APK for Android Deployment5:15
The objective of this video is to build an apk for an Android release.
• Discuss what an APK is
• Utilize React Native documentation to build APK
• Discuss Google play store
iOS Deployment4:53
The objective of this video is creating the certificate and provision files to deploy to the iOS app store.
• Discuss what the certificate and provision files are
• Utilize XCode to create the certificate and provision file
• Discuss App store Connect
Test your knowledge

Course Overview1:57
This video will introduce the viewer to the course.
What Is a 'Smart' and 'Dumb' Component?4:11
The aim of this video is to make the viewers understand the difference between the ‘Smart’ and ‘Dumb’ components
Understand 'Dumb' component with examples.
Understand 'Smart’ component with examples.
Understand the difference between the ‘Smart’ and ‘Dumb’ components
Practical Usage of 'Smart'/'Dumb' Component13:35
This video will show the viewer the different parts of an MVC project.
Explore `InputButton` and `Calculator` components.
Explore `InputField` and `RegisterForm` components.
Understand the separation of ‘Smart’ and ‘Dumb’ components
When to Use a Class, a Pure or a Functional Component?11:43
The aim of this video is to explain what a regular and a pure component is? What a class and a function component is? How do they correlate?
Understand the difference between Regular-Pure/Memo and Class-Functional.
Understand when to use Class and Functional components.
Understand when to use Pure/Memo components.
Introduction to Higher Order Components (HOC)10:15
The aim of this video it to explain what a HOC is, when to use HOCs and how to write one.
Understand Higher Order Component
Understand what HOCs should do and what they can do
Write a HOC
Practical Usage of Higher Order Components16:33
This video will show a couple of different HOCs, applying what we saw in the previous video, and show common usages.
Explore HOC for long press zooming on a button
Explore HOC for outlining different kinds of components
Explore the common ways to use HOC
Introduction to Render Props7:33
This video will explain what render props are and why they are special.
Understand Render Props
FlatList example of render props.
Screen example of render props.
When to Use HOCs and Render Props?2:51
The aim of this video is to provide some information about what the differences of HOCs and render props are, and explain when to use each
Understand when to use HOCs and why
Explain when to use render props and why
Look at the recap of comparison.
Practical Usage of Redux (Separation of Concerns)16:52
This video will introduce and explain Redux to the viewer. It shows how to separate the logic from the UI, and why.
Explore and understand Redux
Introduce the “duck” structure and setup Redux.
Test and use Redux.
Debugging with react-native-debugger6:57
This video shows the capabilities of the react-native-debugger, and explains why it is superior to the normal remote debugger.
Introduce react-native-debugger.
Set up the debugger in our project.
Add Redux support for the debugger.
Debugging and Logging with Reactotron7:50
The aim of this video is to make the viewers familiar with Reactotron and its features.
Explore Reactotron and understand why it’s a great tool.
Set up Reactotron in our project.
Add Redux support for Reactotron.
Storybook for Quick and Easy UI Development13:53
The video will show storybook and the reasons it’s a great way to quickly create new UI.
Understand what storybook does for our application.
Set up storybook and create stories for our buttons.
Add knobs and more examples or stories.
Own Logger for Debugging and Analytics11:47
The aim of this video is to teach the viewer how to create their own logger, explain why it’s a very useful tool and how to wrap other libraries.
Understand why an own logger is needed.
Show some examples and set up the logger.
Use our logger and modify it to suite our needs.
Why and How to Use Unified Resources?2:03
The aim of this video it to explain what the unified resources are, why use them, and how to set them up
Understand Unified Resources
Understand what constitutes a Unified Resources
Explore the uses of Unified Resources
Metrics5:49
This video will show what can be added to the Metrics Unified Resources, how to set them up and use them
Setup Unified Resources specifically for metrics
Create some Metrics
Use Metrics in our existing code
Colors6:34
This video will show the viewer the usefulness of colors in Unified Resources
Setup Colors in Unified Resources
Create some Colors
Use Colors in our Components
Fonts6:09
The aim of this video is to explain how to use unified resources with regards to fonts
Setup fonts Unified Resources with size, and use it
Add secondary font and use it
Add primary font and use it
Styles4:46
The video will show how to extract common component styles into a Unified Resources
Setup styles unified resource
Create some styles
Use styles in one of our components.
Useful Scripts for Faster Development10:31
This video will show a list of very useful scripts and shortcuts to make development faster.
Explore Scripts for the packager
Explore More yarn Scripts.
Understand Scripts for preparing, building and finalizing.
You Never Need to Import from `..` Anymore7:44
The aim of this video is to teach the viewer how to import without the need of `..` for an easier developer experience.
Add babel-plugin-module-resolver and setup.
Use form import Component from ‘components/Component’.
Setup and use form import {Component} from ‘components’.
Using rn-diff-purge to Upgrade React Native Version17:47
This video will demonstrate upgrading our project to 0.58.0 using rn-diff-purge, after explaining the options and why purge is the best one.
Introduce the upgrading options and compare them.
Explain how rn-diff-purge works.
Perform upgrade to 0.58.0 on our project.
Feature Toggles9:49
The aim of this video is to explain how to use Feature Toggles for easier developing in a bigger team and for gradual deployment of features.
Setup Feature Toggles.
Create some Feature Toggles.
Use them in our code.
nvm and .config8:07
The video will show the tool nvm to the viewer, as well as explain the use of a .config directory.
Introduce nvm and set it up.
Use nvm in our project.
Setup a .config directory for future use.
Test your knowledge

The Course Overview1:48
This video will give you an overview about the course.
Setting Up Your Development Environment4:41
In this video, you will become familiar with the React native environment setup, npm installation, and Node installation.
Learn environment setup with OS
Understand installation for setup
Install Node.js, npm, React native CLI, and so on
Configuring a Linter1:41
In this video, you will learn how to setup Visual Studio code and add eslint into that (also you can use atom, sublime, and so on).
Setup up code editor
Setup code editor and add some static type checker like eslint
Write code and print “hello world!”
Common Pitfalls4:04
In this video, you shall learn the common memory leaks, mounting error, and so on.
Understand the general problems
Learn the solutions for memory leaks and mounting error
Understand the example with explanation
Common Issues and How to Fix Them6:52
In this video, you will learn how to solve missing gradle plugin, dependencies, and mounting error.
Learn how to install a library in the project
Understand how to solve the mounting error
Debugging Network Requests5:28
In this video, you will learn how to use axios library and how to debug network request on browser.
Install axios
Run and debug the example
Choosing the Right Navigation Solution2:21
In this video, you will learn how to choose the right navigation solution.
Understand what React Navigation is
Installing React Navigation
Understand the example
Solving Complex Navigation Patterns with Redux and React Navigation4:25
In this video, you will learn how to use Redux and React Navigation.
Understand what Redux is
Understand the example
Common Issues Installing1:01
In this video, you will learn how to link native modules.
Learn about State and Props
An Introduction to the React Native Dev Tools/Dev Menu4:19
In this video, you will learn how the React Native Dev Tools/Dev Menu work.
Learn new keyboard shortcuts
Understand how the different kind of options work
React Performance Considerations That Will Speed Up Your App5:28
In this video, you will learn how to reduce image size, how to avoid inline CSS, and how to use react pure component and native dependency optimization.
Understand the use of react-native-cached-image library
Learn inline CSS, unused parameters, and variables
Learn how to use react pure component and native dependency optimization
How to Handle Complex Operations in JavaScript, Lists, Network Requests?4:00
In this video, you will learn about list operation and axios library API calls.
Understand how FlatList and map function works
Understand how axios works
Catching Errors in Production10:32
In this video, you will learn how to handle errors using Exceptional Handling.
Learn about exception handling in react native
Understand production bugs using Firebase Crashlytics
Learn about production bugs using Firebase Crashlytics for android and iOS
CodePush to Rush Out Critical Bug Fixes6:41
In this video, you will learn how to use CodePush library, to update your application when in production.
Understand what CodePush is
Learn about the usage of CodePush

Requirements

JavaScript programming knowledge is assumed.

Description

React Native is a cross-platform application development framework built by engineers at Facebook which will help you to get out of the pain of maintaining a Swift and Java code base by learning once and applying it anywhere. Also, it bridges the gap between JS, Android, and iOS.

With this hands-on course, you will begin with building React components for mobile devices where you’ll learn to configure Firebase to store your data while coding your applications & and see the changes you’ve made without re-compiling your application again and again. Moving further, you will gain tips about reusable logic with Higher Order Components, tips for better upgrading, tips on styling and separation of concerns. Then you’ll learn to overcome the most common bugs and pitfalls that plague React Native developers, solving complex navigation patterns with redux as well as troubleshooting complex operations in JavaScript while keeping your app UI running smoothly.

Contents and Overview

This training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, React Native in 7 Steps you’ll be able to create visually stunning and high-performing applications. This course will get you started with React Native quickly by building React components for mobile devices. You’ll learn to configure Firebase to store your data while coding your applications. You’ll be able hot-reload applications and see the changes you’ve made without re-compiling your application again and again. By the end of this course, you’ll be able to develop highly functional iOS and Android applications on your own and deploy them to both the App Store and the Play Store.

The second course, React Native: Tips, Tricks, and Techniques help to provide you with valuable tips and tricks to help make your development process easier, and less tedious. You will find tips about reusable logic with Higher Order Components, tips for better upgrading, tips on styling and separation of concerns. You will be getting some useful & cool tips on using tools for faster React Native development, such as reactotron, react-native-debugger and making your own logger for debugging and analytics. Finally, some tips and useful scripts you can use, and a nice way to use feature flags for your application. By the end of this course, you would have added useful skills to your arsenal, a plethora of valuable tips and tricks to make your development process with React Native more effective and efficient.

The third course, Troubleshooting and Supercharging React Native you’ll learn how to find memory leaks and cease unwanted applications in the background. You’ll reduce the CPU usage of your application. You’ll optimize APIs and third-party libraries to minimize the size of your application. Most developers complain about performance issues while implementing navigation components, so you’ll learn how to solve them once and for all. Finally, you’ll minimize your application's launch time and improve its overall performance.

At the end of the course, you’ll supercharge your productivity in React Native, by spending less time debugging and more time coding.

About the Authors:

Christopher Reyes is a software engineer in Southern California with a Bachelor of Science in Computer Information Systems with a specialization in software development. He has multiple years of experience working across multiple technologies including proprietary programming languages, and full stack JavaScript. He has experience on the back end with Node.js developing Restful APIS with typescript, and exposing data through GraphQL and Apollo while utilizing React on the front end. Chris has utilized to React Native to develop versatile mobile applications that can be utilized across multiple devices and platforms. Chris has mostly worked in the financial sector and has also freelanced for a telematics company. Chris is passionate about test-driven development and writing clean code.
Pavlos Vinieratos is an experienced iOS and macOS Developer using React Native, Swift, Objective-C. Enjoys using Clojure and Ruby. He enjoys working with React Native and works with it on a regular basis. As an experienced React Native developer, Pavlos Vinieratos brings hands-on working experience to this course that helps viewers to get effective and practical guidance from a developers point of view.
Atul Sandilya Tiwari is a software developer. He has 5 years of experience building mobile applications for companies ranging from startups to fortune 500 companies. He has been working in both React native and Android since the early days of their releases.

Who this course is for:

This course is for app developers looking to make native iOS and Android apps with React Native, mobile developers, JavaScript developers who have been building native mobile applications with React Native and want to spend less time debugging and more time coding will find this course useful.

Learn React Native Tips, Tricks & Troubleshooting Techniques

What you'll learn

Explore related topics

Course content

React Native in 7 Steps34 lectures • 2hr 51min

React Native: Tips, Tricks, and Techniques23 lectures • 3hr 25min

Troubleshooting and Supercharging React Native14 lectures • 1hr 3min

Requirements

Description

Who this course is for: