CODEWITHSUNDEEP
javascriptreact-nativestatetouchablehighlight
ty1
ty1

Reputation: 364

Dynamically rendered touchable not updating with state value change

Summary

I am trying to make a react native color picker component, that will place a border around which one is selected. The component allows the coder to pass an array of colors they want to use, so I am rendering it dynamically by passing an array to the render method.

Method

The way I handle showing which one is selected- I have the borderWidth each color component set to an array in state with all 0's. When it's clicked, i set the certain index to 1. This however, does not properly update the width. The array is changing properly, but it's not updating the width of the touchables.

Code:

for (let i = 0; i < this.colorPallete.length; ++i) {
  this.nums.push(i);
  this.circles.push(
    <React.Fragment key={i}>
      <TouchableHighlight
        onPress={() => {
          this.selectCircle(i);
        }}
        style={[
          styles.colorCircle,
          {
            borderWidth: this.state.bgWidth[i],
            borderColor: this.colorPallete[i],
          },
        ]}>
        <View
          style={[
            styles.innerCircle,
            {
              backgroundColor: this.colorPallete[i],
              borderColor: this.colorPallete[i],
            },
          ]}
        />
      </TouchableHighlight>
    </React.Fragment>
  );
}

}

Upvotes: 1

Views: 49

Answers (1)

Leonardo Lima
Leonardo Lima

Reputation: 496

you can try to force update when the selectedCircle change:

example:

componentWillUpdate(nextProps) {
  const { selectedCircle } = this.props;
  if (selectedCircle !== nextProps.selectedCircle) {
    this.forceUpdate();
  }
}

Upvotes: 0

Related Questions