React Native Tutorial: Building Apps with JavaScript

ascoppa · July 5, 2016, 3:47am

Hey Tom great article! I think I might have found an issue regarding the order of the logging statements:

This is what I get:

SearchPage.render => (initial render)
search_page.js:23 onSearchTextChanged
search_page.js:25 london
search_page.js:29 SearchPage.render

So it looks like the render function isn’t called until onSearchTextChanged finishes. BTW, I’m running react-native 0.28.

smilya · July 13, 2016, 6:04am

2016-07-13 14:01:31.932 [warn][tid:main][RCTEventEmitter.m:52] Sending websocketFailed with no listeners registered.
2016-07-13 14:01:31.979 [info][tid:com.facebook.react.JavaScript] Running application “PropertyFinder” with appParams: {“rootTag”:1,“initialProps”:{}}. DEV === true, development-level warning are ON, performance optimizations are OFF
2016-07-13 14:01:31.995 [error][tid:com.facebook.react.JavaScript] PropertyFinderApp.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
2016-07-13 14:01:31.997 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: PropertyFinderApp.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Why I run this code ,it has an error,where i am wrong ?Please Tell me,Thank you for that.

jel111 · July 21, 2016, 3:09am

I can’t even get it to run at all totally broke now!

mttmanzo · July 21, 2016, 8:12am

Hi jel111, could you show me any output error?

protspace · August 4, 2016, 4:22pm

does anybody know how to enable Live Reload on device running REact Native App? I don’t have this item in “shake” dev menu

sbass92 · August 6, 2016, 8:33pm

Find every where in ‘SearchResults.js’ where ‘guid’ is, then replace every single ‘guid’ with ‘thumb_url’ (without the single quotes)
Now it should work!

faisalmukhtarch · August 26, 2016, 5:58pm

Help me out guys,
I know a lot of things changed since this tutorial was written, Currently i am stuck with this Network Request Failed. Kindly guide me what i am doing wrong. I have tried to edit i
Info.plsit but nothing worked.
<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict>
Thank you

alexk · August 28, 2016, 2:04pm

@faisalmukhtarch
You need to add api.nestoria.co.uk to NSAppTransportSecurity in the plist.info file.
Before React 0.28 non-HTTPS traffic was always allowed. Now by default only HTTPS connections are allowed.

You find the plist.info file under ios → build → PropertyFinder.

It should look like that:

<key>NSAppTransportSecurity</key>
	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
	<dict>
		<key>NSExceptionDomains</key>
		<dict>
			<key>localhost</key>
			<dict>
				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
			<key>api.nestoria.co.uk</key>
			<dict>
				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
		</dict>
	</dict>

visonic129 · September 13, 2016, 11:05am

To be able to see the images in the ListView you need also include the following line under NSAppTransportSecurity

<key>imgs.nestimg.com</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict>

Otherwise, you won’t be able to see the house image in the list

brucegulke · September 17, 2016, 5:37pm

Just wanted to mention - “Narnia” will currently give you 20 results as well You get a response code of “listings returned for best guess of ambiguous location”. Took me a few minutes to see if I was updating the query string properly…

To get the “Location not recognized” message, use a location like “xxyyzz”; that worked for me (i.e.; giving me 0 results).

tomelliott · October 9, 2016, 8:18pm

Hi everyone.

I’m sorry it’s taken my so long, but I’ve just updated the tutorial to the latest and greatest version of React Native, v34.

It should now run out of the box for everyone! :]

A massive thanks to everyone who chipped in to help others figure out the problems after the iOS and RN changes since April

kurtzilla · October 12, 2016, 8:02pm

Everything was going along just great until I reached the section regarding adding the domains to the plist. I am certain I have the entries correct, but the app does not respond after I hit “go”

Looking at the error in the console, I see the following:
TCP_CONNECTION_EVENT_DISCONNECTED in response to state failed and error Error Domain=kNWErrorDomainPOSIX Code=61 “Connection refused” UserInfo={NSDescription=Connection refused}

Any suggestions?

kurtzilla · October 12, 2016, 9:25pm

It turns out that a reboot was able to fix the issue.
However, I recently upgraded to Sierra and during the reboot, my screen went to black and my mac appeared to be shut down. I did a bit of searching for the fix and all is well now.

niceseb · October 28, 2016, 2:58am

React packager ready.

2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-10-28 01:22 node[12864] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
 ERROR  Error watching file for changes: EMFILE
{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}
Error: Error watching file for changes: EMFILE
    at exports._errnoException (util.js:1026:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)

2359 · November 10, 2016, 4:09am

Hey guys, im following up to the first page rendering and the location button is not appearing! any idea why?

karip · November 12, 2016, 11:26am

I fixed with this

	  <TouchableHighlight style={styles.button}
	      underlayColor='#99d9f4' onPress={this.onSearchPressed.bind(this)}>
	    <Text style={styles.buttonText}>Go</Text>
	  </TouchableHighlight>

	</View>

	<View style={styles.flowRight}>
	  <TouchableHighlight style={styles.button}
	      underlayColor='#99d9f4'>
	    <Text style={styles.buttonText}>Location</Text>
	  </TouchableHighlight>
	  </View>

venky07 · November 16, 2016, 12:28pm

Hi Everyone,
Please can anyone help me. I followed this tutorial up to second page i.e “Search result” page. But am developing application for android. when i click on the “Location” button again it will redirecting to the first page.

tony_m · December 7, 2016, 6:31am

I couldn’t even get the ‘Hello World’ part to work, but instead got a red error screen in my simulator with an error element type is invalid message. After trying over and over to double check things, I eventually gave up. Since I cannot upload, I’ll paste here what I was using. I’m using Xcode Version 8.1 (8B62) on a MacBook Pro late 2015 running 10.12.1, and I had no trouble getting things setup with all the terminal commands, beforehand. Pitty.

‘use strict’;
var React = require(‘react’);
var ReactNative = require(‘react-native’);
var styles = ReactNative.StyleSheet.create({
text: {
color: ‘black’,
backgroundColor: ‘white’,
fontSize: 30,
margin: 80
}
});
class PropertyFinderApp extends React.Component {
render() {
return React.createElement(ReactNative.Text, {style: styles.text}, “Hello World!”);
}
}

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

kumar · December 11, 2016, 7:31pm

Hi all!
I tried to run this application with:

iOS 10.1 (14B72)
xcode 8.1
RN 0.34.1

and got this error rightaway (on a red screen in the emulator):

Unhandled JS Exception: Invariant Violation: Module name prefixes should’ve been stripped by the native side but wasn’t for RCTJSCExectuor

index.ios.bundle?platform…dev=true&minify=false:2138

Has anyone seen this before? Would appreciate any pointers as to what I am doing wrong.
Thanks

uokesita · February 8, 2017, 7:47pm

Hi, I have the same error and I have no idea of what can I do to fix it.
If you find it, please let me know