React Native says files don't exist

Question

So, I'm new to React Native, and I'm trying to build out a basic app, but every time I launch it on my android emulator, I get a syntax error telling me that 'none of these files exist" and it is referring to an image. Here is a screen capture of the emulator, as well as my vs code workspace.

Here is the code if anyone wants to copy it and mess with it.

WelcomeWindow.js:

import React from 'react';
import { ImageBackground } from 'react-native-web';

function WelcomeWindow(props) {
    return (
        <ImageBackground 
        style={styles.background}
        source={require("../assets/background.jpg")}>
            
        </ImageBackground>
    );
}
const styles = StyleSheet.create({
    background: {
        flex: 1,
    }
})

export default WelcomeWindow;

App.js:

import WelcomeWindow from './app/screen/WelcomeWindow';

export default function App() {
  return (
    <WelcomeWindow />
  );
}

I'm certain the path is correct, I'm thinking this is more of a bug somewhere, and I don't really know how to fix it. I've tried looking for a solution, and I've come across a sources saying this is specifically an issue when using android studio, which I am using. Again, I'm not sure about that. If anyone can help me out, it would be greatly appreciated!

Answer 1

I figured out what was going on. For some reason, the automatic import for ImageBackground is from react-native-web.

import React from 'react';
import { ImageBackground } from 'react-native-web';

It should only be react-native.

import React from 'react';
import { ImageBackground } from 'react-native';