Изображения из медиафайла не отображаются в React Native

Я хочу отобразить изображение на моем компоненте React Native Post.js, но оно просто показывает белый цвет, занимая пространство стиля, который я сделал для изображения

settings.py

STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'static'
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media' 

models.py

from django.db import models
from django.conf import settings


class Item(models.Model):
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='items')
    name = models.CharField(max_length=100)
    description = models.TextField()
    category = models.CharField(max_length=50, choices=[
        ('electronics', 'Electronics'),
        ('furniture', 'Furniture'),
        ('clothing', 'Clothing'),
        ('appliances', 'Appliances'),
        ('books', 'Books'),
        ('other', 'Other'),
    ])
    condition = models.CharField(max_length=50, choices=[
        ('new', 'New'),
        ('like_new', 'Like New'),
        ('used', 'Used'),
    ])
    image = models.ImageField(upload_to='item_images', blank=True, null=True)
    available = models.BooleanField(default=True)
    created_at = models.DateTimeField(auto_now_add=True)
    reserved = models.BooleanField(default=False)
    reserved_by = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='reserved_items', null=True, blank=True)


    

Post.js

Profile.js, где я отображаю пост внутри Flatlist

const ProfileScreen = () => {
  const [listing, setListing] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  const dispatch = useDispatch();
  const getUserListings = async () => {
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));

    try {
      const refresh = await authentication.refresh();
      const response = await authentication.userListing();
      dispatch(refreshToken(refresh));
      setListing(response);
    } catch (error) {
      console.error("Error fetching listings:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const onRefresh = () => {
    setRefreshing(true);
    getUserListings().then(() => {
      setRefreshing(false);
    });
  };

  useEffect(() => {
    getUserListings();
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={[COLORS.junkFree]}
          />
        }
        showsVerticalScrollIndicator={false}
        data={listing}
        renderItem={({ item }) => <Post listing={item} />}
        keyExtractor={(listing) => listing.id.toString()}
        ListEmptyComponent={
          isLoading ? (
            <ActivityIndicator size="large" color={COLORS.junkFree} />
          ) : (
            <Text>No Listing Found</Text>
          )
        }
        ListHeaderComponent={ProfileScreenHeader}
        style={{
          backgroundColor: "#F0F4F8",
        }}
      />
    </SafeAreaView>
  );
};

export default ProfileScreen;

Я хочу, чтобы он динамически отображал изображение, если listing.image не является null, но он не хочет, пожалуйста, помогите

Чтобы отобразить изображение внутри компонента Post.js

Вернуться на верх