How to change Opacity of button in conditional rendering in react native

Question

I am new to react native. I have created a form. in which I am rendering some buttons according to server response. Now I want to set opacity of button 50% means. I want that button should look like its a disabled Now. SO is it possible if yes then please help. thanks. I want to set that opacity in my 1st line of code

here is my code

 {data.bank_account_details_data[0] != null && ( 

              <TouchableOpacity>
                <Card center middle shadow style={styles.category} >
                  OTHER INFORMATION
                  </Text>
                </Card>
              </TouchableOpacity>

              )}

score 0 · Answer 1 · answered Mar 08 '21 at 09:19

0

you can use something like this

<TouchableOpacity 
   // opacity value ranges from 0 to 1
    activeOpacity={0.9}  //opacity for on touch behaviour
    style={{opacity:0.9}} // opacity for view behaviour
    onPress={()=>{
      console.log("i am here")
    }}>
      <Text style={{color:"#FFF"}}>This is opacity check</Text>
    </TouchableOpacity>

instead of static value of opacity you can use state, props or value from backend as a variable as well

answered Mar 08 '21 at 09:19

Imran Shad

58
13

No I Think You not get my point I am saying that look on first line I have added a condition if that condition will true then only set opacity otherwise dont set opacity – Mar 08 '21 at 09:24
Now when my condition is true then my button is hiding. but I dont want that button should hide I just want that opacity has to be decrease – Mar 08 '21 at 09:26

jnpdx · Accepted Answer · 2021-03-08T09:27:42.990

0

You can set the opacity of the TouchableOpacity with a ternary expression (like your first line) based on a condition within the style prop.

Simplified example:

export default function App() {
  const [hasOpacity, setHasOpacity] = React.useState(false)

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => {
        setHasOpacity(!hasOpacity)
      }} 
      activeOpacity={0.2}
      style={{opacity: hasOpacity ? 0.5 : 1.0}}
      >
      <Text>Test</Text></TouchableOpacity>
    </View>
  );
}

https://snack.expo.io/a1Y-TU4XB

In your example, it might look like this:

<TouchableOpacity 
      activeOpacity={0.2}
      style={{opacity: data.bank_account_details_data[0] != null ? 0.5 : 1.0}}
      >

edited Mar 08 '21 at 09:27

answered Mar 08 '21 at 09:20

jnpdx

45,847
6
64
94

No I Think You not get my point I am saying that look on first line I have added a condition if that condition will true then only set opacity otherwise dont set opacity – Mar 08 '21 at 09:24
Now when my condition is true then my button is hiding. but I dont want that button should hide I just want that opacity has to be decrease – Mar 08 '21 at 09:26
1

Right -- so, use that condition where have have `hasOpacity ?`. I'll update my post to show you. – jnpdx Mar 08 '21 at 09:26
Ok fine but Now I want that button should not work until this condition is false. I want that this button will only work when given condition is false – Mar 08 '21 at 09:30
1

Add another prop: `disabled={data.bank_account_details_data[0] != null}` – jnpdx Mar 08 '21 at 09:32

How to change Opacity of button in conditional rendering in react native

2 Answers2