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

Creating a login prompt

The first thing we should do is think about how our app will behave. When it's launched, we should check for an available access token using the FBSDK AccessToken API. If it's not available, then our user isn't logged in and we should show them the Log In button, just like we required a budget in our previous project, Expense.

If/when the user is logged in, we should grab their feed data, load it into the component state, and then log it to the console to show that we have it.

The first thing we should do is modify the App component so that:

  • On the componentWillMount event, we use the AccessToken API's getCurrentAccessToken method to check and see whether the user is logged in.
    • If the user is not logged in, we should alert the user that they are not logged in. In the next section, we will replace this part with the login screen that we will create.
    • If the user is logged in, we should call the getFeed method of graphMethods.
  • Also, it should no longer render the LoginButton...
Previous Section
End of Section 8
Next Section