react native createClass error

Question

I have this codes:

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

var Weather = React.createClass({
  render: function(){
    return <MapView style={styles.map}></MapView>
  }

});

const styles = StyleSheet.create({
  map: {
    flex: 1,
  }
});

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

I just want to test the map, however, when I run it, I got the error:

Seems you're trying to access 'react-native' package. Perhaps you meant to access 'React.createClass' from the 'react' package instead ?

I don' t see what's wrong with the above codes, can you help me out

Thanks

score 1 · Accepted Answer · answered May 18 '17 at 00:20

1

You're importing incorrectly. You need to also import React to be able to use React.createClass, right now you're naming React as the 'react-native' library:

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

answered May 18 '17 at 00:20

Matt Aft

8,742
3
24
37

Hi, I tried your import codes still same error message as Talor A sugestion – dtjmsy May 18 '17 at 00:33
Yea, i posted on his comment but i'll post here too: If you're using RN version 0.44.0, MapView is no longer available. If that's not the issue, update your post with your code so we can see what you have. – Matt Aft May 18 '17 at 00:36
Hi Matt, yes I am using RN 0.44...that' s the problem :( , I tried to replace MapView with some text output, the text display correctly, do you know if there is any alternative native map on 0.44 to replace the or they just remove it completely ? – dtjmsy May 18 '17 at 00:45
Ok, I have a look on the link.thanks all for your helps – dtjmsy May 18 '17 at 00:49
I don't think you can use createClass anymore, you will have to use an es6 class. – Matt Aft Jun 14 '17 at 00:32

score 0 · Answer 2 · answered May 18 '17 at 00:08

0

I believe ES6 classes are the recommended way to create react components in React Native. to do that, your component should look something like this:

import React, { Component } from 'react'
import {
  AppRegistry,
  MapView,
  View,
  StyleSheet
} from 'react-native'

class Weather extends Component {
  render () {
    ...
  }
}

hope this helps.

answered May 18 '17 at 00:08

Talor A

85
5

Hi, I tried ES6 classes, I have now the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file its defined in... – dtjmsy May 18 '17 at 00:20
see [here](http://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string) – Talor A May 18 '17 at 00:24
If you're using RN version 0.44.0, MapView is no longer available – Matt Aft May 18 '17 at 00:31

react native createClass error

2 Answers2