Initialization Errors with React Native Tutorials

Question

I just installed React Native, and am attempting to follow tutorials on the React Native website to get accustomed to it. However every tutorial I end up doing just gives me a big red error screen in the iOS Simulator.

As an example, I followed the "Hello World" tutorial on the React Native website

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

but am met with this error after compiling and running in the simulator"

"Application TestProject has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent"

I'm confused because I know nothing yet about RN, am following their tutorials to the letter, and am getting errors.

Please advise?

The very latest they have on their site. I performed the install instructions as they had them on their site 2 days ago. So...version 0.30? — bmoneruxui, Jul 25 '16 at 14:42
Which OS are you using? `Linux`, `Windows` or `Mac` ? Are you sure `packager` is running when you did `react-native run-ios` ? — Tushar Khatiwada, Jul 25 '16 at 14:51
OS X. I'm following the tutorials to the letter from installation, all the way to the Hello World tutorial. Everything current on their website. I'm typing in exactly as they show. Nothing deviated. — bmoneruxui, Jul 25 '16 at 15:03

score 0 · Accepted Answer · answered Jul 25 '16 at 15:15

0

There might be two possibilities as I know of:

When you run react-native run-ios the packager didn't start automatically. If that's the case, Run the Packager Manually. To do so:

In one Tab of your terminal run react-native start and in another run react-native run-ios.

Or while following the document from react native's site, you might have changed the app's name. Like:

You created a project using react-native init AwesomeProject. The Project's name here is AwesomeProject.

And then changed your default index.ios.js and replaced the Component's name with HelloWorldApp.

class HelloWorldApp extends Component

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

answered Jul 25 '16 at 15:15

Tushar Khatiwada

2,019
2
20
32

1

Ok Packager IS running, so it has to be the second issue, which I was completely unaware of. I wasn't aware the project name signified the component. Thank you for this. I'll try to correct and report back. – bmoneruxui Jul 25 '16 at 15:18
Yes, this was it. So the project name 100% always has to be the registered components name? – bmoneruxui Jul 25 '16 at 15:21
1

When you create a new react-native project with a name (`AwesomeProject`), it creates some files like `AppDelegate.m` and others which uses the same project name in their code. While you changed the Component's name only on `index` file and the code `AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);` searches for the `HelloWorldApp` as a registered module on those files which obviously has `AwesomeProject` as registered. – Tushar Khatiwada Jul 25 '16 at 15:30
1

Thank you for your help. This almost deterred me from learning. – bmoneruxui Jul 25 '16 at 15:31

Initialization Errors with React Native Tutorials

1 Answers1