Why my images from url not appearing in TouchableOpacity-CodePudding

In react-native i am trying to make a scrollview where every element has a title and an image. Because I want to load the image from the url, I wrote the following code:

import {Text, TouchableOpacity,Image } from 'react-native'
import React from 'react'

const CatagoryCard = ({imgUrl,title}) => {
  return (
    <TouchableOpacity>
        <Image
            source = {{uri:imgUrl}}
            resizeMode = 'contain'
            className = "h-20 w-20 rounded flex-2"
        />
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

export default CatagoryCard;

And calling them from another parent component class.

import { View, Text, ScrollView } from 'react-native'
import React from 'react'
import CatagoryCard from './CatagoryCard'

const Catagories = () => {
  return (
    <ScrollView horizontal
    showsVerticalScrollIndicator={false}
    contentContainerStyle={{
      paddingHorizontal:15,
      paddingTop:10
    }}>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 1"/>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 2"/>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 3"/>

    </ScrollView>
  )
}

export default Catagories

The problem is the title are showing perfectly on the view in individual elements but the images are not loading for some unknown reason.

CodePudding user response：

Set size for the image:

<TouchableOpacity>
  <Image
    style={{height: 50, width: 50}}
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
  />
  <Text>Text</Text>
</TouchableOpacity>