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

Thumbnail's background color

$
0
0

I am using a Thumbnail. In the iconfinder image, the cross is transparent and takes the background color of the main container.

I want the cross to be white and the surrounding to be black.

export const Screen: React.FunctionComponent = () => {  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?

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

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


Viewing all articles
Browse latest Browse all 6214

Trending Articles



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