React Native component opacity not updating when props updated

react native touchableopacity disable opacity
react-native touchableopacity disabled style
react-native opacity

I have a React Native child component, which renders a button in a semi-transparent state if the disabled prop is set to true. The prop is likely to be updated after the app initially loads (once it has got its data), so will not be the initial state of the component.

I can see that once I interact with the button it changes its state, but for some reason not before. I can see, both from the logs and from the onPress behaviour, that the prop is updating. I've tried different approaches but none seemed to fix the issue.

class TestButton extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const buttonOpacity = (this.props.disabled  ? disabledOpacity : 1.0);
    console.log ("test disabled", this.props.disabled, buttonOpacity);

    return (
      <BubbleText style={{opacity: buttonOpacity}} onPress={
        () => ! this.props.disabled && doSomething() }>
          { this.props.testNumber }
      </BubbleText>
    );
  }
}

There does seem to be an issue with setting the opacity of TouchableOpacity buttons. I'm using react-native@0.55.4. If the opacity is set and then updated the new render does not seem to change the opacity value even though it is being passed to the component style.

There is a native way to do this with TouchableOpacity. This also benefits from disabling all press events if using the disabled prop.

<TouchableOpacity
    disabled={ this.props.is_disabled }
    activeOpacity={ this.props.is_disabled ? .6 : 1 }>
    <Text>Custom Button</Text>
</TouchableOpacity>

One caveat to the above, setting the activeOpacity does not appear to change the text opacity only the backgroundColor.

Alternatively using rgba values to specify the opacity does work.

export class CustomButton extends Component {

    get_button_style() {
        let _button_style = [this.props.button_style]

        if (this.props.is_disabled) {
            _button_style.push({
                backgroundColor: 'rgba(0, 0, 0, .6')
            });
        }

        return _button_style;
    }

    render() {
        return(
            <TouchableOpacity
                style= { this.get_button_style() }>
                <Text> Custom Button </Text>
            </TouchableOpacity>
        )
    }
}

React Native component opacity not updating when props updated, I have a React Native child component, which renders a button in a semi-​transparent state if the disabled prop is set to true. The prop is likely to be updated after  There does seem to be an issue with setting the opacity of TouchableOpacity buttons. I'm using react-native@0.55.4. If the opacity is set and then updated the new render does not seem to change the opacity value even though it is being passed to the component style. There is a native way to do this with TouchableOpacity.

Seems like a known issue https://github.com/facebook/react-native/issues/17105

One workaround is to wrap your TouchableOpacity's content in a view and apply the opacity styling to that view instead of directly to Touchable opacity.

Passing props not updating style in React Native · Issue #1795 , js : export const Wrapper = styled(TouchableOpacity)` align-self: flex-start; align-​items: center; opacity: ${props =>  If you have this.props.messages and messages gets updated after an action is triggered the ui doesn&#39;t reflect the changes but render is called again on the component with the new set of props.

It's hard to say just from the snippet, it's possible that the problem is in the parent component using this one. Adding the code for that might help identify what the problem is.

Sorry dont have enough rep to add a comment.

`TouchableOpacity` does not let you control opacity when `disabled , Opacity remains the same unless you press the component (which still looks like disabled) maxkomarychev added a commit to maxkomarychev/react-native that Update opacity when `disabled` prop is changed … ff94f25. For some reason, real devices (non-simulator) are not updating tab-bar images when they change from active to not-active. Could be related to this bug? facebook/react-native#9195 We add a key to force the <Image> element to re-mount when the source changes

The underlying component was a TouchableOpacity. It seems there is an issue with setting its opacity externally. I solved the issue in this case by defining colours explicitly, not using opacity:

class TestButton extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
      return (
        <BubbleText fill={this.props.disabled ? disabledFill : undefined} textStyle={this.props.disabled ? {color: disabledText} : {}} onPress={
          () => ! this.props.disabled && loadTest(this.props.navigator, this.props.set + this.props.testNumber, this.props.children)
          }>
            { this.props.testNumber }
          </BubbleText>
          );

  }
}

In another part of my code, I added a conditional to render a component as a View with opacity if disabled, and a TouchableOpacity if not.

TouchableOpacity, latest (SDK37) renderButton: function() { return ( <TouchableOpacity onPress={​this. import React, { Component } from 'react'; import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { count: 0 } View.style, No  setNativeProps is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your code more difficult to reason about. Before you use it, try to solve your problem with setState and shouldComponentUpdate .

Animation Add-Ons – React, The ReactTransitionGroup add-on component is a low-level API for animation, and .example-enter { opacity: 0.01; } .example-enter.example-enter-active ReactCSSTransitionGroup provides the optional prop transitionAppear , to add an There is generally no transition phase at the initial mount as the default value of  UI does not update on state change #1. cbetta opened this issue Mar 27, 2017 · 7 comments. Currently it seems the active param doesn't listen to the provided state, as a result it doesn't seem to update when the state changes.

React Top-Level API – React, React components let you split the UI into independent, reusable pieces, and think You will not typically invoke the following methods directly if you are using JSX. 's shouldComponentUpdate() skips prop updates for the whole component Children provides utilities for dealing with the this.props.children opaque data  Whether you declare a component as a function or a class, it must never modify its own props. React is pretty flexible but it has a single strict rule: All React components must act like pure functions with respect to their props. Props are never to be updated. We are to use them as is. Sounds rigid right?

React v16.13.0 – React Blog, Warning: Cannot update a component from inside the function body of then alternates between transparent and blue , as you can see in this and longhand versions of the same CSS property in the style prop. <script crossorigin src="​https://unpkg.com/react@16/umd/react.production.min.js"></script>  Then, inside the <TabBar /> component I have a view with a React Native <ListView /> component that has to display the list of elements: The thing is that I need to update this.state.dataSource in order to make <ListView /> update it's content.

Comments
  • It's hard to tell what the issue is. What does loadTest do?
  • it loads a test.. I'll remove it for clarity
  • Can you reword your question? I've read it like 5 times and I'm still not clear what's happening and what's expected.
  • There's nothing weird happening in the code you provided, so something else weird is happening (if anything weird is happening at all)
  • @azium updated, thanks
  • Another option is to wrap the TouchableOpacity in a view. Then set the opacity in the view instead.
  • Wow using RN 0.60.4 nowadays and this bug still occurs. This workaround works but feels dirty! thanks.
  • Parent component added.
  • Have you tried using componentWillRecieveProps to see if the test button is receiving the updated props fine?
  • Yes I believe so, as I stated, I can also see via log statements and other aspects of the UI e.g. onPress behaviour.
  • Did not know that can cause an issue. Good to know. Glad you solved it