Errata

Learning React Native

Errata for Learning React Native

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted by Date submitted
Chapter 2, section "Building a Weather App"

From the text:
"The final application with have a text field where users can input a zip code."

I reckon it should read (notice the fourth word):

"The final application will have a text field where users can input a zip code."

 Enrico Zschemisch  Aug 13, 2015 
PDF, Page ~20
Near the bottom

Example in the Styling Native Views Section near the beginning, there is an example that shows how to create a styles object and the content is shown below. fontSize in this example should just be 16 unquoted.



// Define a style...
var style = {
backgroundColor: 'white',
fontSize: '16px'
};

// ...and then apply it.
var tv = (
<Text style={style}>
A styled Text
</Text>);

 James Seigel  Jun 02, 2016 
PDF all pages

The book was written with ES5 syntax and for react native v0.11, which sadly isn’t entirely compatible with the current v0.2

Given the fast development of React, it is crucial that the book explicitly mentions which ES and RN versions are used in the code samples, and that the code samples are updated regularly.

Ariel Elkin  Jun 23, 2016 
Printed, PDF, ePub

All networking calls using the fetch API should call done() at the end of the promise chain, "otherwise errors thrown will get swallowed"

https://facebook.github.io/react-native/docs/sample-application-movies.html

 Ariel Elkin  Jun 27, 2016 
PDF Page 34
Stylesheet color setting for bigText and MainText.

Stylesheet color setting for bigText and MainText is set to FFFFFF which is almost same color as background. So, text is not visible when testing the app.

 KevinO  Dec 11, 2015 
PDF Page 43
Stylesheet

The text in the Forecast module is not center-aligned in the simulator or on actual device. Instead, the text is somewhat left-justified. The text rendered directly in iWeatherProject.js is properly centered.

I've copied code directly from https://github.com/bonniee/learning-react-native/blob/master/WeatherProject/Forecast.js. So, not I'm not sure what I could have done wrong...

I wish you had an ability to upload files so I could show you the screen capture from my device...

 KevinO  Dec 11, 2015 
PDF Page 43
Stylesheet

This is further to my posting on the Stylesheet issue on Dec 11, 2015.

I was able to center the text by defining a style called "forecastContainer" and adding using it to style the View container in Forecast.js:

var Forecast = React.createClass({
render() {
return (
<View style={styles.forecastContainer}>
<Text style={styles.bigText}>
{this.props.main}
</Text>
<Text style={styles.mainText}>
Current conditions: {this.props.description}
</Text>
<Text style={styles.bigText}>
{this.props.temp}°F
</Text>
</View>
);
}
});

var styles = StyleSheet.create({
forecastContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
bigText: {
flex: 2,
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#888888'
},
mainText: {
flex: 1,
fontSize: 16,
textAlign: 'center',
color: '#888888'
}
})

module.exports = Forecast;

KevinO  Dec 12, 2015 
PDF Page 44
WeatherProject app giving error

I have copied the final WeatherProject code from:

https://github.com/bonniee/learning-react-native/blob/master/WeatherProject/WeatherProject.js

However, when I run the app, either on simulator or actual iPhone device, I get the following error after entering a zip code (e.g. 10001):

TypeError: Undefined is not an object (evaluating 'response.JSON.weather')

 KevinO  Dec 11, 2015 
PDF Page 44
WeatherProject app giving error

This is further to my posting on this issue on Dec 11, 2015.

The cause of this issue is that the openweathermap API now requires an API key. In order to receive an API key, you need to register with openweathermap and add the API key into the API call.

Instructions for doing so can be found here:
http://openweathermap.org/appid#use

To resolve this issue, update the following line of code in WeatherProject.js:

fetch('http://api.openweathermap.org/data/2.5/weather?q='
+ zip + '&units=imperial' +
'&APPID=<insert api key here>')

KevinO  Dec 12, 2015 
Printed Page 44
Stylesheet

The zipcode input field does not show the characters while the user is typing them, or even afterwards, on an Android device because the height is not tall enough.

The book currently has:
zipCode: {
width: 50,
height: baseFontSize
}

if you change to
zipCode: {
width: 60,
height: baseFontSize * 2
}
then it works fine.

 Don Woodlock  Apr 20, 2016 
PDF Page 56
Figure 4-3. Obtaining touch responder status

I believe that the blue box below "Wait for move" should be "View.props.onMoveShouldSetResponder" and not "View.props.onStartShouldSetResponder".

 KevinO  Dec 12, 2015 
PDF Page 66
figure 4-6

The caption is incorrect, the screenshot in the middle is not the iOS Settings app, not Twitter.

 Ariel Elkin  Jun 23, 2016 
PDF Page 66
first paragraph

This section should include a discussion of the native components being rendered by React. For instance, is a ListView rendered into a UICollectionView on iOS? Does it do lazy loading?

Ariel Elkin  Jun 23, 2016 
PDF Page 66
first paragraph

"you should try to keep the child views relatively simple, to try and reduce stutter"

"try and" is too colloquial and inconsistent with the prior (and more correct) use of "try to".

 Ariel Elkin  Jun 23, 2016 
PDF Page 66
first paragraph

The code samples are presented in a very confusing way. Should we create a "SimpleList.js" file? If so where exactly should the samples be inserted? What's the boilerplate needed? Too many initial steps have been skipped (and it's too early in the book for that).

 Ariel Elkin  Jun 23, 2016 
Printed Page 70
render() function

''style' prop of ListView component in render() has no value ("style=").

 Anonymous  Mar 23, 2016 
PDF Page 72
Example 4-11

Example 4-11 is missing a value for 'source' in the Image tag:
<Image style={styles.cover} source=/>

I believe it should be:
<Image style={styles.cover} source={{uri: this.props.coverURL}}/>

 Howard Nager  Dec 17, 2015 
Printed Page 103
1st paragraph

'timeout' spelled as 'timoeut'.

 Anonymous  Mar 23, 2016 
Printed Page 109
Example 6-6

With a recent version of React Native, the CameraRoll component is no longer automatically included in your build. So if you run the example code the app with crash with an error: 'can't call getPhotos on undefined'.

You need to add this component directly in Xcode. The most recent instructions can be found the React Native site, Guides (iOS), Linking Libraries. I won't repeat it here but it worked fine.


Don Woodlock  May 16, 2016 
Printed Page 115
1st sentence

'coupled' spelt as 'couped'.

 Anonymous  Mar 26, 2016 
PDF Page 116
ImagePickerIOS areas

For React >= 0.14.0

In order to use ImagePickerIOS, you need to add new libraries to the the xcode project. This is because React has moved where it is located. It used to be in RCTImage but is now in RCTCameraRoll. In your xcode project, click on the application name, and in general tab at the bottom click the plus in linked frameworks and libraries. Click add other in the modal that appears, and navigate to the node_modules folder in the root of your react-native project. The xcode project is located in react-native -> Libraries -> CameraRoll. Choose the RCTCameraRoll.xcodeproj. After this is added to your project, go back to the linked frameworks and libraries, click plus again and in the workspace folder you will see libRCTCameraRoll.a, add that to your project. This will allow you to use ImagePickerIOS again.

Brian Hasenstab  Feb 03, 2016 
Printed Page 136
first code sample (the require statement)

The latest version of the react-native-video module using exports so the require statement as written doesn't work. You get an error that the component is not a component and the red screen in the simulator.

It says:
var Video = require('react-native-video');

It needs to be either:
import Video from 'react-native-video';
or
var Video = require('react-native-video').default;

 Don Woodlock  May 22, 2016 
Printed Page 146
2nd sentence

'simple' spelt as 'simpe'.

 Anonymous  Mar 24, 2016 
Printed Page 190
2nd paragraph

'architecture' misspelled.

 Anonymous  Mar 26, 2016 
Mobi Page 776
Chapter 3: Adding a Background Image

Location 776 of 5741 from Kindle edition

Weather App: Adding a Background Image

The various iOS/Android processes needed for images are now redundant, since 0.14 brought native static image control.

https://facebook.github.io/react-native/docs/images.html

 Dennis Brown  Jun 19, 2016 
Mobi Page 839
Chapter 3: Fetching Data from the Web

From Kindle Edition: 838 of 5741

The Weather API has changed, and also requires an API key from a personal account on OpenWeatherMap.org. Even with the API key, the code does need some changes. Here is the working code:


_handleTextChange = (event) => {
var zip = event.nativeEvent.text;
this.setState({zip: zip});
fetch('http://api.openweathermap.org/data/2.5/weather?zip=' + zip + ',us&units=imperial&APPID=' + ApiKey)
.then((response) => response.json())
.then((responseJSON) => {
console.log(responseJSON);
this.setState({
forecast: {
main: responseJSON.weather.main,
description: responseJSON.weather.description,
temp: responseJSON.main.temp
}
});
}).catch((error) => {
console.warn(error);
});
}

 Dennis Brown  Jun 19, 2016 
Mobi Page 1073
Chapter 4: The Text Component 7th paragraph

Location 1073 of 5741 (Kindle Edition)

Last sentence of 7th paragraph:

"One again, Facebook recommends solving this by using styled components:"

Should be:

"Once again, Facebook..."

 Dennis Brown  Jun 20, 2016 
Mobi Page 1572
Example 4-10 Missing Style Properties in Render Section

Location 1572 of 5741 Kindle Edition Example 4-10

In this example, the ListView component is missing its style code.

The code missing is:

<ListView
style={{ marginTop: 24 }}
...

Dennis Brown  Jun 22, 2016 
Mobi Page 1644
Example 4-11 render function

Location 1644 of 5741 Kindle edition

Missing source property in Image component.

What's shown in example:

<Image style={styles.cover} source=/>

What it should read:

<Image style={styles.cover} source={{uri: this.props.coverURL}} />

 Dennis Brown  Jun 22, 2016