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.