Search code examples
react-nativeimporterror

Formic Component causing 'Error:Element type is invalid'. Unable to determine the cause

I am trying to build a form using Formic in my React Native App

Here is the relevant code:

import other stuff
import {Formic} from 'formic'



const ReviewForm = () => (
    <View style={globalStyles.container}>
        <Formic >     
           <Text>Formic Content</Text>
        </Formic>
    </View>
)

export default ReviewForm

Doing So is causing the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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.

Check the render method of 'ReviewForm'.

I tried various possibilities that may be causing the error. Turns out the does not occur if I comment out the tags, i.e.

const ReviewForm = () => (
    <View style={globalStyles.container}>
        {/*<Formic > */}    
           <Text>Formic Content</Text>
        {/*</Formic>*/}
    </View>
)

this works perfectly fine.

what could be causing this? Could you please help. Dependencies in package.json:*

"dependencies": {
    "@expo-google-fonts/inter": "^0.1.0",

    "@expo-google-fonts/lobster": "^0.1.0",

    "@react-native-community/masked-view": "^0.1.10",

    "@react-navigation/drawer": "^5.9.0",

    "@react-navigation/native": "^5.7.3",

    "@react-navigation/stack": "^5.9.0",

    "expo": "~38.0.8",

    "expo-font": "~8.2.1",

    "expo-status-bar": "^1.0.2",

    "formic": "0.0.10",

    "install": "^0.13.0",

    "node-fetch": "^2.6.1",

    "react": "~16.11.0",

    "react-dom": "~16.11.0",

    "react-native": "https://github.com/expo/react-native/archive
/sdk-38.0.2.tar.gz",

    "react-native-gesture-handler": "~1.6.0",

    "react-native-paper": "4.0.0-alpha.1",

    "react-native-reanimated": "~1.9.0",

    "react-native-safe-area-context": "^3.1.7",

    "react-native-screens": "^2.10.1",

    "react-native-web": "~0.11.7",

    "react-navigation": "^4.4.0",

    "react-navigation-stack": "^2.8.2"
  },
Solution

  • I think you're looking for Formik not Formic.

    This is the one you're looking for -> https://github.com/formium/formik