react native - expected a component class, got [object Object]

Question

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>
        );
    }
}

classes must be Capitalize, change it and lemme know the update. — elreeda, Jun 26 '16 at 13:12

score 96 · Accepted Answer · answered Oct 29 '16 at 11:43

96

You need to rename your loginPage class to LoginPage, the class must be capitalize

answered Oct 29 '16 at 11:43

fandro

4,833
7
41
62

2

Amazing Answer ! – Fareed Alnamrouti Mar 05 '17 at 14:24
2

Awesome! Thanks, but why is this the case? – Ben Bieler May 20 '17 at 17:43
2

@BenBieler Here is the answer : http://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters – fandro May 20 '17 at 22:16
so how does it work with the default created with react-native init firstapp? – ZedBee Jun 28 '17 at 16:23

score 4 · Answer 2 · edited May 29 '17 at 06:28

loginPage.js

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

const LoginPage = () => {
    return (
        <View>
                <Text>
                    Welcome to React Native!
                </Text>
            </View>
    );
}
export default LoginPage;

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>
        );
    }
}

score 0 · Answer 3 · edited Apr 13 '17 at 14:25

0

remove the tags in 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 (

                <loginPage/>

        );
    }
}

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

edited Apr 13 '17 at 14:25

Sebastianb

2,020
22
31

answered Apr 13 '17 at 13:51

Chandan Gr

9
3

Well, I somehow cannot edit this because the edit is less than 6 characters (thanks SO) but the `` tags you are reffering to are not rendering. – ArchNoob Jul 04 '17 at 03:01

react native - expected a component class, got [object Object]

3 Answers3

Linked