CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativeexpo
MartynBrzoz
MartynBrzoz

Reputation: 101

React and Typescript, Warning: React.createElement: type is invalid -- expected a string but got: undefined

I have project in react which was recently rewritten to typescript. Now, after modifications, when I want to add one component I recived an error:

"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

This is my index.tsx

import React from "react";
import { Text, Alert } from "react-native";
import Screen from "../../components/Screen";
import FormField from "../../components/InputText";
import { Formik as FormComponent } from "formik";
import SubmitButton from "../../components/buttons/SubmitButton";

import ImagePicker  from "../../components/forms/ImagePickerForm";



const AddItem = () => {
  return (
    <ScrollView>
      <Screen>
        <ImagePicker />

        <FormComponent
          initialValues={{ title: "", description: "", category: "", images: [] }}
          onSubmit={(values) => Alert.alert("Correct!")} //{(values) => console.log(values)}
          validationSchema={validationSchema}
        >
          {({ handleChange, errors }) => (
            <>

              {/*<Text>{errors.category}</Text>*/}

              <FormField
                name="title"
                placeholder="title"
                onChangeText={handleChange("title")}
                style={{ width: "100%", flex: 1 }}
                maxLength={70}
                multiline
                width={100}
              ></FormField>

              <Text>{errors.title}</Text>

          

              <SubmitButton title="Add item" />
            </>
          )}
        </FormComponent>
      </Screen>
    </ScrollView>
  );
};



export default AddItem;

And this is component which Im trying to add to my index.tsx as <ImagePicker/>

import React, { useState } from "react";
import * as ImagePicker from 'expo-image-picker';

import ImageInput from "../ImageInput";


const PickImage: React.FC<{}> = () => {
  const [imageUri, setImageUri] = useState();

  const selectImage = async () => {
    try {
      const result: any = await ImagePicker.launchImageLibraryAsync();
      if (!result.cancelled) setImageUri(result.uri);
    } catch (error) {
      console.log("something went wrong");
    }
  };
  return <ImageInput imageUri={imageUri} onChangeImage={(uri) => setImageUri(uri)} />;
}

export default ImagePicker;

Any idea why I recived an error? I will be greatfull for help with this issue

Upvotes: 0

Views: 235

Answers (2)

user3812411
user3812411

Reputation: 352

When you're exporting ImagePicker, it's using ImagePicker from "expo-image-picker". You need to export default PickImage.

Upvotes: 3

helrabelo
helrabelo

Reputation: 551

You are exporting by default ImagePicker instead of PickImage

Upvotes: 2

Related Questions