CODEWITHSUNDEEP
iosreact-native
user2026178
user2026178

Reputation: 318

Using React Native, I get an error when I try to use a background image

I believe it may be something to do with where I have stored my images. They can be found in the ../ProjectName/img/fileName.png Is there anything I need to do to load the files so they can be reached? 

 <View style={styles.container}>
                <HomeHeaderTitle isHomePage={true}/>
                <View style={styles.quoteContainer}>
                  <Image source={require('../../img/backgroundQuote3.png')} />
                </View>
            </View>

When I add the above to my code, it gives me this error:

enter image description here

react-native-cli: 2.0.1
react-native: 0.39.0

Upvotes: 0

Views: 125

Answers (3)

Hiren Vaghela
Hiren Vaghela

Reputation: 932

it is very easy to do create custom control and use it. in custom control use 

import React from 'react'
import { View } from 'react-native'

const ParentView = (props) => {
  return (
    <Image source={require('../img/background_image.png')}>
      {props.children}
    </Image>
  );
};
export {ParentView}

Upvotes: 0

nahoang
nahoang

Reputation: 2474

I saw your problem. Should you read your source image in one level?

For example: 

<Image source={require('../img/backgroundQuote3.png')} />

Additionally, when you want use background image , should you use element is parent view ?.

For example:

 <Image source={require('../img/backgroundQuote3.png')}> 
    <View>
    </View>
</Image>

Cheer!,

PS: dont forget to vote!

Upvotes: 2

Kevin Velasco
Kevin Velasco

Reputation: 4944

Give this a go:

assuming you have some js file in a project:

project/src/components/someComponent.js

and some static file with path

project/src/static/someStatic.png

Import and use it like this: 

import someStatic from 'project/src/static/someStatic.png'
...
<Image source={someStatic} />

This eliminates the ../.. ambiguity of relative addressing.

just makes sure that the project name is the same as the registered name

AppRegistry.registerComponent('project', () => App);

Upvotes: 0

Related Questions