Book Image

React Native Blueprints

By : Emilio Rodriguez Martinez
Book Image

React Native Blueprints

By: Emilio Rodriguez Martinez

Overview of this book

Considering the success of the React framework, Facebook recently introduced a new mobile development framework called React Native. With React Native's game-changing approach to hybrid mobile development, you can build native mobile applications that are much more powerful, interactive, and faster by using JavaScript This project-based guide takes you through eight projects to help you gain a sound understanding of the framework and helps you build mobile apps with native user experience. Starting with a simple standalone groceries list app, you will progressively move on to building advanced apps by adding connectivity with external APIs, using native features, such as the camera or microphone, in the mobile device, integrating with state management libraries such as Redux or MobX, or leveraging React Native’s performance by building a full-featured game. This book covers the entire feature set of React Native, starting from the simplest (layout or navigation libraries) to the most advanced (integration with native code) features. By the end of this book, you’ll be able to build professional Android and iOS applications using React Native.

Related Content you might be interested in

Current Title:

Small book image
React Native Blueprints
Emilio Rodriguez Martinez
Nov, 2017 | 346 pages
Small book image
React Native - Building Mobile Apps with JavaScript
Vladimir Novick
Aug, 2017 | 434 pages
Small book image
React Native By Example
Richard Kho
Apr, 2017 | 414 pages
Small book image
Mastering React Native
Eric Masiello | Jacob Friedmann
Jan, 2017 | 496 pages
Table of Contents (15 chapters)
Title Page
Title Page
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Shopping List
Shopping List
Overview
Setting up our project
Setting up the folder structure
Adding a Navigation component
Styling our app with NativeBase
Building the ShoppingList screen
Building the AddProduct screen
Installing and distributing the app
Summary
2
RSS Reader
RSS Reader
Overview
Setting up the folder structure
Managing our state with MobX
Setting up the store
Defining actions
Creating our app's entry point
Building the FeedsList screen
Building the AddFeed screen
Building the FeedDetail screen
Building the EntryDetail screen
Summary
3
Car Booking App
Car Booking App
Overview
Setting up the folder structure
Running the app in the simulator
Creating our app's entry point
LocationSearch
LocationPin
ClassSelection
ConfirmationModal
Summary
4
Image Sharing App
Image Sharing App
Overview
Setting up the folder structure
Redux
ImagesList
Gallery
Header
ActivityIndicator
Camera
MyImages
ImageGrid
Actions
Reducers
API
Summary
5
Guitar Tuner
Guitar Tuner
Overview
Setting up the folder structure
Writing the native module
index.ios.js
Tuner
Strings
Adding an icon
Adding a launch screen
Disabling the landscape mode
Summary
6
Messaging App
Messaging App
Overview
Firebase
Setting up the folder structure
Users store
Chats store
Push notifications using Firebase
Login
Chats
ListItem
Chat
Search
Profile
Summary
7
Game
Game
Overview
Sprites
Setting up the folder structure
GameContainer
Actions
Reducer
The sprites module
Constants
Parrot
RockUp and RockDown
Ground
Score
Start
GameOver
StartAgain
Summary
8
E-Commerce App
E-Commerce App
Overview
Setting up the folder structure
Linting and code formatting
Indexes and main files
Reducers
API
ProductList
ProductDetail
MyCart
Payment
PaymentConfirmation
MyProfile
LoginOrRegister
Register
Sales
Summary

Setting up our project

React Native has a very powerful CLI that we will need to install to get started with our project. To install, just run the following command in your command line (you might need to run this with sudo), if you don't have enough permissions:

npm install -g react-native-cli

Once the installation is finished, we can start using the React Native CLI by typing react-native. To start our project, we will run the following command:

react-native init --version="0.49.3"GroceriesList

This command will create a basic project named GroceriesList with all the dependencies and libraries you need to build the app on iOS and Android. Once the CLI has finished installing all the packages, you should have a folder structure similar to this:

The entry file for our project is index.js. If you want to see your initial app running on a simulator, you can use React Native's CLI again:

react-native run-ios

Or

react-native run-android

Provided you have XCode or Android Studio and Android Simulator installed, you should be able to see a sample screen on your simulator after compilation:

We have everything we need to set up to start implementing our app, but in order to easily debug and see our changes in the simulator, we need to enable two more features: remote JS debugging and live reloading.

For debugging, we will use React Native Debugger, a standalone app, based on the official debugger for React Native, which includes React Inspector and Redux DevTools. It can be downloaded following the instructions on its GitHub repository (https://github.com/jhen0409/react-native-debugger). For this debugger to work properly, we will need to enable Remote JS Debugging from within our app by opening a React Native development menu within the simulator by pressing command + ctrl + Z on iOS or command + M on Android.

If everything goes well, we should see the following menu appear:

   

Now, we will press two buttons: Debug Remote JS and Enable Live Reload. Once we are done with this, we have all our development environment up and ready to start writing React code.

Previous Section
End of Section 3
Next Section