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.
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];
...
}
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.
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!!
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!
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.
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.
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
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.
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];
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!!!