React Native - Super expression must either be null or a function, not undefined

Question

Following this tutorial https://www.raywenderlich.com/126063/react-native-tutorial

I get the following errors at the Hello World stage:

2016-06-16 22:38:30.192 [error][tid:com.facebook.react.JavaScript] Super expression must either be null or a function, not undefined
2016-06-16 22:38:30.197 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Super expression must either be null or a function, not undefined
2016-06-16 22:38:32.059 [error][tid:com.facebook.react.JavaScript] Module AppRegistry is not a registered callable module.
2016-06-16 22:38:32.060 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Module AppRegistry is not a registered callable module.

The full code for index.ios.js is:

'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 });

==== UPDATE

Later in the blog it mentions using some updated code. However, this also gives me errors. Specifically, the 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;
});

and the errors:

2016-06-16 22:50:28.181 [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-06-16 22:50:28.205 [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-06-16 22:50:28.209 [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.

Any suggestions what I might be doing wrong?

Answer 1

The first version is not working because you should import Component from 'react', not from not 'react-native'.

It should look like this

var React = require('react');
var ReactNative = require('react-native');
var {
  Image,
  AppRegistry
  ScrollView,
  StyleSheet,
  Text,
  View,
} = ReactNative;

class PropertyFinderApp extends React.Component {
  render() {
    return (<View>
         <Text>
           Hello world
         </Text>
      </View>)       
  }
}

AppRegistry.registerComponent('PropertyFinder', () => PropertyFinderApp);

And the updated version is not working because your PropertyFinderApp Component is not returning an element, it's returning a String, which is wrong.

this

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

class PropertyFinderApp extends Component {
    render() {
      return "Hello World" // You should return an element, not a String
    }
}

AppRegistry.registerComponent('PropertyFinder',() => PropertyFinderApp; });

should be

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

class PropertyFinderApp extends React.Component {
  render() {
    return (<View>
         <Text>
           Hello world
         </Text>
      </View>)       
  }
}

AppRegistry.registerComponent('PropertyFinder',() => PropertyFinderApp; });