I can’t load the image on the carousel

Question

I have a home screen with a carousel, where each item has a title and an image, however the image does not render at all, only the title. I’m not able to identify why this is happening, since the image URL is correct.

Home

import React, { Component } from "react";
import styles from "./styles";

import {
   View, 
   Text,
   Dimensions,
   Image
} from "react-native";

import {
   NavigationParams,
   NavigationScreenProp,
   NavigationState
} from 'react-navigation';

import Carousel from "react-native-snap-carousel";
import { ScrollView } from "react-native-gesture-handler";

const primeiroItem = 1;

const dados = [
{
    title: 'Beautiful and dramatic Antelope Canyon',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
    illustration: 'https://i.imgur.com/UYiroysl.jpg'
},
{
    title: 'Earlier this morning, NYC',
    subtitle: 'Lorem ipsum dolor sit amet',
    illustration: 'https://i.imgur.com/UPrs1EWl.jpg'
},
{
    title: 'White Pocket Sunset',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
    illustration: 'https://i.imgur.com/MABUbpDl.jpg'
},
]

const width = Dimensions.get("screen").width;

interface Props {
    navigation: NavigationScreenProp<NavigationState, NavigationParams>;
 }

export default class Home extends Component<Props> {
constructor(props: any) {
    super(props);

    this.state = {
        slider1ActiveSlide: primeiroItem
    };
}

_renderItem ({item, index}) {
    return (
        <View>
            <Image
                source={{ uri: item.illustration }}
            />
            <Text>{ item.title }</Text>
        </View>
    );
  }

render() {
    return(
        <ScrollView>
                <Carousel
                    data={dados}
                    renderItem={this._renderItem}
                    sliderWidth={width}
                    itemWidth={width}
                    autoplay={true}
                    autoplayDelay={500}
                    autoplayInterval={3000}
                    firstItem={primeiroItem}
                    onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index }) }
                />
        </ScrollView>
    )
}

Answer 1

The solution to your problem is simple. Images without the width specification width and height height are not shown by React Native, that is, whenever the <Image/> we have to set your size.

Changing the code, we just change it:

_renderItem ({item, index}) {
    return (
        <View>
            <Image
                source={{ uri: item.illustration }}
            />
            <Text>{ item.title }</Text>
        </View>
    );
}

For:

 _renderItem({ item, index }) {
     return (
         <View>
             <Image 
                 source={{ uri: item.illustration }} 
                 style={{ width: 300, height: 300}} />
             <Text>{item.title}</Text>
         </View>
     );
 }

Note: Based on you want to use a standard size of 300x300 for all images.

The measures may be used in any way necessary. More about the Image component.

Tip: For the image to be better resized in the space you want to embed it, use the method resizeMode which determines how to resize the image when the space does not match the image size.

Solution link