React-native: expected a component class, got [object Object] error

[emretekince]

I got expected a component class got object error when I try to use loginPage component which I created.

here is index.ios.js

import React, {Component} from 'react';

import {
    AppRegistry,
    View
} from 'react-native';

import loginPage from './pages/loginPage'

class app extends Component {
    render() {
        return (
            <View>
                <loginPage/>
            </View>
        );
    }
}

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

and here is the loginPage.js

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

export default class loginPage extends Component {
    render() {
        return (
            <View>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
}

RN version is 0.28.0

[emretekince]

I made class names Capitalized and fixed. sorry.

[xareelee]

This is weird. Don't know why only Capitalized components work in JSX.

const Component = component = SomeComponent;
// both work in JS React format
React.createElement(Component, {navigator});
React.createElement(component, {navigator});
// one doesn't in JSX React format
<Component navigator={navigator} />
<component navigator={navigator} />    // raise `expected a component class, got [object Object]`

It's a bug or just the design?

[ide]

This is the design of JSX so it's a feature and not a bug, but it has tripped up experts in the past.

[pugaldp]

Am getting the following error in Android simulator, please help..

node_modulesreact-nativeLibrariesJavaScriptAppEngineInitializationExceptionsManager.js Expected a component class, got [object Object].
Implementation:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';

import Config from 'react-native-config';
export default class Intro extends Component {
constructor(props) {
super(props);
this.state = {isChecked: false};
this.onChange = this.onChange.bind(this);
}
onChange() {
this.setState({isChecked: !this.state.isChecked});
}
render() {
return (


{this.state.isChecked ? this.props.labelOn : this.props.labelOff}


); }}

[ide]

@pugaldp Please ask on Stack Overflow when you need help with your code. We use GitHub mostly for bug reports.

[renatobenks-zz]

@ide but this seems like a bug, because there is not reason for this exception with a class Component, capitialized 😕

[fungilation]

Mainly that the error thrown has no meaning for what the issue is: Naming capitalization. This is a bug for nonsensical error output. Errors shouldn't rely on googling to find out actual cause. 😭

[ide]

That's an issue with React and is unrelated to React Native proper. You get this bug when you try to render something that's not a component. Unless the bug is somewhere in the components that React Native provides, this is a user-space bug.