React Native Android - Static Resources not Showing

Question

I'm just trying to load an image as a static resource. Here is an example that gives me a blank white screen.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

'use strict';

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

var impowerz = React.createClass({
  displayName : "Login",
  render: function() {
    return (
     <View style={styles.container}>
      <Image source={require('image!bg-splash')} style={styles.bg} />
     </View>
    );
  }
});

var styles = StyleSheet.create({
  bg : {
    height: 667,
    width: 375
  },
  container: {
    flex: 1,
  },
});

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

I checked in Chrome Debugger and this is what I got

[![Chrome Debugger sees my static resource][1]][1]

Edit I wrapped the image tag in a view and added a flex: 1 styles for the container

Update I tried to console.log() the assetsRoot property in react-native/packager/packager.js and it came back as /impowerz/assets/ which is where my image lives. I made a @2x and @3x as suggested [in this answer][2]

I tried using .jpg instead of .png images and tried replacing require('image!bg_splash') with {uri: 'assets/image/bg_splash.jpg'} (with and without the ext).

Answer 1

How did you add "bg-splash" to your android app? It should go under android/app/src/main/res/drawable (or drawable-hdpi, -xhdp etc if you have different version per DPI). Also take into account that android only accept resources names that contain lowercase letters and underscores, so your image name doesn't match that requirement as it contains dash sign.

Answer 2

in react-native v.0.14+

 // same syntax for IOS and Android
 require('./my-icon.png')

Full Image docs here

As of 0.14 release, React Native provides a unified way of managing images in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

 <Image source={require('./my-icon.png')} />

//relative path
.
├── button.js
└── img
   ├── [email protected]
   └── [email protected]