I am a newer JS developer and I am exploring React-Native. I recently purchased "Learning React Native" by Bonnie Eisenman and am working on the very first mini-project - a very basic weather app.

Unfortunately, I can't get the code the author provides to work (see below for some of the code, or see the whole thing here). I keep getting the error "React.createClass is not a function", even though I've seen dozens of other examples where this works just fine. I've been spending hours researching and asking questions with no success. Please help!

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var WeatherProject = React.createClass({
  ....
});

module.exports = WeatherProject;

I am a newer JS developer and I am exploring React-Native. I recently purchased "Learning React Native" by Bonnie Eisenman and am working on the very first mini-project - a very basic weather app.

Unfortunately, I can't get the code the author provides to work (see below for some of the code, or see the whole thing here). I keep getting the error "React.createClass is not a function", even though I've seen dozens of other examples where this works just fine. I've been spending hours researching and asking questions with no success. Please help!

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var WeatherProject = React.createClass({
  ....
});

module.exports = WeatherProject;

• javascript
• reactjs
• react-native

1 Answer 1

according to the react-native docs https://facebook.github.io/react-native/

You should require React from 'react' not 'react-native'

And require your StyleSheet, Text, View, TextInput from 'react-native' (like you're currently doing)

from the docs:

import React, {
  Component,
} from 'react';
import {
  TabBarIOS,
  NavigatorIOS,
} from 'react-native';

class App extends Component {
  render() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
}

This is using ES6 / ES2015 syntax of extending the react Component. Yours will look more like this:

var React = require('react');
var {
  StyleSheet,
  Text,
  View,
  TextInput
} = require('react-native');


var WeatherProject = React.createClass({
  ....
});

module.exports = WeatherProject;

Although based on the object destructuring you're doing you are already in an environment that supports ES6 and it may be better to just use ES6 instead.