React Native Recipes - Volume 1
4.0 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
96 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React Native Recipes - Volume 1 to your Wishlist.

Add to Wishlist

React Native Recipes - Volume 1

Take your React Native application development to the next level by building rich UI's and bring life to application.
4.0 (11 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
96 students enrolled
Created by Packt Publishing
Last updated 5/2017
Current price: $12 Original price: $125 Discount: 90% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Understand common components within the library
  • Build simple and complex UIs using React Native
  • Learn to use Flexbox
  • Create advanced animations for UI components
  • Create Facebook reaction widgets
  • Build universal apps that run on phones and tablets
  • Learn to fix Redux into your application
View Curriculum
  • Existing knowledge of JavaScript ES2015 is highly recommended.

React has taken the web development world by storm, and it is only natural that its unique architecture and third-party support ecosystem should be applied to native application development. Using JavaScript, you can build a truly native application that renders native UI components and accesses native device functionality. This video will take you from the basics of React Native development all the way through to some more advanced components.

This video covers React Native topics ranging from adding basic UI components to successfully implementing Redux. The video follows a top-down approach, beginning with building rich user interfaces. These UIs will be created with both built-in and custom components. You will then animate UIs to make the application feel more alive. Then you will learn to store data in a native database and integrate it with the Facebook SDK. Finally, you will learn to make Redux fit into your application.

About the Authors

Crysfel Villa is a senior software engineer at Modus Create. He's a passionate JavaScript coder and an accomplished software developer with over 10 years' experience in technical training, consulting, and systems analysis. Crysfel loves to write about emerging technologies and he has deployed several apps to the Apple Store using React Native. He currently lives in NY and can be found attending tech meetups throughout the city.

Stan Bershadskiy is an architect at Modus Create and holds a Master's in Computer Science from NYIT. While doing full-stack development, he found working on the frontend most enjoyable because of the speed with which one can develop and switch focus towards JavaScript. Stan likes to involve himself in anything JavaScript-related, particularly around building rich applications for the desktop, web, and mobile. He is located in New York City and can be found co-organizing NYC.JS meetups. More recently, he has focused on promoting React Native by presenting at conferences and publishing blog posts.

Who is the target audience?
  • This book is for web developers who are familiar with React.js and know the basics of UI development. You may or may not have used React Native before, but it's ideal for you if you want to develop native applications for iOS and Android.
Compare to Other React Native Courses
Curriculum For This Course
44 Lectures
Getting Started
8 Lectures 41:19

This video provides an overview of the entire course.

Preview 03:29

In this recipe, we will see how to use containers and text, but most importantly we will see how styles work in React Native.

Adding Styles to Text and Containers

In this recipe, we will use images to create a video player.

Using Images to Mimic a Video Player

In this recipe, we will create a toggle button, which by default is going to be unselected. When the user taps on it, we will change the styles of the button to make it look selected.

Creating the Toggle Button

For this recipe, we are going to display several items in a list component.

Displaying a List of Items

Tabs are a very common component, especially in iOS apps, so in this recipe you will learn how to use the tabs component on iOS devices only.

Adding Tabs to Viewport

In this recipe, we will focus on the properties of flexbox to create a profile page.

Using Flexbox to Create a Profile Page

One of the most popular features in React Native is the navigator. This component allows us to add or remove views easily.

Setting Up a Navigator
Implementing Complex User Interfaces
10 Lectures 56:32

In this video, we will create a button component, and we will define several properties to change it's look and feel.

Preview 06:40

In this video, we will create a layout to display a list of blog posts. Each post will be a small card with an image, an excerpt, and a button to read more. We will use flexbox to arrange the posts.

Building a Complex Layout for Tablets Using Flexbox

In this video, we will import a few fonts in Xcode and then we will display a text using different font families. We will also use different styles of a single font, such as bold and italic.

Including Custom Fonts on iOS

In this video, first copy the fonts files, then refresh the app, and finally, fix the issue regarding font weight by using workaround. 

Including Custom Fonts on Android

For this video, we will use a third-party library to help us render the icons. You will also learn how to install other libraries using npm.

Using Font Icons

For this video, we will show a list of contacts and explore to load remote data from a REST API.

Dealing With Universal Apps

In this video, we will render a menu based on the screen orientation. In landscape, we will render an expanded menu with icons and texts, and in portrait we will only render the icons.

Detecting Orientation Changes

In this video, we will see how to open WebView by clicking on a button in our app and dynamically setting the URL value.

Using WebView to Open External Websites

In this video, we will render text in the HTML format using native components. To achieve this, we will use a third-party library called react-native-htmlview.

Rendering Simple HTML Elements Using Native Components

In this video, we will first collect data using different keyboards and show an alert message with the resulting information.

Creating Form Component
Animating User Interface
8 Lectures 53:19

In this video, we will use an image to create a simple linear movement from the right to the left of the screen.

Preview 07:40

In this video, you will learn how to use the same animation values in several elements.

Running Several Animations at the Same Time

In this video, we will create a notification component from scratch.       

Animating Notifications

In this video, we will create a custom container with a title and content. On clicking on the title, the content will collapse or expand. We will explore the layout animation API.

Expanding and Collapsing Containers

In this video, we will continue working with the LayoutAnimation class.

Loading Animation

In this video, you will learn how to drag elements from a ListView to remove them. We will use the PanResponder to handle the drag events.

Removing Items from List Components

In this video, we will create a component similar to the Facebook's reaction widget. We will have a like button image, which whenclicked on will show four icons with a slide-in animation and opacity from 0 to 1.

Creating a Facebook Reaction Widget

In this video, we will create a timeline of images, then we will
allow the user to press any of the images to display it with a black
background and the image in the center of the screen.

Displaying Images in Full Screen
Working with Application Logic and Data
10 Lectures 40:58

In this video, you will be learning about simple and basic strategies to save and retrieve data locally from the device.

Preview 05:22

In this video, you will be learning to request data from an API.

Retrieving Data from a Remote API

In this video, you will be learning to POST data to the same endpoint to add new bookmarks.

Sending Data to a Remote API

In this video, we will be integrating WebSockets in a React Native application.

Establishing Real-Time Communications with Websockets

In this video, we will walk through using Realm in React Native.

Integrating Persistent Database Functionality with Realm

In this video, we will be creating an app that shows an alert message when a network connection is lost.

Masking the Application Upon Network Connection Loss

In this video, we will be showing a simple implementation of using the NetInfo module to control whether or not our application will make an API call.

Synchronizing Locally Persisted Data with a Remote API

In this video, we will cover the first two bits of functionality–logging in and getting basic user information from a Facebook account.

Logging in with Facebook

In this video, we will use the Facebook SDK for React Native to share some content using our application.       

Sharing Content on Facebook

In this video, we will hook our sample application into Facebook Analytics and begin firing launch events, as well as a few custom events when we share information. 

Tracking Application Events with Facebook Analytics
Implementing Redux
8 Lectures 33:01

In this video, we will be installing Redux in an empty application, and then define the main folder structure of our bookmarks application.

Preview 04:26

In this video, we will be creating the actions to load the initial bookmarks.

Defining Actions

In this video, we will introduce a reducer to set the bookmarks, from the actions defined on the previous video, to the global state.

Defining Reducers

In this video, we will be bringing together the actions and the reducer that we created earlier.

Setting Up the Store

In this video, we will create a middleware to fetch data from an API.

Communicating with a Remote API

In this video, we will be enabling components to access the store that we have defined, then we will be rendering the categories on a list.

Connecting the Store with the Views

In this video, we will be first using the redux-persist library and then we will be applying the middleware and finally persist the store and set the AsyncStorage.

Storing Offline Content Using Redux

In this video, we will be learning how to use Redux to keep the state of the network status. When we lose network connectivity, we will display an alert message to inform the user that there's no network available.

Showing Network Connectivity Status
About the Instructor
Packt Publishing
3.9 Average rating
8,274 Reviews
59,271 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.