React Native Tutorial: Building Apps with JavaScript

[chadrahder]

Unfortunately I’m having problems just with the Hello World app. Here’s the code for it so far:

'use strict';

var React = require('react-native');
var styles = React.StyleSheet.create({
		text:
		{
			color: 'black',
			backgroundColor: 'white',
			fontSize: 30,
			margin: 80
		}
	});

class PropertyFinderApp extends React.Component {
	render() {
		return React.createElement(React.Text, {style: styles.text}, "Hello World!");
	}
}

React.AppRegistry.registerComponent('PropertyFinder', function()
{
	return PropertyFinderApp;
});

And here’s the log from XCode:

2016-05-27 09:37:33.189 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Super expression must either be null or a function, not undefined
2016-05-27 09:37:33.214 [error][tid:com.facebook.react.JavaScript] Module AppRegistry is not a registered callable module.
2016-05-27 09:37:33.215 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Module AppRegistry is not a registered callable module.

[miktav]

I had the same problem. Something like this is what worked for me.

Replace this line:
var React = require(‘react-native’);

With this:
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text
} from ‘react-native’;

Removed ‘React.’ prefix everywhere.

For example, instead of React.AppRegistry, just use AppRegistry.

[miktav]

I used the “latitude” property.

[saroshmirza]

Hi Chadrahder,

Replace it with the following code:

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS
} from ‘react-native’;

var styles = StyleSheet.create({
text:
{
color: ‘black’,
backgroundColor: ‘white’,
fontSize: 30,
margin: 80
}
});

class PropertyFinderApp extends Component {
render() {
return “Hello World”
}
}

AppRegistry.registerComponent(‘PropertyFinder’, function()
{
return PropertyFinderApp;
});

[miktav]

If you are having problems with searching by location, try toggling the location in the Simulator:

1. Select Debug > Location > None
2. Select Debug > Location > Custom Location…
3. Enter coordinates and click OK.
   This resolved the issue for me.

[chadrahder]

Thank you to everyone who answered my question. That certainly got things going. This is a great tutorial @tomelliott it would be great to see it updated because IMO it is invaluable – great work

It seems as though some people have noticed that when you press to view a second property after you have already viewed another one, the first one you viewed is loaded instead of the one you pressed.

As has been pointed out elsewhere this is because the API no longer seems to return a guid field for each record.

The other key we can use then is rowID.

I’m not sure I fully understand what the rowHasChanged function is doing and I can’t see it being called, but a good way to compare these is as follows:

var dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => this.props.listings.indexOf(r1) !== this.props.listings.indexOf(r2)
});

This should get the index of each row from the listings prop.

So far so good… renderRow already has a rowID for each row so we can pass that into our onPress method:

onPress={() => this.rowPressed(rowID)}

And the rowPressed method itself just becomes:

rowPressed(rowID)
{
	var property = this.props.listings[rowID];

	...
}

This works for me

Hope it helps!

[chadrahder]

Anyone got any tips for porting the same project to Android? Specifically it would need to use Navigator instead of NavigatorIOS and aside from the loading indicator (which is simple) there’s not much else therefore it should be simple but Navigator seems slightly complicated.

I’ve got it working so the SearchPage component loads but when I click Go I get an error related to this.props.navigator.

[alna]

Great stuff, and it all works!
(with minor changes for react-native 0.27.0-rc2)

As people already suggested namespaces have changed for ‘react’ and ‘react-native’. I like Tom’s approach require(‘…’) so my fix in index.ios.js is like this:

‘use strict’;
var React = require(‘react’);
var ReactNative = require(‘react-native’);

You’ll need to figure out after that which components is in which namespace. However the following destructive syntax taken from my modified SearchResult.js can help:

‘use strict’;
var React = require(‘react’);
var {
Component
} = React;

var ReactNative = require(‘react-native’);
var {
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
ListView
} = ReactNative;

And lastly the guid property is no longer supported by the Nestoria api (or at least i didn’t see it ) , but you can use thumb_url for the uniqueness purpose. So you’ll need to replace ALL occurrences of guid with thumb_url in SearchResults.js, e.g. replace:

var property = this.props.listings.filter(prop => prop.guid === guid)[0];

with:

var property = this.props.listings.filter(prop => prop.thumb_url === thumbUrl)[0];

Thank you for the great tutorial!
Tom, great references as well, which is extremely useful!!

[chadrahder]

This is very useful, thanks.

Do you think there are any problems with the approach I recommended which uses the index within the property list array?

[alna]

Not really, it will work as well. However you are bound to the row index which may change if some sorting/filtering is applied to the list. You can fix that by reindexing after such operation is applied. Binding to unique data property have more chances to succeed - however if they change the API again it will fail too , so nothing is perfect!

[chadrahder]

Great point, thank you.

I considered seeing if it was possible to generate a hash of a object and use that, but it didn’t seem straight forward. I think your solution, all things considered is better.

Someone above recommended the latitude property, but I think this is potentially not ideal in case there are several entries that might have the same latitude for some reason.

[neil]

Great tutorial. I can confirm the issues (and fixes) regarding GUID. One thing, which is not working well is the behavior of the app on change of orientation. In landscape things are not rendered correctly.

[ahliu1]

I tried doing the tutorial with my best abilities since I’m really new to React Native (or React development in general) and I was wondering if anyone else is having a problem with the information when going into property view? It seems like its only generating the first data when going to any of the property list.

How do I pass the information from this SearchResults.js

  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource(
      {rowHasChanged: (r1, r2) => r1.guid !== r2.guid});
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.listings)
    };
  }

into PropertyView.js

[snowcrash]

On the initial build, i.e. after running this line:

react-native init PropertyFinder

I get the white PropertyFinder screen. However, a few seconds later it refreshes and I get a red screen with the following errors:

Unable to execute JS call: __fbBatchedBridge is undefined

Has something changed? All I’m doing is creating a bare bones project and running it.

[doe]

I’m not very well in english, perhaps that’s why I can’t understand what does this part means: “UI is simply expressed as a function of the current application state”. Could you give some more words on that?
Isn’t any UI is the function of the current applications state? It’s not the picture after all. If so, then it’s not the advantage.

[mttmanzo]

Hi ahliu1, I had the same problem and I realised that ‘guid’ is not present on the response json. My fix was to use ‘title’ instead to check which row you pressed:

Inside the renderRow method in SearchResults.js replace guid with title:

return ( <TouchableHighlight onPress={() => this.rowPressed(rowData.title)}
and inside the filter method of rowPressed too:

rowPressed(propertyTitle) { var property = this.props.listings.filter(prop => prop.title === propertyTitle)[0];

I hope that helps

[mattgabor]

Any chance this tutorial could be updated for 0.28? It no longer works with the new syntax.

[imano]

hi mttmanzo I have the same problem here, and I can’t resolve it, but I wonder if the writer missed some instructions above, for example in render of SearchPage.js , onPress function is not defined also for SearchResults.js as you have mentionned before!!!

If you can please help me to fix it.
Tanks !

[mttmanzo]

Hi imano, let me show where in the tutorial you can find the implementation on onPress for SearchPage and for SearchResults:

SearchPage, chapter Initiating a Search:

if you see, Tom asks you to implement onPress within the TouchableHighlight tag that renders the ‘Go’ text.

[mttmanzo]

Instead, in the SearchResults, the implementation is here:

Now, if you want to follow my fix, you just have to replace guid with text.

Let me know and good luck!

Matteo