Advanced Functionality with the Expenses App | React Native By Example

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

React Native By Example

By : Kho

3.7 (3)

React Native By Example

3.7 (3)

By: 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

Picker

So far in this book, we have used DatePickerIOS and DatePickerAndroid for users to select dates. Each platform also has access to a native Picker component, where we can populate an array of choices and allow our users to interact with it.

Building a Picker is easy. We start by writing a Picker in the render method of a component and populate it with Picker.Item children:

<Picker> 
  <Picker.Item  
    label='Hello' 
    value='hello' 
  /> 
</Picker>

Then, we can give the Picker some props. The following ones are used in this exercise:

onValueChange: This is a callback fired when an item has been selected. It passes two arguments: itemValue and itemPosition
selectedValue: This is a reference to the current value of the Picker list

Selecting a category

We will modify our existing AddExpensesModal component to add the following functionality:

Create a Button right below the ExpandableCell/DatePickerIOS component to select a category for our expense.
On press, that button...

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