React native set view backgroundColor opacity-CodePudding

I have a view that I would like to set the background opacity to 0.5 however I need the text component inside of the view to show completely (as if its opacity was 1)

<View
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          backgroundColor: 'white',
          opacity: 0.5,
          borderRadius: 5,
        }}>
        <Paragraph>folder</Paragraph>
      </View>

CodePudding user response：

I've found that the most straighforward way of reaching this desired outcome is to specify that you want the backgroundColor to have this specific opacity, and not the entire View element. Check the 'Opacity' section of this page for more info: https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA color values are an,and 1.0 (fully opaque)

For example, if you want to have a green background, with an opacity of 0.5, you would want to set

backgroundColor: rgba(0, 255, 0, 0.5)

CodePudding user response：

If you want the text folder to be less opaque, then you will have to apply styling directly to it, while keeping its parent's opacity as desired -

<View
  style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    backgroundColor: 'white',
    opacity: 0.5,
    borderRadius: 5,
  }}>
  <Paragraph>
    <span style={{ opacity: 1 }}>
      folder
    </span>
  </Paragraph>
</View>

You can also try setting the backgroundColor with an opacity attached directly to it -

backgroundColor: rgb(0, 0, 0, 0.5)