```js
  state={
    array: [],
    sorted: false,
  };

  sort() {
    var swapped;
    var array = this.state.array;
    do {
        swapped = false;
        for (var i=0; i < array.length-1; i++) {
            if (array[i] > array[i+1]) {
                var temp = array[i];
                array[i] = array[i+1];
                array[i+1] = temp;
                this.setState({ array });
                console.log(array);
                swapped=true;
            }
        }
    } while (swapped);
  }

  renderBars() {
    return this.state.array.map(listValue => (
      <View key={Math.floor(Math.random() * 10000000) + 1}>
        <Text>{listValue}</Text>
        <View style={{ width: 15, height: (listValue * 30), backgroundColor: '#3F51B5', borderRadius: 4 }} />
      </View>
    ));
  }
```

The above code isn't rerendering during every state change. I wish to achieve a bubbling animation for bubble sort like an algorithm visualizer but the view is only rerendering at the end and not at every state change.