React-native CSS to make parent container transparent

Question

I am making an app whose footer is very much like that of Snapchat in that there's three icons that's opaque to the content below, but container is transparent. The effect should be similar to what's asked here w/ web css : How to make parent transparent but not the child?. My current footer is as follows:

        <View style={appFooter.container}>
            <Grid>

                <Col size={17} > </Col>

                <Col size={22} style={feedItem.centerItems}>
                    <Profile active={onProfile}/>
                </Col>

                <Col size={22} style={feedItem.centerItems} >
                    <Spice active={onFire} />
                </Col>

                <Col size={22} style={feedItem.centerItems}>
                    <News active={onNews} />
                </Col>

                <Col size={17} > </Col>

            </Grid>
        </View>

where the css is:

container : {

      position: 'absolute'
    , bottom  : 0
    , left    : 0
    , right   : 0
    , height  : 50

    // , backgroundColor: 'rgba(0,0,0,0.1)'
     // '#00000000'
    , opacity : 0.8


    , flexDirection  : 'column'
    , justifyContent : 'center'
    , alignItems     : 'center'

},

As you can see in the comments, I have tried the solution rgba(...) but it does not give me the effect I want. Right now the opacity: 0.8 solution gives me a footer container and its children with 0.8 opacity. However ideally only the footer is transparent. The three children icons are opaque.

why doesnt the RGBA work for you, because that is the solution? Can you make an example of the intended result then? — Martijn, Jul 19 '18 at 11:43

Martijn · Accepted Answer · 2023-06-19T07:07:10.393

You cant do it as your try. When you set a component to 80% opacity, it and it's children have a maximum of 80%. Children can not ever go higher than that 80%.

The solution lies in your commented attempt. Often people want the background transparant, which is where then rgba() comes into play. Use that to set your transparency.

Possible solutions for making things transparant are:

Using opacity, which will also fade all it's children with it
Use rgba() and set the alpha to the desired opacity
Using semi-transparant images as background
Positioning an absolute div in the element you want to be affected (which should be relative and transparant).

score 0 · Answer 2 · answered Jul 19 '18 at 03:46

0

Try this:

backgroundColor: 'transparent'

There's a 'transparent' enum for backgroundColor.

answered Jul 19 '18 at 03:46

Jeffraux

31
2

React-native CSS to make parent container transparent

2 Answers2