Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

add background color to thumbnail

$
0
0

I am using a thumbnail where the cross is transparent and takes the background color of the main container. I want the cross to be white.

export const FriendDetailsScreen: React.FunctionComponent = () => {  const navigation = useNavigation();  return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.iconsContainer}><TouchableOpacity          style={styles.cross}><Thumbnail            source={{              uri:'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',            }}          /></TouchableOpacity></View></View></SafeAreaView>  );};export const styles = StyleSheet.create({  safeAreaViewContainer: {    flex: 1,  },  container: {    backgroundColor: '#323443',    flex: 1,  },cross: {    paddingTop: moderateScale(30),    paddingLeft: moderateScale(20),    zIndex: 100,  },});

If I add a background color to cross or the TouchableOpacity a block of white appears which goes beyond the thumbnail. How else can I achieve this?

Thumbnail:https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png

If I add a style to the thumbnail itself:

  thumbnail:{    backgroundColor: 'white',  }

I get this, and this is not what I want. I don't want the border outline.enter image description here


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>