CODEWITHSUNDEEP
cssreactjsreact-native
FairyQueen
FairyQueen

Reputation: 2373

Why are my styles not being updated in React Native?

I have a Sign In button that has an opacity of 50% normally but when you enter text in both the username and password or you click the Sign In button it is supposed to have an opacity of 100% (no transparency left at all). However, when the button is clicked it changes the background color but the opacity remains at 50%. Does anyone know why the opacity is not getting updated?

let readyForSignIn = this.state.email && this.state.password ? true : false;
let updateButton = this.state.loggingIn || readyForSignIn;

<TouchableOpacity style={[styles.buttonContainer, updateButton ? styles.buttonActive : styles.buttonDefault]} onPress={() => this.onSubmitEmail()}>
    {this.state.loggingIn ? 
        <Text style={[styles.buttonText, {color: '#000'}]}>
            Signing you in...
        </Text>
    :
        <Text style={[styles.buttonText, {color: '#fff'}]}>
            Sign In
        </Text>
    }
</TouchableOpacity>

and here are the styles for the button:

buttonContainer: {
    marginTop: 20,
    backgroundColor: '#3A3A3A',
    paddingVertical: 16,
    borderRadius: 3,
    shadowOpacity: 0.35,
    shadowColor: '#000',
    shadowOffset: {widget: 0, height: 2},
    shadowOpacity: 2
},
buttonDefault: {
    opacity: 0.5
},
buttonActive: {
    backgroundColor: '#fce443',
    opacity: 1
},

I made a video of the issue as well:

https://www.youtube.com/watch?v=mp1fXVyHxoY&feature=youtu.be

Upvotes: 1

Views: 67

Answers (1)

RaphaMex
RaphaMex

Reputation: 2839

Inline-style does not guarantee the order in which styles are applied (e.g. can be alphabetically order). So you should use the most specific style names you can.

For background opacity, use this instead:

buttonDefault: {
    backgroundColor: rgba(58, 58, 58, 0.5);
},
buttonActive: {
    backgroundColor: rgba(252, 228, 67, 1);
},

Upvotes: 1

Related Questions