Build iOS Apps with React Native

Leverage your existing web development skills to easily build slick native iOS apps.
Course info
Rating
(255)
Level
Intermediate
Updated
Jun 18, 2015
Duration
1h 59m
Table of contents
Introduction
Prep Your Environment for React Native
Create a Login View
Make the Login View Functional
Working with Tabs
Building a Feed with the ListView Component
Building a Detail View with the Navigator Component
Building the Search Component
Calling Objective-C Code from React Native Code
Description
Course info
Rating
(255)
Level
Intermediate
Updated
Jun 18, 2015
Duration
1h 59m
Description

Do you have experience in web development and would like to gain valuable experience in mobile development? React Native enables you to leverage your existing skills to build slick native iOS apps. React is extremely popular, has great community support, and now, through React Native, supports building iOS apps that are indistinguishable from apps built with Objective-C or Swift.

About the author
About the author

In his day job Hendrik is a full stack coder from Cape Town. For a large part of his career he worked with .NET, but the last few years he spent most of his time with JavaScript.

More from the author
React Native: Getting Started
Beginner
1h 49m
Jun 20, 2018
Using Redux to Manage State in Angular
Intermediate
1h 21m
Mar 20, 2017
More courses by Hendrik Swanepoel
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hi, I'm Hendrik Swanepoel and welcome to this course on React Native. This course will get you up and running with building iOS apps with Reactive Native in a very short time. This course is a good fit for web developers who'd like to leverage their existing skills to do native mobile app development. What do I mean by native mobile app development? Well have you ever tried building an HTML app and try to make it look like other mobile apps and feel like other mobile apps? A lot of web developers have tried that and the results are usually very disappointing. You just can't beat that native performance and feel. When we talk about native apps, we mean it was developed with a great tool site for the platform meaning Objective-C or Swift for iOS and Java for Android. React Native enables you to use a familiar web workflow and a familiar tool set, but with an outcome that is virtually indistinguishable from an app that was developed through Objective-C. React Native is going to be huge and this course will introduce you to it and how Bootstrap your career as a native mobile developer. It's workflow is fast. Its documentation is solid and it's got a great community behind it and come on. It's backed by Facebook who's a company I would wager as a pretty decent mobile user base. Even if you aren't a web developer, but you're still interested in developing iOS apps going this route will be much easier to get started with than learning Objective-C or Swift and when Facebook introduces support for Android using React Native a whole other platform will open up for your fingertips.

Make the Login View Functional
In this module, we're getting serious with React Native. In the last module we focused on laying out the login screen, which was surprisingly easy. In this one, we'll hook it up with some behavior and make it talk to the GitHub API with the help of the module we'll install with NPM. We won't stop there though. I'm also going to show you how to transition to a different view on successful authentication, as well as how to store the authentication details to keep the user logged in.

Building a Detail View with the Navigator Component
In this module we expand on the feed we built in the previous module and add the ability to view the details of the push event on a different view when the user touches on a push events row. This is a very common thing to do in mobile apps due to the limit in screen real estate. To do this we're going to go over wrapping each row in a TouchableHighlight and hooking into the onPress event. I'll introduce you to the navigatorIOS component which allows you to transition to a different view with the ability to go back to the ListView. The feed ListView needs to pass the selected item to the detail view and I'll show you how to use props to do this.

Building the Search Component
In this module we'll flesh out the search tab with a component that allows you to enter a search query and start a search. When the user presses on the Search button, we'll transition to the search results component. This component talks to the GitHub API and binds to the results showing a progress indicator while it's waiting for the search results to come back. To do all this we're not going to do anything new but draw the utilized end knowledge from earlier modules to quickly bold out this part of the app. First of all, we'll define a new component that contains the search form. Then we'll show the search form within a NavigatorIOS component. We need to show the user the results of the search and for this, we create a new component. We'll handle the search button press on the search component and transition to the search results component. The search results component will kick off a call to GitHub after which we get to bind to the results. We want the results to look good so we end off by doing some styling on the rows.

Calling Objective-C Code from React Native Code
React Native provides us with a great workflow and opens up native mobile development to a larger audience. In the future, we'll even be able to use it for Android development. I personally can't wait. But does this mean that we won't need to learn any native development skills in order to develop native mobile apps? Often when I talk to native mobile developers about React Native, they are very skeptical about it. We've seen so many frameworks like this being held as the silver bullet, the one technology you'll need to know to talk at all mobile platforms and this invariably results in disappointment. As a colleague of mine said, using frameworks like these usually makes the most common stuff accessible and easy. But you're set back by far as soon as you want to do something different that isn't supported by the framework and I totally agree with him and that's what this module is all about. I see it as a core strength of React that it allows you to bridge quite easily between React. js code and Native Objective-C code. This allows you to use your React. js where possible and drop into Objective-C for the rest. In this module, we're going to expose custom Objective-C code to our React. js code. We're going to do something simple though. This will make it easier for you to see the different steps involved in this JS to Objective-C bridging process.