the component for route 'login' must be a react component

Question

I hope all of you are doing well and good. I saw many answers related to this and implemented many answers on my code but seems like nothing worked for me. I keep getting this annoying error. What could be the reason? I am using react-native-router-flux for routing and expo for project.

Login.js

import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import { Actions } from "react-native-router-flux";
import Logo from "../components/Logo";

class Login extends React.Component {
  signup() {
    Actions.signup();
  }

  render() {
    return (
      <View style={styles.container}>
        <Logo />
        <form type="Login" />
        <View style={styles.signupTextCont}>
          <Text style={styles.signupText}>
            You don't have an account yet ?{" "}
          </Text>
          <TouchableOpacity onPress={this.signup}>
            <Text style={styles.signupButton}>Signup</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fbc02d",
    alignItems: "center",
    justifyContent: "center",
  },
  signupTextCont: {
    flex: 1,

    alignItems: "flex-end",
    justifyContent: "center",
    paddingVertical: 16,
    flexDirection: "row",
  },
  signupText: {
    color: "rgba(255,255,255,0.7)",
    fontSize: 16,
  },
  signupButton: {
    color: "#ffffff",
    fontSize: 16,
    fontWeight: "500",
  },
});

export default Login;

Routes.js

import React from "react";

import { Stack, Router, Scene } from "react-native-router-flux";
import Login from "./Login";
import Signup from "./Signup";

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Stack key="root" hideNavBar={true}>
          <Scene key="login" Component={Login} title="Login" />
          <Scene key="signup" Component={Signup} title="Signup" />
        </Stack>
      </Router>
    );
  }
}

export default { Routes };

Please help in this regard as soon as possible because i need to submit it :(

Answer 1

There is a small typo in your code it's component instead of Component.

      <Router>
        <Stack key="root" hideNavBar={true}>
          <Scene key="login" component={Login} title="Login" />
          <Scene key="signup" component={Signup} title="Signup" />
        </Stack>
      </Router>