CODEWITHSUNDEEP
reactjsreact-native
ladder
ladder

Reputation: 249

Image not rendering but works on React Native Web Player

This exact code works fine on the React Native Web Player in the code sample here: https://facebook.github.io/react-native/docs/props.html

But after running "react-native run-android", the app loads on my phone with all the text but not the image. There's a big gap where the image should be but not an image! The image renders fine on the Web Player so I'm wondering if this is an issue in how the app is getting packaged?

The code in App.js

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

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  AppRegistry
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {
  render() {

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    }

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Image source={pic} style={styles.image} />
        <Text style={styles.instructions}>
          {instructions}
        </Text>

      </View>
    );
  }
}

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


const styles = StyleSheet.create({
  image: {
    flex: 1,
    height: null,
    width: null,
    resizeMode: 'cover'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Upvotes: 3

Views: 643

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

Since you're already doing

justifyContent: 'center',
    alignItems: 'center',

in your parent container styles , you're restricting the dimensions of the image.

Either remove it , or supply a width to the image as

const {width, height} = Dimensions.get('window')

image: {
        flex: 1,
        width,
        resizeMode: 'cover'
    }

Upvotes: 1

Related Questions