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

Android modifications

For Android support, we want to do the following things to our code base:

  • Import the react-native-vector-icons library via Gradle
  • Swap out the TabBarIOS component for an Android-based solution using the DrawerLayoutAndroid and ToolbarAndroid components to create a navigation bar that contains a drawer that slides out to toggle between the current and previous months' expenses
  • Replace any NavigatorIOS instances with Navigator
  • Remove ProgressViewIOS
  • Remove the ExpandableCell components in AddExpensesModal and replace DatePickerIOS with DatePickerAndroid
  • Add any Android-specific files to components that require them

Installing the vector icon library

You should not need to do anything extra to have the react-native-vector-icons library installed for Android since React Native link should have taken care of the entire process for you.

However, if you decided to link the library manually for iOS, the readme file for react-native-vector-icons has the latest, up-to-date instructions...

Previous Section
End of Section 8
Next Section