Question 33705 in React native Question posted in
The official React Native documentation can be found here.

Why my images from url not appearing in TouchableOpacity – React native

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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Use this it worked for me,

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

const CategoryCard = ({imgUrl, title}) => {
  return (
    <TouchableOpacity className="mr-2 relative">
        <Image style={{height: 50, width: 50}} source= {{ uri: imgUrl }} />
      <Text className="bottom-1 left-1 absolute">{title}</Text>
    </TouchableOpacity>
  )
}

export default CategoryCard

    I think there is some problem with the tailwind css

    Login or Signup to reply.
  3. 0

    For me wrapping it with a View component works for me. Also make sure that your UI folders are listed in the tailwind config file.

        return (
        <TouchableOpacity>
            <View>
                <Image
                    className="h-20 w-20 rounded"
                    source={{
                        uri: imgUrl,
                    }}
                />
            </View>
            <Text>{title}</Text>
        </TouchableOpacity>
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search