I am new to react-native and, I can't display my images

Viewed 40

I'm trying to display an image in my app but I couldn't, the image not displaying and am not seeing any error, Thanks for your help. Here are my code.

This is the file am having all the data for the repositories, and also render the <RepositoryItem> component for each repository.

Main.jsx

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet } from 'react-native';
import RepositoryItem from './RepositoryItem';

const repositories = [
    {
        id: 'jaredpalmer.formik',
        fullName: 'jaredpalmer/formik',
        description: 'Build forms in React, without the tears',
        language: 'TypeScript',
        forksCount: 1589,
        stargazersCount: 21553,
        ratingAverage: 88,
        reviewCount: 4,
        ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/4060187?v=4',
    }
];

const ItemSeparator = () => <View style={styles.separator} />;

const RepositoryList = () => {
    const renderItem = ({item}) => <RepositoryItem item={item} />;
    
    return (
        <SafeAreaView>
        <FlatList
            data={repositories}
            ItemSeparatorComponent={ItemSeparator}
            renderItem={renderItem}
            keyExtractor={item => item.id}
        />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    separator: {
      height: 10,
    },
  });

export default RepositoryList;

And this is the file am displaying the each repository.

Item.jsx

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

const Item = ({ fullName, 
        description, 
        language, 
        forksCount, 
        stargazersCount, 
        ratingAverage,
        ownerAvatarUrl,
        reviewCount }) => (
  <View>
    <Text>Full name: {fullName}</Text>
    <Text>Description: {description}</Text>
    <Text>Language: {language}</Text>
    <Text>Stars: {stargazersCount}</Text>
    <Text>Forks: {forksCount}</Text>
    <Text>Reviews: {reviewCount}</Text>
    <Text>Rating: {ratingAverage}</Text>
    <Image source={{ uri: ownerAvatarUrl }} />
  </View>
);

const RepositoryItem = ({ item }) => {
    return (
      <View>
        <Image ownerAvatarUrl={item.ownerAvatarUrl} />
        <Item
          fullName={item.fullName}
          description={item.description}
          language={item.language}
          stargazersCount={item.stargazersCount}
          forksCount={item.forksCount}
          reviewCount={item.reviewCount}
          ratingAverage={item.ratingAverage}
        />
      </View>
    );
};

export default RepositoryItem;

Thanks for your help

1 Answers

I solve it by making these changes, First I added style to make make the image smaller and some changes. this is the Item.jsx file now.

import React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  tinyLogo: {
    width: 50,
    height: 50,
  }
});
const Item = ({ fullName, 
        description, 
        language, 
        forksCount, 
        stargazersCount, 
        ratingAverage,
        ownerAvatarUrl,
        reviewCount }) => (
  <View>
    <Image
        style={styles.tinyLogo}
        source={{
          uri: ownerAvatarUrl,
        }}
      />
    <Text>Full name: {fullName}</Text>
    <Text>Description: {description}</Text>
    <Text>Language: {language}</Text>
    <Text>Stars: {stargazersCount}</Text>
    <Text>Forks: {forksCount}</Text>
    <Text>Reviews: {reviewCount}</Text>
    <Text>Rating: {ratingAverage}</Text>
  </View>
);

const RepositoryItem = ({ item }) => {
    return (
      <View>
        {/* <Image ownerAvatarUrl={item.ownerAvatarUrl} /> */}
        <Item
          fullName={item.fullName}
          description={item.description}
          language={item.language}
          stargazersCount={item.stargazersCount}
          forksCount={item.forksCount}
          reviewCount={item.reviewCount}
          ratingAverage={item.ratingAverage}
          ownerAvatarUrl={item.ownerAvatarUrl}
        />
      </View>
    );
};

export default RepositoryItem;
Related