Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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>
    );
  }
}
like image 899
Adamski Avatar asked Jan 15 '18 22:01

Adamski


People also ask

Do components update when props change?

Child Component Instead, it should receive data that's already been prepared by the Parent . Also, props are automatically updated. Still, it can be useful to update and manipulate data from a Child component, especially when Redux is involved.

Does component remount when props change?

To remount a component when a prop changes, use the React key attribute as described in this post on the React blog: When a key changes, React will create a new component instance rather than update the current one. The example below shows how the key attribute can be used.

How do you set opacity of view in react native?

To set Alpha of an image or view component in React Native based application, style's property opacity is used. Developers can make the shape or image background transparent according to his requirement in a fixed manner; in a fixed percentage, the view is made transparent by setting alpha.

Do props update React?

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.


1 Answers

There does seem to be an issue with setting the opacity of TouchableOpacity buttons. I'm using [email protected]. 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>
        )
    }
}
like image 198
kgstew Avatar answered Sep 28 '22 12:09

kgstew