CODEWITHSUNDEEP
javascriptcssreactjs
xiaolingxiao
xiaolingxiao

Reputation: 4895

React-native CSS to make parent container transparent

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.

Upvotes: 2

Views: 4638

Answers (2)

Martijn
Martijn

Reputation: 16103

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).

Upvotes: 4

Jeffraux
Jeffraux

Reputation: 41

Try this:

backgroundColor: 'transparent'

There's a 'transparent' enum for backgroundColor.

Upvotes: 0

Related Questions