React Native createClass not working

Question

I have the following code in React Native from a Udemy tutorial I'm following. However, when I try to run it, I keep getting an error about createClass. I am not able to continue the tutorial since this doesn't run. How do I fix it?

var React = require('react-native');

var {
  Text,
  View,
  AppRegistry
} = React;

/*
var AppRegistry = React.AppRegistry;
var Text = React.Text;
var View = React.View;
// same as:
// var Text = React.Text;
// var View = React.View;
*/
var StopWatch = React.createClass({
  render: function() {


    return <View>
      <Text>
      00:00.00
      </Text>
      {this.startStopButon()}
      {this.lapButon()}
    </View>
  },
  startStopButon: function() {
    return <View>
    <Text>
      Start
    </Text>
    </View>
  },
  lapButon: function() {
    return <View>
    <Text>
      Lap
    </Text>
    </View>
  },

  }
});

/*
AppRegistry.registerComponent('stopwatch', function() {
  return StopWatch;
});
*/

AppRegistry.registerComponent('stopwatch', () => StopWatch);

Possible Duplicate of https://stackoverflow.com/questions/46482433/reactjs-createclass-is-not-a-function/46482830#46482830 — Shubham Khatri, Dec 29 '17 at 05:29

score 0 · Answer 1 · answered Dec 29 '17 at 07:36

I think you are using latest react-native version. so you need to use es6 class definition.

class C extends React.Component { render() { return ; } }

    var React = require('react-native');

    var {
      Text,
      View,
      AppRegistry
    } = React;

    /*
    var AppRegistry = React.AppRegistry;
    var Text = React.Text;
    var View = React.View;
    // same as:
    // var Text = React.Text;
    // var View = React.View;
    */
export class StopWatch extends Component {  
      render () {


        return <View>
          <Text>
          00:00.00
          </Text>
          {this.startStopButon()}
          {this.lapButon()}
        </View>
      }
      startStopButon = () => {
        return <View>
        <Text>
          Start
        </Text>
        </View>
      }
      lapButon = () => {
        return <View>
        <Text>
          Lap
        </Text>
        </View>
      }

      }
    }

    /*
    AppRegistry.registerComponent('stopwatch', function() {
      return StopWatch;
    });
    */

    AppRegistry.registerComponent('stopwatch', () => StopWatch);

score 0 · Answer 2 · answered Dec 29 '17 at 07:47

just enclose your return in parenthesis in case you do not have any version issues

return( <View>
      <Text>
      00:00.00
      </Text>
      {this.startStopButon()}
      {this.lapButon()}
    </View>
  },
  startStopButon: function() {
    return <View>
    <Text>
      Start
    </Text>
    </View>
  },
  lapButon: function() {
    return <View>
    <Text>
      Lap
    </Text>
    </View>
);

React Native createClass not working

2 Answers2