React native set view backgroundColor opacity

Question

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>

Answer 1

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)