Book Image

React Native By Example

By : Richard Kho
Book Image

React Native By Example

By: Richard Kho

Overview of this book

React Native's ability to build performant mobile applications with JavaScript has resulted in its popularity amongst developers. Developers now have the luxury to create incredible mobile experiences that look and feel native to their platforms with the comfort of a well-known language and the popular React.js library. This book will show you how to build your own native mobile applications for the iOS and Android platforms while leveraging the finesse and simplicity of JavaScript and React. Throughout the book you will build three projects, each of increasing complexity. You will also link up with the third-party Facebook SDK, convert an app to support the Redux architecture, and learn the process involved in making your apps available for sale on the iOS App Store and Google Play. At the end of this book, you will have learned and implemented a wide breadth of core APIs and components found in the React Native framework that are necessary in creating great mobile experiences.

Related Content you might be interested in

Current Title:

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
Small book image
Getting Started with React Native
Ethan Holmes | Tom Bray
Dec, 2015 | 172 pages
Small book image
React Native - Building Mobile Apps with JavaScript
Vladimir Novick
Aug, 2017 | 434 pages
Table of Contents (17 chapters)
Title Page
Title Page
Credits
Credits
Foreword
Foreword
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
First Project - Creating a Basic To-Do List App
First Project - Creating a Basic To-Do List App
Initializing a new project
Feature planning
Project architecture
StyleSheet
Flexbox
Writing in ES6
Building the app
ListView
Creating the TasksList component
Linking TasksList to index
The iOS Simulator Developer menu
TextInput
AsyncStorage
Custom RenderRow component
Prop validation in React
Moving beyond MVP
Summary
2
Advanced Functionality and Styling the To-Do List App
Advanced Functionality and Styling the To-Do List App
Navigator and NavigatorIOS
Using DatePickerIOS
Using onLayout
Button
Switch
Save button
TasksListCell modifications
Navigator
Platform
DatePickerAndroid and TimePickerAndroid
Saving updates
BackAndroid
Summary
3
Our Second Project - The Budgeting App
Our Second Project - The Budgeting App
Getting started
Folder structure
The EnterBudget component
The AddExpenses container and modal
Displaying the current month's expenses
Summary
4
Advanced Functionality with the Expenses App
Advanced Functionality with the Expenses App
Using vector icons
Picker
Updating App.js with ProgressViewIOS
A view for prior months' expenses
The previous month's expenses
Implementing TabBarIOS
Deleting expenses
Summary
5
Third Project - The Facebook Client
Third Project - The Facebook Client
Planning the app
About the Facebook API
Obtaining Facebook API credentials
Installing the Facebook SDK on iOS and Android
Logging in with the Facebook SDK
Using the Facebook Graph API
Creating a login prompt
Optimizing for the API
Using ActivityIndicator
Creating a standard ListView
Summary
6
Advanced Facebook App Functionality
Advanced Facebook App Functionality
Creating a PostView
Reloading data with RefreshControl
Rendering images
Rendering links with WebView
Signing out with TabBarIOS
Porting to Android
Summary
7
Redux
Redux
Introducing Redux
Planning the Redux conversion
Creating the entry point
Converting EditTasks to Redux
Summary
8
Deploying Your Applications
Deploying Your Applications
Basic requirements
Creating developer memberships
Making your app look great
Summary
9
Additional React Native Components
Additional React Native Components
Setting up a boilerplate project
Making Fetch happen
Vibration
Using ActionSheetIOS
Grabbing user geolocation data
Expenses for Android
Android modifications
Summary

Getting started

Like always, let's begin by initializing a new React Native project using the following statement in our command line:

react-native init Expenses

While the React Native CLI is doing its work in scaffolding our project, we should plan out the functionality of the app.

App planning

Once this app is complete, we would like for it to function in the following ways:

  • Upon launching the app, if a budget for the month has not yet been set, it should ask the user to input their monthly goal and save it in AsyncStorage.
  • Once a budget for the month has been set, the user should be shown a screen that contains a button to add their expenses for the month.
  • Upon tapping on that button, the user should be shown a modal that allows them to input details for their expenses: the name, amount, date the purchase was made on, and an icon to categorize the item. The modal should allow the user to either cancel or save the entry that they make.
  • If the expense is saved, it should then be rendered in a list...
Previous Section
End of Section 2
Next Section