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