Why my images from url not appearing in TouchableOpacity

Question

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.

Answer 1

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>