CODEWITHSUNDEEP
javascriptiosxcodereactjsreact-native
markthethomas
markthethomas

Reputation: 4431

Trouble requiring image module in React Native

Just getting started with React-Native and I'm having some trouble requiring a static image.

Here's the very-basic code I have so far:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

AppRegistry.registerComponent('buzz', () => buzz);

The main trouble area is:

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

When packaging my app and running it, I get a render error: error image

I understand that you need to add images in xcode as an image set in order for the require call to find the image and have added an image set to that end: bg image

...But to no avail. Anyone have any thoughts? I've read the docs and seem to be doing this in the prescribed way. Thanks!

Upvotes: 46

Views: 42304

Answers (7)

McG
McG

Reputation: 4989

I had similar problem, then renamed the image files in file system under the xcode project's Images.xcassets directories with suffixes and capitalization to match the image I'm loading.

For example, if source={require('image!Villagers')} it required the image files named precisely as Villagers.png, [email protected] and [email protected]. If the '@3x' part of filename wasn't there, the image would not get found.

Upvotes: 31

Анураг Пракаш
Анураг Пракаш

Reputation: 717

For static images, you need to provide the path like: 

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

This worked for me, for the image stored in images folder of project directory:

Upvotes: 0

awmidas
awmidas

Reputation: 683

You can easy to refer the images by making the package.json file in your assets folder.

Project folder structure

package.json

And you can call it by this code.

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>

Upvotes: 1

jlapoutre
jlapoutre

Reputation: 1787

Since React Native release 0.14 the handling of images has been normalized for iOS and Android and is now different. I could not find any documentation except for this very clear commit note on Github: Document new asset system.

There's only a screenshot of the proposed documentation: enter image description here

Update: There is a link now for the real documentation: https://facebook.github.io/react-native/docs/images.html

Upvotes: 45

Hadrien Beaufils
Hadrien Beaufils

Reputation: 41

This question has already been answered, but if you use React Native on Android, you might have that same problem. For me, solution was using source={{ uri: "google", isStatic: true }} instead of source={required('./bg.png')}.

Just don't forget to add your images in src/main/res/drawable folder.

Upvotes: 3

user1813705
user1813705

Reputation: 21

NOTE: App build required for new resources Any time you add a new resource to Images.xcassets you will need to re->build your app through XCode before you can use it - a reload from within >the simulator is not enough. (from React Native docs https://facebook.github.io/react-native/docs/image.html#content)

Also make sure to restart the packager. That solved the issue for me.

Upvotes: 2

tadeuzagallo
tadeuzagallo

Reputation: 2522

What version of React Native are you running? There was an issue with the packager, related to that, that have been solved.

If that's the case, you can either update or run the dev server with:

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

https://github.com/facebook/react-native/issues/282

Upvotes: 4

Related Questions