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

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';