Third Project - The Facebook Client | 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

Installing the Facebook SDK on iOS and Android

Initialize a new React Native project using the following command line:

react-native init Friends

Afterwards, navigate to the new project you just created using a command line.

The Facebook SDK for React Native is available through npm in a package called react-native-fbsdk. We'll install it as such:

npm install --save react-native-fbsdk

Now link the SDK, as follows:

react-native link react-native-fbsdk

Now, follow the detailed instructions on the react-native-fbsdk repo on GitHub found at https://github.com/facebook/react-native-fbsdk. Since the installation instructions are prone to being changed at any given time, I highly recommend that you use the instructions found in that repo.

Afterward, install the react-native-vector-icons library that we used in Expenses using the process we saw earlier (refer to Chapter 4, Advanced Functionality with the Expenses App, if you need a refresher).

Once you have initialized the app for this project and installed...

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