Check the render method of 'customComponent'

Question

I have made a Login page in React Native with React hooks along with redux thunk connect. In that Login Page, i have import a LoginForm as customComponent and I have properly export and import that component.But still it produce Element type error.

LoginPage

import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from "react-native";
import PropsType from "prop-types";
import { connect } from "react-redux";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
import SimpleReactValidator from "simple-react-validator";

import Img from "../../common/Img";
import Loader from "../../common/Loader";
import styles from "../../globalStyle";
import * as theme from "../../theme";
import AxiosInstance from "../../helper/axios.interceptor";
import * as globalHelper from "../../helper/globalHelper";

import { setAuth } from "../../store/auth/auth.action";
import LoginForm from "./Component/LoginForm";

const { height } = Dimensions.get("screen");

const propsType = {
  authAction: PropsType.func,
};

let request = { type: "mobile" };
const validator = new SimpleReactValidator();

const SignIn = ({ navigation, authAction }) => {
  const [errors, setErrors] = useState({});

  const [state, setState] = useState({ loader: false }),
    updateState = (key, value) => {
      setState((preState) => ({
        ...preState,
        [key]: value,
      }));
    },
    openLoader = (val) => {
      updateState("loader", val);
    };

  const submit = async () => {
    try {
      openLoader(true);
      let body = {
        type: "mobile",
        userName: request.userName,
        password: request.password,
      };
      console.log("body", body);
      const response = await AxiosInstance.post("auth/login", body);
      console.log("loginresponse...", response);
      if (response.status) {
        await globalHelper.setAsyncStore("user", response);
        await globalHelper.setAsyncStore(
          "userpermission",
          response.data.permissionJson
        );
        authAction(response);
        navigation.replace("AppNavigation");
      }
      openLoader(false);
    } catch (err) {
      openLoader(false);
      console.log("login error", err);
    }
  };
  //
  const ForgotPassword = () => (
    <TouchableOpacity
      onPress={() => {
        validator.hideMessages();
        setErrors("");
        navigation.push("ForgotPassword");
      }}
    >
      <Text style={[localStyle.forgotText]}>Forgot Password?</Text>
    </TouchableOpacity>
  );

  return (
    <>
      <KeyboardAwareScrollView>
        <View style={[styles.flexCenter, { height }]}>
          <Img
            src={require("../../assets/logo/logoNew.png")}
            style={{ width: 237, height: 250, marginBottom: -20 }}
            resizeMode="contain"
          />
          <View style={localStyle.authButton}>
            <LoginForm
              validator={validator}
              onTextChanging={(data) => {
                request = { ...request, ...data };
              }}
              onSubmit={() => {
                submit();
              }}
              errors={errors}
              setErrors={setErrors}
            />
          </View>
          <View style={[styles.flexCenter]}>
            <ForgotPassword />
          </View>
        </View>
      </KeyboardAwareScrollView>
      {state.loader && <Loader />}
    </>
  );
};
const { color } = theme;

const localStyle = StyleSheet.create({
  authButton: {
    width: "80%",
    borderRadius: 5,
  },
  forgotText: {
    marginTop: 20,
    color: color.hashTextColor,
  },
});

SignIn.propsType = propsType;

const mapDispatchToProps = {
  authAction: setAuth,
};

export default connect(null, mapDispatchToProps)(SignIn);

and the customComponent LoginForm as

import React, { useState, useEffect, useRef } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
} from "react-native";
import { Form, Icon } from "native-base";
import PropsType from "prop-types";
import { has } from "lodash";

import RegularInput from "../../../common/Input";
import styles from "../../../globalStyle";
import AuthButton from "../../../common/Button/AuthButton";

const propsType = {
  onTextChanging: PropsType.func.isRequired,
  onSubmit: PropsType.func.isRequired,
};

// const validator = new SimpleReactValidator();

const LoginForm = ({
  onTextChanging,
  onSubmit,
  validator,
  errors,
  setErrors,
}) => {
  const [model, setModel] = useState({ focus: "username", secured: true });
  const isValid = (key) => !!(has(errors, key) && errors[key]);
  const [state, setState] = useState({
    userName: "",
    password: "",
  });
  const secondTextInput = useRef(null);
  
  useEffect(() => {
    onTextChanging(state);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state]);

  const updateState = (key, value) => {
    setState((preState) => ({
      ...preState,
      [key]: value,
    }));
  };

  const submit = () => {
    if (validator.allValid()) {
      onSubmit();
    } else {
      console.log("getErrorMessages");
      setErrors(validator.getErrorMessages());
      validator.showMessages();
    }
  };

  return (
    <ScrollView keyboardShouldPersistTaps="handled">
      <Form style={[styles.top50, { width: "100%" }]}>
        <View style={{ width: "100%", paddingBottom: 15 }}>
          <RegularInput
            title="Email"
            value={state.userName}
            attri="userName"
            placeHolder={"Email"}
            keyboardType="ascii-capable"
            updateStateFunc={updateState}
            error={isValid("Username")}
            isFocus={model.focus === "username"}
            onFocusFun={() => setModel({ focus: "username" })}
            otherProps={{
              onSubmitEditing: () => {
                console.log(secondTextInput);
                secondTextInput.current.focus();
              },
              blurOnSubmit: false,
            }}
          />
        </View>
        {!!validator.message("Email", state.userName, "email") && (
          <Text style={[styles.error]}>
            {validator.message("Email", state.userName, "email")}
          </Text>
        )}

        <View
          style={[
            styles.flexCenter,
            styles.flexRow,
            localStyle.absoluteContainer,
          ]}
        >
          <RegularInput
            reff={secondTextInput}
            title="Password"
            value={state.password}
            attri="password"
            placeHolder={"Password"}
            updateStateFunc={updateState}
            dataDetectorTypes="phoneNumber"
            secureTextEntry={!state.secured}
            error={isValid("Password")}
            isFocus={model.focus === "password"}
            onFocusFun={() => setModel({ focus: "password" })}
          />
          <TouchableOpacity
            style={localStyle.eyeIcon}
            onPress={() => {
              updateState("secured", !state.secured);
            }}
          >
            {state.secured && (
              <Icon style={{ fontSize: 16 }} name="eye" type="Entypo" />
            )}
            {!state.secured && (
              <Icon
                style={{ fontSize: 16 }}
                name="eye-with-line"
                type="Entypo"
              />
            )}
          </TouchableOpacity>
        </View>

        {!!validator.message("Password", state.password, "required") && (
          <Text style={[styles.error]}>
            {validator.message("Password", state.password, "required")}
          </Text>
        )}

        <View style={[styles.flexCenter, localStyle.authButton]}>
          <AuthButton title="LOGIN" onPress={() => submit()} />
        </View>
      </Form>
    </ScrollView>
  );
};

const localStyle = StyleSheet.create({
  authButton: {
    marginTop: 10,
    borderRadius: 5,
  },
  inputStyle: {
    height: 40,
    borderColor: "gray",
    borderBottomWidth: 1,
  },
  absoluteContainer: {
    position: "relative",
    overflow: "hidden",
    width: "100%",
  },
  eyeIcon: {
    position: "absolute",
    // right: 0,
    width: 25,
    height: 25,
    elevation: 999,
    zIndex: 999,
    top: 42,
    right: 5,
  },
});

LoginForm.propsType = propsType;

export default LoginForm;

I have tried import LoginForm from "./Component/LoginForm"; as import {LoginForm} from "./Component/LoginForm"; It produce check the render method of SignIn and also use connect in LoginForm, export default connect(null, null)(LoginForm); but it gives same error. I don't know what mistake i have made.unable to find any cause. Thanks in advance

Element type Error