Android emulator error--Expected a component class got [object,object]

Question

React-native throwing this weird exception even though code seems to be accurate. I'm using react-native 0.48.

Enclosing index.js and login.js source code

Login.js

import React, { Component } from "react";
import {
  AppRegistry,
  Text,
  View,
  TouchableOpacity,
  Label,
  TextInput
} from "react-native";
import { StackNavigator } from "react-navigation";
class LoginPage extends Component {
  constructor(props) {
    super(props);
  }

  render(){
   // const { navigate } = this.props.navigation;
    return(
      <View>
        <Label Text="Login" />
        <TextInput placeholder="UserName" />
        <TextInput placeholder="Password" />
        <TouchableOpacity Text="Login" />
      </View>
    );
  }
}

export default LoginPage;

Index.js

//Root Component

import React, { Component } from "react";
import { AppRegistry, View, Text } from "react-native";
import Root from "./config/router.js";
import LoginPage from './components/user/Login';
 class App extends React.Component {
  render() {
    return (

      <View>
        <LoginPage />
        <Text>this is index component </Text>
      </View>
    );
  }
}

export default App;

Even i have see stackoverflow questions related to this issue StackOverflow .. Stilll i cant able to figure out the issue.

router.js

//Screen router
import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import LoginPage from "../components/user/Login";
import Register from "../components/user/Register";
//import App from "../index";

export const Root = StackNavigator({
  login: { screen: LoginPage },
  Register:{screen:Register}
});

score 0 · Answer 1 · answered Sep 28 '17 at 05:32

0

you cannot use first letter as a small latter for your component if you are importing or using it.first Latter of Component must be a upper Case otherwise you will get this error

    <label Text="Login" /> //invalid
<Label Text="Login" />  //Valid

answered Sep 28 '17 at 05:32

hitendra Savkare

47
5

Now its rendering 'Expected a string or class/function but got undefined. ' Updating my question with router.js file tooo – Kartiikeya Sep 28 '17 at 06:58
its because of Label is not a part of react-native if you want to use a Label then use native-base, to use native-base fire command "npm install native-base --save" and then import Label from it – hitendra Savkare Sep 28 '17 at 07:00
Removed Label from all files. still showing this error 'Expected a string or class/function but got undefined. You likely forget to export your component from the file its defined in . check the render method of app' – Kartiikeya Sep 28 '17 at 07:02
to avoid confusion rename Your Login.js with LoginPage.js, and try, dont change any other things in code – hitendra Savkare Sep 28 '17 at 07:10
changed. Still same issue. Is code in LoginPage error free – Kartiikeya Sep 28 '17 at 07:14
have you change import LoginPage from "../components/user/Login" to import LoginPage from "../components/user/LoginPage" in router and index file? – hitendra Savkare Sep 28 '17 at 07:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155484/discussion-between-kartiikeya-baleneni-and-hitendra). – Kartiikeya Sep 28 '17 at 07:17
Changed. Same issue – Kartiikeya Sep 28 '17 at 07:23

Android emulator error--Expected a component class got [object,object]

1 Answers1