Remove opacity of a children element

Question

I'm trying to make an overlay View within opacity, and I would like to remove the opacity on a child element see the picture :

<View style={styles.layer} pointerEvents={"none"}>
    <Component {...props}/>
</View>

const styles = StyleSheet.create({
    layer: {
        opacity: 0.5,
        flex: 1
    }
});

I tried to :

Set the children opacity to 1 : No effect,
Set rgba values to parent and children with different alpha value: I lost the opacity on the parent layer

How to handle that

score 0 · Answer 1 · answered Dec 11 '19 at 09:32

0

You cannot make a child element less transparent than the parent, without some trickery:

https://css-tricks.com/almanac/properties/o/opacity/

answered Dec 11 '19 at 09:32

PoseLab

1,733
1
15
19

The things its my children component is a reused component i can't make this trick... – Toto NaBendo Dec 11 '19 at 09:38
The best solution is to use colors with transparency in the different elements of the parent element using rgba. – PoseLab Dec 11 '19 at 11:07
Yes but as mentionned, rgba has no effects on my components... – Toto NaBendo Dec 11 '19 at 14:16

score -1 · Answer 2 · answered Dec 11 '19 at 09:27

-1

please change the style of icon and give opacity to 0

answered Dec 11 '19 at 09:27

savan patel

208
1
5

Remove opacity of a children element

2 Answers2