CODEWITHSUNDEEP
react-native
Donovan Juca
Donovan Juca

Reputation: 11

React Native local images shown as a grey background

I haven't added any style to it, this is only happening with local images, if I give it an opacity of 0.2 I can barely see the image but can't make it to be seen properly.

import React from 'react';
import { View, FlatList } from 'react-native';
import { ListItem, Avatar , Image } from 'react-native-elements';


function Menu(props) {

const renderMenuItem = ({ item, index }) => {
    return (
        <ListItem key={index} onPress={() => props.onPress(item.id)}>
            <Avatar rounded source={require('./images/uthapizza.png')} />
            <ListItem.Content>
                <ListItem.Title>{item.name}</ListItem.Title>
                <ListItem.Subtitle>{item.description}</ListItem.Subtitle>
            </ListItem.Content>
        </ListItem>
    );
}

return (
    <View>
        <Image source={require('./images/uthapizza.png')}
        style={{ width: 40, height: 40, opacity: 0.7 }} />
        <FlatList
            keyExtractor={item => item.id.toString()}
            data={props.dishes}
            renderItem={renderMenuItem}
        />
    </View>
)
}

export default Menu;

Upvotes: 1

Views: 1536

Answers (1)

Kakisha
Kakisha

Reputation: 21

Had the same problem and found a (maybe workaround?) solution:

Try to add the attribute placeholderStyle={{ backgroundColor: 'transparent' }} to the Avatar component:

 <Avatar rounded source={require('./images/uthapizza.png')} placeholderStyle={{ backgroundColor: 'transparent' }} />

Working snack: https://snack.expo.io/@lovebytes/confused-pizza

React Native Elements Docs (Avatar Component): https://reactnativeelements.com/docs/avatar/#placeholderstyle

Upvotes: 2

Related Questions