flex box is not working for <Image> in react native android

Question

I just started learning React-Native. I am facing issue while trying to render image on to the screen, it is not appearing. I have tried so many solutions from Google and stack overflow but could not able to solve the issue. Can someone please help me. Below are the details.

I am using RN 0.53.0 for Android with atom editor. Please let me know if you need more details. This is where I am extracting data: http://rallycoding.herokuapp.com/api/music_albums

import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';

const AlbumDetail = ({ album }) => {
    const {
      title,
      artist,
      thumbnail_image,
      image,
      url
    } = album;
    const {
      headerContentStyle,
      thumbnailStyle,
      thumbnailContainerStyle,
      imageStyle
    } = styles;

    return (
      <Card>
        <CardSection>
          <View style={thumbnailContainerStyle}>
            <Image style={thumbnailStyle} source={{ uri: thumbnail_image }} />
          </View>
          <View style={headerContentStyle}>
            <Text style={{ fontSize: 18 }}>{title}</Text>
            <Text>{artist}</Text>
          </View>
        </CardSection>
        <CardSection>
          <View>
            <Image style={imageStyle} source={{ uri: image }} />
          </View>
        </CardSection>
        <CardSection>
          <Button onPress={() => Linking.openURL(url)}>
            Purchase
          </Button>
        </CardSection>
      </Card>
    );
};

const styles = {
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  thumbnailStyle: {
    height: 50,
    width: 50
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 350,
    width: null,
    flex: 1,
    justifyContent: 'center'
  }
};

export default AlbumDetail;

Answer 1

Here is your code :

Please remove View tag from the image

<CardSection>
   <Image style={imageStyle} source={{ uri: image }} />
</CardSection>

stylesheet : for imageStyle

 imageStyle: {
    height: 300,
    width: null,
    flex: 1,
  }

Please check it and let me know if it working or not.

Answer 2

Here:

imageStyle: {
    height: 350,
    width: null,
    flex: 1,
    justifyContent: 'center'
  }

You have set the image width to null. Try setting it to a reasonable value.

Answer 3

You need add the style to Image with height and width. in your code you are not adding the style, try this:

 <Image style={styles.imageStyle} source={{ uri: image }} />

Add too a valid size for height and width when you are using a image from internet.