Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object – React Native error. How to fix?
When you import a React component into another component, you should always use the exported class name of a component. If you don’t, it would throw the error – Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
Advertisements
For example, let’s take a react component written in a file StaticScreen.js.
import React from 'react'; import { View, StyleSheet, Image} from 'react-native'; export const StaticScreen = () => { return ( <View style={styles.container}> <Image style={styles.stretch} source={require('../assets/staticscreen.png')} /> </View> ); };
When you try to import the component above into another component..
import {staticScreen} from './StaticScreen';
This would throw an error because staticScreen doesn’t match with the exported component name StaticScreen.
It should be
import {StaticScreen} from './StaticScreen';