React Native: Create component error

Question

I am trying to create a react native component, basically just re-rendering the default screen via a component. But I am getting an error:

Cant find variable: Component

Login.js:

    'use strict';
    var React = require('react-native');
    var {
      AppRegistry,
      Component,
      StyleSheet,
      Text,
      View
    } = React;

    var SearchScreen = React.createClass({

      getInitialState: function() {
        return {
        };
      },
      render: function() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.android.js
            </Text>
            <Text style={styles.instructions}>
              Shake or press menu button for dev menu
            </Text>
          </View>
        );
    }
    });


    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

module.exports = Login;

index.android.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
var {
  AppRegistry
} = React;

var Login = require('./Login');

class theUI extends Component {
  render() {
    return (
      <Login />
    );
  }
}

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

Component it cannot find is <Login />.

I have looked at the movies example in the official repo, as well as a couple of other examples, and I cant see what I am doing wrong/differently.

I am on windows 10, both index.android.js and login.js are in the root directory (neither in sub dirs).

Nicolas Charpentier · Accepted Answer · 2016-02-20 20:08:39Z

3

You forgot to include the Component class from React.

var {
  AppRegistry,
  Component,
} = React;

OR

class fortysevenui extends React.Component {

answered Feb 20, 2016 at 20:08

Nicolas Charpentier

1,1281 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native: Create component error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related