3

So I have drawer which has background black with opacity 0.5 , it works fine.I can see transparency.Now problem is even the button is having opacity which I dont want , how to reset its opacity to 1 ?I tried RGBA , still opacity is not resetting in react native.

  <View style={{backgroundColor:'black',opacity:0.5,height:'100%'}}>

            <Button backgroundColor:'black',opacity:1>
              <Text>Click here </Text>
            </Button>

     </View>
Vishnu
  • 2,372
  • 6
  • 36
  • 58
  • Try using an [8 digit hex code](https://stackoverflow.com/questions/15852122/hex-transparency-in-colors) for you background color and remove opacity and see if that works. ` – alexdriedger Aug 20 '17 at 19:54
  • @alexdriedger : works mate , thanks – Vishnu Aug 20 '17 at 20:36

2 Answers2

7

Use an 8 digit hex code for your background color and remove opacity.

<View style={{ backgroundColor: '#80000000, height: '100%'}}>
alexdriedger
  • 2,884
  • 2
  • 23
  • 30
3

`Try to use a lighter background color and skip setting opacity altogether. Like so,

  <View style={{backgroundColor:'#111',height:'100%'}}>

            <Button backgroundColor:'black'>
              <Text>Click here </Text>
            </Button>

     </View>

Edited answer I noticed that you are using Button. Better use TouchableOpacity or other touchables which are customizable using styles. You can try setting the background color using the rgba property like so,

backgroundColor:'rgba(0,0,0,0.6)'

In your context, it would look like

  <View style={{backgroundColor:'rgba(0,0,0,0.4)',height:'100%'}}>
            <Button backgroundColor:'rgba(0,0,0,1)'>
              <Text>Click here </Text>
            </Button>
  </View>

Snack

GulshanZealous
  • 638
  • 8
  • 9