Zachary Sattinger
Zachary Sattinger

Reputation: 13

Receiving error message in React Native I cannot figure out

I am currently working on a project in React Native and upon trying to create the first set of screens I began receiving this Error...

"Error: Element 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."

I am not a beginner in React Native, but am also not an expert and this is my first time working on an RN build on my Macbook. I am not sure if there is a typo I have missed somewhere, if my path is not defined correctly, or if I am simply in need of another coffee - either way, I would love another set of eyes on it and any help is greatly appreciated. I will post the code of my Welcome Screen component and App.js below. Aside from the assets, these are the only files I am working on. I will also post a screenshot of my file structure. Thank you again!

import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen';


export default function App() {

  return (
   <WelcomeScreen />
  );

};
import React from 'react';
import { ImageBackgroundComponent, StyleSheet, View } from 'react-native';

function WelcomeScreen(props) {
    return (
        <ImageBackgroundComponent style={styles.background} source={require('../assets/background.jpg')}>
            <View style={styles.loginButton}>

            </View>
        </ImageBackgroundComponent>
    );
}


const styles = StyleSheet.create({
    background: {
        flex: 1,
    },
    loginButton: {
        width: '100%',
        height: 70,
    }
})

export default WelcomeScreen;

File Structure

Upvotes: 1

Views: 185

Answers (1)

Taron Qalashyan
Taron Qalashyan

Reputation: 723

Try to use ImageBackground instead of ImageBackgroundComponent

Upvotes: 2

Related Questions