Picture doesn't display in react native (Android)

Question

I just have started to learn React Native, and I'm following official tutorial, both in my emulator and phone (Android), image doesn't appear, just empty white screen. So my question, why it doesn't displayed on the screen? P.S: internet connection works fine.

import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <Image source={pic} style={{width: 193, height: 110}}/> ); } } AppRegistry.registerComponent('Bananas', () => Bananas);

Matt Aft · Accepted Answer · 2017-03-13 20:11:58Z

You're doing the Image part correctly, I believe you just need to wrap it in a view.

import React, { Component } from 'react'; import { AppRegistry, Image, View } from 'react-native'; class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <View style={{flex: 1}}> <Image source={pic} style={{width: 193, height: 110}}/> </View> ); } } AppRegistry.registerComponent('Bananas', () => Bananas);

Thanks, now it works! it seems that there should be added import of the View, in that case!

Collectives™ on Stack Overflow

Picture doesn't display in react native (Android)

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related