CODEWITHSUNDEEP
reactjsreact-native
David B.
David B.

Reputation: 59

Using let to change the opacity of a view

I am using React Native and have it set up so when a TouchableOpacity has been touched the opacity of another TouchableOpacity change and the touched TouchableOpacity has a higher opacity. Looking for how to fix or suggestions for improvement. 

let opacityEnglish= true ? 1 : 0.5
let opacitySpanish = false ? 1 : 0.5

const languageSetHandler = (language) => {
    if(language == 'English') {
        opacityEnglish = true;
        opacitySpanish = false;
    }
    else if (language== 'Spanish') {
        opacitySpanish = true;
        opacityEnglish = false;
    }
    setLanguage(language);
}

<TouchableOpacity 
    style={styles.OtherStyles, {opacity: opacityEnglish}} onPress={() => languageSetHandler('English')}>
         <Text>English</Text>
         <Text>Has been selected</Text>
</TouchableOpacity>

It has been suggested not to use a boolean for the let. Any Alternative ways to change the opacity from outside the TouchOpacity?

Upvotes: 0

Views: 72

Answers (2)

ravibagul91
ravibagul91

Reputation: 20755

opacityEnglish & opacitySpanish are instance variable's. Your languageSetHandler function changes instance variable's, but React won't reacts when instance variable changes.

I think you have 2 options here.

  1. You can directly use language for your opacity,
const languageSetHandler = (language) => {
    setLanguage(language);
}

<TouchableOpacity 
    style={styles.OtherStyles, {opacity: language === 'English' ? 1 : 0.5}} 
    onPress={() => languageSetHandler('English')}
>
    <Text>English</Text>
    <Text>Has been selected</Text>
</TouchableOpacity>

You can do same for Spanish.

  1. You can maintain opacity in state,
const [opacityEnglish, setOpacityEnglish] = useState(0.5); //You can set initial opacity to 1 as per your need
const [opacitySpanish, setOpacitySpanish] = useState(0.5);

const languageSetHandler = (language) => {
    if(language == 'English') {
        setOpacityEnglish(1);
        setOpacitySpanish(0.5);
    }
    else if (language== 'Spanish') {
        setOpacityEnglish(0.5);
        setOpacitySpanish(1);
    }
    setLanguage(language);
}
<TouchableOpacity 
    style={styles.OtherStyles, {opacity: opacityEnglish}} 
    onPress={() => languageSetHandler('English')}
>
    <Text>English</Text>
    <Text>Has been selected</Text>
</TouchableOpacity>

Upvotes: 2

ray
ray

Reputation: 27245

let opacityEnglish= true ? 1 : 0.5

This will always resolve to 1, because true is always true.

I think you want something more like:

let opacity = language === 'english' ? 1 : 0.5;

Upvotes: 2

Related Questions