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.
Thumbnail:https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png