Fix empty images explore

This commit is contained in:
Maarten 2024-08-09 14:17:31 +02:00
parent 77b118b9e1
commit 967cb7a60f

View file

@ -68,7 +68,7 @@ export default function ExploreScreen() {
// View item in sub screen
const viewItem = async (item: any) => {
store.dispatch(setViewCategory(item));
store.dispatch( setViewCategory( item ) );
router.push( '/(explore)/category' );
};
@ -116,7 +116,14 @@ export default function ExploreScreen() {
data={types}
renderItem={(item: any, index: any) => (
<TouchableOpacity style={styles.listItem} key={index} onPress={() => viewItem( item )}>
{item.image != null ?
(
<Image source={{ uri: item.image }} style={styles.listImage}/>
) :
(
<ThemedView style={styles.listImage}/>
)
}
<ThemedText type="defaultSemiBold">{item.name}</ThemedText>
</TouchableOpacity>
)}
@ -129,15 +136,19 @@ export default function ExploreScreen() {
<ThemedView style={{ ...styles.modalView, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedText type="subtitle" style={{ marginBottom: 30, textAlign: 'center' }}>{activeCategory?.name}</ThemedText>
<View style={styles.modalType}>
<Image source={{ uri: activeCategory?.type.image }} style={styles.modalTypeImage}/>
<ThemedText>{activeCategory?.type?.name}</ThemedText>
</View>
{activeCategory?.type &&
<ThemedView style={styles.modalType}>
{activeCategory?.type?.image &&
<Image source={{ uri: activeCategory?.type?.image }} style={styles.modalTypeImage}/>
}
<ThemedText type="defaultSemiBold">{activeCategory?.type?.name}</ThemedText>
</ThemedView>
}
<View style={{ alignItems: 'center' }}>
<ThemedText type="defaultSemiBold">Opmerking:</ThemedText>
<ThemedView style={{ alignItems: 'center' }}>
<ThemedText type="defaultSemiBold">Beschrijving:</ThemedText>
<ThemedText>{activeCategory?.description}</ThemedText>
</View>
</ThemedView>
<TouchableOpacity
onPress={() => setActiveCategory( null )}
@ -196,13 +207,11 @@ const styles = StyleSheet.create( {
textAlign: 'center',
},
modalType: {
flex: 1,
display: 'flex',
gap: 8,
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 10,
marginBottom: 30,
marginBottom: 15,
},
modalTypeImage: {
width: 40,