Render Circle displays icons to far right of 2 column

[shubhamverma27]

I am trying to display a custom view which includes an icon for the circle using renderCircle in a single column left. I can see that my custom view is being rendered. The only issue is that the custom circle is being rendered to the far right of the screen instead of down the middle line that is rendered. Do I maybe need to change more styles or is this a bug?

[bhaskardabhi]

Same is happening for me.

[alihaider123go]

Same for me.

[jspizziri]

In case people are still struggling with this the answer is "Yes". You do need to add some additional style, as the native _renderCircle method manually positions the circles relative to other dimensions.

The renderCircle function you pass into the component is bound to the component. So you can do something like this:

<Timeline
  data={data}
  renderCircle={function (item, index) {
    let circleSize = 9;
    if ([some criteria to identify your custom circle]) {
      return (
        <View
          style={{
            width: circleSize,
            height: circleSize,
            backgroundColor: 'blue',
            right: this.state.width - circleSize / 2 - (lineWidth - 1) / 2,
          }}
        />
      );
    }

    return this._renderCircle(item, index);
  }}
/>