Advanced Facebook App Functionality | React Native By Example

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

React Native By Example

By : Richard Kho

3.7 (3)

React Native By Example

3.7 (3)

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

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

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

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

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

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

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

Redux

Redux

Introducing Redux

Planning the Redux conversion

Creating the entry point

Converting EditTasks to Redux

Summary

Deploying Your Applications

Deploying Your Applications

Basic requirements

Creating developer memberships

Making your app look great

Summary

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 PostView

At the end of Chapter 5, Third Project - The Facebook Client, we created a FeedListRow component with a TouchableHighlight that fired the following function when pressed:

// Friends/app/components/FeedListRow/index.js 

... 
  _navigateToPostView () { 
    console.log('pushed'); 
  } 
...

We will build a PostView component that our users will navigate to when the TouchableHighlight component is pressed in FeedListRow and replace the current login within this _navigfateToPostView function to handle that navigation.

This PostView component should, upon loading, look in AsyncStorage for this post's details and load them if it exists. If it does not, then it should make a request to the Facebook Graph API for the post's details and save them into AsyncStorage for future use.

The details that we are interested in, are the post's attachments, comments, and likes. Since each post on Facebook is assigned a unique post ID, we can also save an object...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

React Native By Example

Search

Your notes and bookmarks