How to add a background image with this template?

[AmandineScopely]

Hi! Thanks a lot for your template. I am a beginner React Native developer and am already learning a lot!

I would like my index page to have a background image. How could I add this? I currently have my image in the ./assets directory but this folder is not inside the ./src directory and my image is not available in the build.

I've read this documentation but I don't have any URI for my file, I have a physical .jpg image. Also, I was using the component from react-native before migrating to this template. What is the best approach?

This is my old code:

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

import { FocusAwareStatusBar, Text, View } from '@/components/ui';
import image from '../assets/image.jpg';

export default function App() {
return (
    <View className='flex-1'>
        <FocusAwareStatusBar />
        <ImageBackground source={image} resizeMode='cover' className='flex-1'>
            <SafeAreaView className='relative h-full text-center'>
                {/* page content ... */}
            </SafeAreaView>
        </ImageBackground>
    </View>
  )
};

Also, what does the component doing?

Thank you!

[hamzamekk]

Hi! @AmandineScopely Thank you for using the template and sharing your question. I'm glad to hear you're learning a lot already!

To address your issue, since you’re using a physical .jpg file located in the ./assets directory, the best way to load it is by using the require function. This is necessary because static assets like images need to be bundled into your project.

Here’s how you can adjust your code:

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

import { FocusAwareStatusBar, Text, View } from '@/components/ui';

export default function App() {
  return (
    <View className="flex-1">
      <FocusAwareStatusBar />
      <ImageBackground
        source={require('../assets/image.jpg')} // Use require here
        resizeMode="cover"
        className="flex-1"
      >
        <SafeAreaView className="relative h-full text-center">
          {/* page content ... */}
        </SafeAreaView>
      </ImageBackground>
    </View>
  );
}

Why require?
The require function ensures that the bundler (Metro) knows to include the image in the build. This is necessary for static assets because Metro doesn’t automatically include files from the file system unless explicitly referenced.