Our Second Project - The Budgeting App | React Native By Example

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

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

Customer Reviews

3.7 (3)

5 star

66.7%

4 star

0%

3 star

0%

2 star

0%

1 star

33.3%

The EnterBudget component

The component to enter a budget should do the following things:

Prompt the user to enter their budget for the month with a numerical input
Include a button that lets them save the budget. When saved, we will do the following things:
- Have the parent App.js component use saveMonthlyBudget, created in our storageMethods file, to save the entered budget
- Update the parent App.js component to reflect the entered budget
- Pop out of the EnterBudget component and go back to the App.js component

We should also modify the App.js component so that it does the following things:

Pushes the EnterBudget component to the navigator in the event that a budget has not been set. This should replace the current call to alert the user that they have not yet set a budget. This component should not contain a back button so that the user is required to enter a budget for the month.
Passes the name of the current month in string form to the EnterBudget component.
Stores the current month and year in...

Visually different images

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