Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Mobile > Cross Platform Mobile Development > React Native By Example
React Native By Example
React Native By Example

React Native By Example: Native mobile development with React

Arrow left icon
Profile Icon Kho
Arrow right icon
S$66.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.7 (3 Ratings)
Paperback Apr 2017 414 pages 1st Edition
eBook
S$36.99 S$52.99
Paperback
S$66.99
Subscription
Free Trial
Arrow left icon
Profile Icon Kho
Arrow right icon
S$66.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.7 (3 Ratings)
Paperback Apr 2017 414 pages 1st Edition
eBook
S$36.99 S$52.99
Paperback
S$66.99
Subscription
Free Trial
eBook
S$36.99 S$52.99
Paperback
S$66.99
Subscription
Free Trial

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

React Native By Example

Advanced Functionality and Styling the To-Do List App

Having built an MVP for Tasks, our to-do list app, it's time to delve into building out advanced functionality, and styling the application to make it look nice. This chapter will explore the following topics:

  • Utilizing the NavigatorIOS component to build an edit screen to add details to a task
  • Taking in a date and time for tasks to be due with DatePickerIOS
  • Creating a custom collapsible component for our app and utilizing LayoutAnimation to give us fluid transitions
  • Building a Button component for our UI to clear a to-do item's due date
  • Saving the data of an edited task and rendering a due date, if applicable
  • Porting the application over to Android, swapping out DatePickerIOS for DatePickerAndroid and TimePickerAndroid and NavigatorIOS for Navigator, and exploring the control flow in deciding which component is used
...

Navigator and NavigatorIOS

Implementing navigation in a mobile application helps us control how our users interact with and experience our apps. It lets us assign context to situations that would otherwise not have any--for example, in Tasks, it will not make sense to show a user an edit view for a task that they haven't selected; only showing this to the user when they select a task to edit builds situational context and awareness.

React Native's Navigator component handles the transitions between different views in your application. Glancing at the documentation, you may note that there's both a Navigator and NavigatorIOS component. Navigator is available on iOS and Android and implemented with JavaScript. On the other hand, NavigatorIOS is specifically available for iOS and is a wrapper around iOS's native UINavigationController, animating it and behaving the way you would expect from any...

Using DatePickerIOS

A key feature in Tasks is the ability to set a reminder for when a task is due. Ideally, our users can set a day as well as a time for when a task should be completed so that they can be reminded of the due date. To accomplish this, we'll use an iOS component named DatePickerIOS. This is a component that renders a date and time selector that we can utilize in our application.

Listed here are the two props that we will be using with our DatePickerIOS component. Other props exist in the React Native documentation in case you are interested:

  • date: This is one of the two required props that track the current selected date. Ideally, this information is stored within the state of the component that renders DatePickerIOS. The date should be an instance of the Date object in JavaScript.
  • onDateChange: This is the other required prop and is fired when a user changes the date or time...

Using onLayout

In our preceding example, we don't need to specify the height of the DatePickerIOS component when expanded. However, there may be scenarios in which you may need to manually get the dimensions of a component.

To calculate a component's height, we can utilize its onLayout property to fire a callback and then use that callback to save properties passed to the callback. The onLayout property is an event that is invoked on mount and layout changes, giving the event object a nativeEvent object that nests the component's layout properties. Using DatePickerIOS as an example, you can pass a callback to its onLayout prop like this:

<DatePickerIOS 
  date={ this.state.date } 
  onDateChange={ (date) => this._onDateChange(date) } 
  onLayout={ (event) => this._getComponentDimensions(event) } 
  style={ styles.datePicker }  
/>

The event from onLayout gives access to the following...

Button

Let's build a clear due date button for the EditTask component and only selectively enable it if a due date has been selected for the to-do item. The Button component in React Native should help us render one quickly.

The Button component accepts a couple of props; the following four will be used in our application:

  • color: This is a string (or stringified hex) that sets either the text color on iOS or the background color on Android
  • disabled: This is a Boolean that disables the button if set to true; it defaults to false
  • onPress: This is a callback that is fired when a button is pressed
  • title: This is the text to display within the button

A sample Button component can be rendered like this:

<Button 
  color={ 'blue' } 
  disabled={ this.state.buttonDisabled } 
  onPress={ () => alert('Submit button pressed') } 
  title={ 'Submit' }  
/>

Modify EditTask...

Navigator and NavigatorIOS

Implementing navigation in a mobile application helps us control how our users interact with and experience our apps. It lets us assign context to situations that would otherwise not have any--for example, in Tasks, it will not make sense to show a user an edit view for a task that they haven't selected; only showing this to the user when they select a task to edit builds situational context and awareness.

React Native's Navigator component handles the transitions between different views in your application. Glancing at the documentation, you may note that there's both a Navigator and NavigatorIOS component. Navigator is available on iOS and Android and implemented with JavaScript. On the other hand, NavigatorIOS is specifically available for iOS and is a wrapper around iOS's native UINavigationController, animating it and behaving the way you would expect from any iOS application.

Later in this chapter, we will take a closer look at the Navigator.

Note

An important...

Using DatePickerIOS

A key feature in Tasks is the ability to set a reminder for when a task is due. Ideally, our users can set a day as well as a time for when a task should be completed so that they can be reminded of the due date. To accomplish this, we'll use an iOS component named DatePickerIOS. This is a component that renders a date and time selector that we can utilize in our application.

Listed here are the two props that we will be using with our DatePickerIOS component. Other props exist in the React Native documentation in case you are interested:

  • date: This is one of the two required props that track the current selected date. Ideally, this information is stored within the state of the component that renders DatePickerIOS. The date should be an instance of the Date object in JavaScript.
  • onDateChange: This is the other required prop and is fired when a user changes the date or time in the component. It accepts one argument, which is the Date object representing the new date and time...

Using onLayout

In our preceding example, we don't need to specify the height of the DatePickerIOS component when expanded. However, there may be scenarios in which you may need to manually get the dimensions of a component.

To calculate a component's height, we can utilize its onLayout property to fire a callback and then use that callback to save properties passed to the callback. The onLayout property is an event that is invoked on mount and layout changes, giving the event object a nativeEvent object that nests the component's layout properties. Using DatePickerIOS as an example, you can pass a callback to its onLayout prop like this:

<DatePickerIOS 
  date={ this.state.date } 
  onDateChange={ (date) => this._onDateChange(date) } 
  onLayout={ (event) => this._getComponentDimensions(event) } 
  style={ styles.datePicker }  
/>

 

The event from onLayout gives access to the following property:

event: { 
  nativeEvent: { 
    layout: { 
      x: //some number 
      y: //some number...

Button

Let's build a clear due date button for the EditTask component and only selectively enable it if a due date has been selected for the to-do item. The Button component in React Native should help us render one quickly.

The Button component accepts a couple of props; the following four will be used in our application:

  • color: This is a string (or stringified hex) that sets either the text color on iOS or the background color on Android
  • disabled: This is a Boolean that disables the button if set to true; it defaults to false
  • onPress: This is a callback that is fired when a button is pressed
  • title: This is the text to display within the button

A sample Button component can be rendered like this:

<Button 
  color={ 'blue' } 
  disabled={ this.state.buttonDisabled } 
  onPress={ () => alert('Submit button pressed') } 
  title={ 'Submit' }  
/>

Modify EditTask so that it has the following features:

  • It contains a Boolean, titled expanded, in its state to control the open/closed status of...

Switch

Switch is a component that renders a Boolean input and allows the user to toggle back and forth.

With Switch, these are the props that we will use:

  • onValueChange: This is a callback that is invoked with the new value of the switch when the value changes
  • value: This is a Boolean that determines whether the switch is set to its 'on' position or not; it defaults to false

A simple Switch component can look like this:

<Switch 
  onValueChange={ (value) =? this.setState({ toggled: value })} 
  value={ this.state.toggled } 
/>

As stated earlier, Switch has two props that are required: its value and a callback to change its value when toggled.

Using this knowledge, let's make changes to the TasksList component so that it passes the completed, due, formattedDate, and text properties of each row to the EditTask component for use.

Then, make additions to the EditTask component so that it:

  • Expects the completed, due, formattedDate, and text props as part of its propTypes declaration.
  • Contains a...

Save button

In this section, we will create a button in the upper-right corner of the navigation bar that is labeled as Save. When it is tapped on, the following two things must happen:

  • The changes the user made to the to-do item (such as its name, completion status, and due date) must be saved to AsyncStorage, overwriting its previous details
  • The TasksList must be updated so that the user visually sees the changes they made right away

Rendering the Save button is easy with React Native. The object that gets pushed to NavigatorIOS needs to receive the following two key/value pairs:

  • rightButtonTitle: This is a string that renders the text shown in that area
  • onRightButtonPress: This is a callback that is fired when that button is pressed

At face value, this looks simple. However, we can't pass any information to the onRightButtonPress method of NavigatorIOS from a rendered child. Instead, we have to keep a copy of the changes we make inside our TasksList component as well, and update them as the...

TasksListCell modifications

Finally, we want to edit each row rendered by our ListView to display the due date, if one exists.

To do this, we will have to write some conditional logic to show the formatted date, if one is assigned to the to-do item we are rendering. This is also a good time to create a custom styles folder for this component as we will be needing it.

Spend some time creating your version of this feature. My solution is as follows:

// Tasks/app/components/TasksListCell/index.js 

... 
import styles from './styles';

You might notice from the above import statement that TasksListCell now imports its StyleSheet.

Add formattedDate to propTypes as an optional string:

export default class TasksListCell extends Component { 
  static propTypes = { 
    ... 
    formattedDate: PropTypes.string, 
  } 
... 
  render () { 
    ... 
    return ( 
      <View style={ styles.tasksListCellContainer }> 
        <TouchableHighlight 
          ... 
        > 
          <View style...

Navigator

The Navigator component works a bit differently from its native iOS component, but it's still very powerful to work with. One of the changes with using Navigator is that your routes should be explicitly defined. We can do this by setting up an array of routes and rendering a specific scene based on which route we're accessing. Here's a sample:

export default class Tasks extends Component { 
  render () { 
    const routes = [ 
      { title: 'First Component', index: 0 }, 
      { title: 'Second Component', index: 1 } 
    ];

Create a routes array, as shown in the preceding code.

You might notice that we are explicitly defining our routes from the beginning, setting up an initial route and then passing in props to each route's component here:

    return ( 
      <Navigator 
        initialRoute={{ index: 0 }} 
        renderScene={ (routes, navigator) => 
        this._renderScene(routes, navigator) } /> 
    ) 
  }

The route object passed in to _renderScene contains a passProps...

Platform

When your files have such little variance in the differences between their iOS and Android functionalities, it's okay to use the same file. Utilizing the Platform API, we can identify the type of mobile device the user is on and conditionally send them down a specific path.

Import the Platform API along with the rest of your React Native components:

import { Platform } from 'react-native';

Then call its OS property within a component:

  _platformConditional () { 
    if (Platform.OS === 'ios') { 
      doSomething(); 
    } 

    if (Platform.OS === 'android') { 
      doSomethingElse(); 
    } 
  }

This lets us control the path our app takes and allows for a little bit of code reuse.

Note

Android-specific filesIf we need to create a file that is supposed to only run on Android devices, simply name it <FILENAME>.android.js, just like the two index files. React Native will know exactly which file to build with, and this lets us create components that are platform-specific when...

Left arrow icon

Page 1 of 14

Right arrow icon
Download code icon Download Code

Key benefits

  • Work on native APIs and UI Elements using React Native
  • Get the best of both worlds: the power of native approach and the fluidity of JavaScript
  • Create increasingly complex real-world applications and dive deeper into React Native

Description

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.

Who is this book for?

If you are keen on learning to use the revolutionary mobile development tool React Native to build native mobile applications, then this book is for you. Prior experience with JavaScript would be useful.

What you will learn

  • How to create mobile-performant iOS and Android apps using JavaScript and React
  • The potential of each API and component, putting them into practice throughout the course of three projects
  • The process of integrating the Facebook SDK to build an app that connects to third-party data
  • Every step taken to implement Redux, a popular state management library, in your mobile apps
  • The requirements for building and deploying your apps to market, with detailed instructions on how to release and beta test apps on both the Apple App Store and Google Play
Estimated delivery fee Deliver to Singapore

Standard delivery 10 - 13 business days

S$11.95

Premium delivery 5 - 8 business days

S$54.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 24, 2017
Length: 414 pages
Edition : 1st
Language : English
ISBN-13 : 9781786464750
Category :
Mobile
Languages :
JavaScript
Concepts :
Cross Platform Mobile Development
Tools :
React

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Singapore

Standard delivery 10 - 13 business days

S$11.95

Premium delivery 5 - 8 business days

S$54.95
(Includes tracking information)

Product Details

Publication date : Apr 24, 2017
Length: 414 pages
Edition : 1st
Language : English
ISBN-13 : 9781786464750
Category :
Mobile
Languages :
JavaScript
Concepts :
Cross Platform Mobile Development
Tools :
React

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

React and React Native
React and React Native
Read more
Mar 2017 500 pages
Full star icon 4 (1)
eBook
eBook
  • eBook eBook S$41.98
  • Paperback Paperback S$74.99
S$41.98 S$59.99
S$74.99
React Native By Example
React Native By Example
Read more
Apr 2017 414 pages
Full star icon 3.7 (3)
eBook
eBook
  • eBook eBook S$36.99
  • Paperback Paperback S$66.99
S$36.99 S$52.99
S$66.99
Mastering React Native
Mastering React Native
Read more
Jan 2017 496 pages
Full star icon 3.8 (9)
eBook
eBook
  • eBook eBook S$36.99
  • Paperback Paperback S$66.99
S$36.99 S$52.99
S$66.99
Stars icon
Total S$ 208.97
React and React Native
S$74.99
React Native By Example
S$66.99
Mastering React Native
S$66.99
Total S$ 208.97 Stars icon

Table of Contents

9 Chapters
First Project - Creating a Basic To-Do List App Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Redux
Introducing Redux
Planning the Redux conversion
Creating the entry point
Converting EditTasks to Redux
Summary
Deploying Your Applications Chevron down icon Chevron up icon
Deploying Your Applications
Basic requirements
Creating developer memberships
Making your app look great
Summary
Additional React Native Components Chevron down icon Chevron up icon
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

Recommendations for you

Left arrow icon
.NET MAUI Cookbook
.NET MAUI Cookbook
Read more
Dec 2024 384 pages
Full star icon 4.3 (3)
eBook
eBook
  • eBook eBook S$33.99
  • Paperback Paperback S$60.99
S$33.99 S$48.99
S$60.99
iOS 18 Programming for Beginners
iOS 18 Programming for Beginners
Read more
Dec 2024 584 pages
Full star icon 4.4 (7)
eBook
eBook
  • eBook eBook S$33.99
  • Paperback Paperback S$60.99
S$33.99 S$48.99
S$60.99
Apps and Services with .NET 8
Apps and Services with .NET 8
Read more
Dec 2023 798 pages
Full star icon 4.8 (22)
eBook
eBook
  • eBook eBook S$36.99
  • Paperback Paperback S$67.99
S$36.99 S$53.99
S$67.99
Flutter Design Patterns and Best Practices
Flutter Design Patterns and Best Practices
Read more
Sep 2024 362 pages
Full star icon 4.2 (5)
eBook
eBook
  • eBook eBook S$33.99
  • Paperback Paperback S$60.99
S$33.99 S$48.99
S$60.99
Mastering iOS 18 Development
Mastering iOS 18 Development
Read more
Nov 2024 418 pages
Full star icon 5 (2)
eBook
eBook
  • eBook eBook S$31.99
  • Paperback Paperback S$56.99
S$31.99 S$45.99
S$56.99
Mastering Kotlin for Android 14
Mastering Kotlin for Android 14
Read more
Apr 2024 370 pages
Full star icon 5 (8)
eBook
eBook
  • eBook eBook S$29.99
  • Paperback Paperback S$53.99
S$29.99 S$43.99
S$53.99
Thriving in Android Development Using Kotlin
Thriving in Android Development Using Kotlin
Read more
Jul 2024 410 pages
Full star icon 4.5 (6)
eBook
eBook
  • eBook eBook S$41.98
  • Paperback Paperback S$74.99
S$41.98 S$59.99
S$74.99
Swift Cookbook
Swift Cookbook
Read more
Jun 2024 422 pages
Full star icon 5 (3)
eBook
eBook
  • eBook eBook S$29.99
  • Paperback Paperback S$53.99
S$29.99 S$43.99
S$53.99
Android Programming for Beginners
Android Programming for Beginners
Read more
Apr 2021 742 pages
Full star icon 4.2 (12)
eBook
eBook
  • eBook eBook S$32.99
  • Paperback Paperback S$59.99
S$32.99 S$47.99
S$59.99
How to Build Android Apps with Kotlin
How to Build Android Apps with Kotlin
Read more
May 2023 704 pages
Full star icon 4.4 (14)
eBook
eBook
  • eBook eBook S$78.99
  • Paperback Paperback S$140.99
S$78.99 S$112.99
S$140.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.7
(3 Ratings)
5 star 66.7%
4 star 0%
3 star 0%
2 star 0%
1 star 33.3%
Alexxis Johnson Oct 20, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book helped me understand React Native, and now I can use the technology to build my own apps. I definitely recommend checking it out!
Amazon Verified review Amazon
Peenmaster Oct 20, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Very helpful book, helped clear up a lot of the problems I was having trying to learn in my own.
Amazon Verified review Amazon
Eugeniu Jul 07, 2017
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Compared to similar programming books I have read, this book has been the most frustrating because it is unclear and contains too many inconsistencies and errors. The book alternates for no reason between "let's implement a feature, here's the code you need" and "let's implement a feature, write the code yourself, but here's some of the code I used." For example, in the TextInput section, the author writes "Take some time to try and add this first feature into our app! In the next section, I will share some screenshots of my results and break down the code I wrote for it." and "Let's look at the code to see how I tackled it--yours may be different!"Well, his code doesn't even work. His "Tasks/app/components/TasksList/styles.js" code only contains a style for "container", but his "Tasks/app/components/TasksList/index.js" code references "styles.textInput". Without that style, the TextInput was in the wrong place. I actually had to look for the code in the accompanying GitHub repository to find the correct code.Even so, my app didn't work right. I copied everything from the book, but after inputting a task, the ListView would not get updated. Then I went to GitHub again. I copied the entire contents of index.ios.js, TasksList/index.js, and TasksList/styles.js. I still had the same problem. I am new to React Native, but given that I copy-pasted only the author's code and none of my own code, I have to conclude that it's a problem with the book and accompanying code.Maybe the problem is that I am using the wrong React Native version (I am using 0.45). If that's the case, that's still the book's problem. Nowhere in the book does it tell you what version to use. If I'm reading a book on native iOS development, it will say "this book uses Swift 3 with Xcode 8 and iOS 10. If you're using different versions, you may have problems." This book doesn't do that.Maybe the problem is that I'm not seeing something obvious to others. That's possible. But if that's the case, there is no online community around this book, like there is with Big Nerd Ranch books, so I don't have anywhere I can easily ask questions. The book also does not suggest I can contact the author. The only thing it says is: "To send us general feedback, simply e-mail feedback@packtpub.com, and mention the book's title in the subject of your message." That won't help me.If anyone can show that I'm wrong about this, I'd be happy to take this review down.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Apps and Services with .NET 7
Apps and Services with .NET 7
Read more
Nov 2022 814 pages
Full star icon 4.8 (27)
eBook
eBook
  • eBook eBook S$36.99
  • Paperback Paperback S$67.99
S$36.99 S$53.99
S$67.99
Apps and Services with .NET 8
Apps and Services with .NET 8
Read more
Dec 2023 798 pages
Full star icon 4.8 (22)
eBook
eBook
  • eBook eBook S$36.99
  • Paperback Paperback S$67.99
S$36.99 S$53.99
S$67.99
Machine Learning Techniques for Text
Machine Learning Techniques for Text
Read more
Oct 2022 448 pages
Full star icon 4.8 (6)
eBook
eBook
  • eBook eBook S$34.99
  • Paperback Paperback S$63.99
S$34.99 S$50.99
S$63.99
iOS 16 Programming for Beginners
iOS 16 Programming for Beginners
Read more
Nov 2022 686 pages
Full star icon 4.7 (50)
eBook
eBook
  • eBook eBook S$33.99
  • Paperback Paperback S$60.99
S$33.99 S$48.99
S$60.99
Test-Driven iOS Development with Swift
Test-Driven iOS Development with Swift
Read more
Apr 2022 280 pages
Full star icon 5 (3)
eBook
eBook
  • eBook eBook S$24.99
  • Paperback Paperback S$45.99
S$24.99 S$36.99
S$45.99
Right arrow icon

About the author

Profile icon Kho
Kho
Richard Kho is a software engineer living in San Francisco. He taught himself how to code in 2014 and has lived a past life as a photographer and cinematographer. He currently works for Capital One and has taught software engineers at Hack Reactor in the past. Richard is also a technical advisor to Code Chrysalis, an advanced software engineering immersive in Tokyo.
Read more
See other products by Kho
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela