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

Save button

In this section, we will create a button in the upper-right corner of the navigation bar that is labeled as Save. When it is tapped on, the following two things must happen:

  • The changes the user made to the to-do item (such as its name, completion status, and due date) must be saved to AsyncStorage, overwriting its previous details
  • The TasksList must be updated so that the user visually sees the changes they made right away

Rendering the Save button is easy with React Native. The object that gets pushed to NavigatorIOS needs to receive the following two key/value pairs:

  • rightButtonTitle: This is a string that renders the text shown in that area
  • onRightButtonPress: This is a callback that is fired when that button is pressed

At face value, this looks simple. However, we can't pass any information to the onRightButtonPress method of NavigatorIOS from a rendered child. Instead, we have to keep a copy of the changes we make inside our TasksList component as well, and update them as the...

Previous Section
End of Section 7
Next Section