Timeline not showing 'dots' when I have many elements on the list

[Schwarzenegger]

I'm having this problem on my android/ios, when I create a timeline with more than 10 elements the 'dots' start not showing up

I've already tried setting up minWidth on timeContainerStyle

[Hulva]

@Schwarzenegger Have you figure it out? I've got the same issue as you were...

[Hulva]

@Schwarzenegger I've fixed it by overriderenderCircle

[Schwarzenegger]

@Hulva Yes, i figured it out by overiding renderCircle like you did.

Still messing it css to place the circle in the right place on all devices.

[Hulva]

@Schwarzenegger I've only played it on android... I didn't know that it'll display different on different device. Hope you'll find a good way to deal with it. Let me know if you do.

[linhanyang]

I also have the same problem on ios devices.

[danielgarciasantos]

i have some problem with icon, someone resolved?

[thegamenicorus]

Hi all.

Is it happen on emulator or real device?

[danielgarciasantos]

in both, debug...

[danielgarciasantos]

this problem is related to the initialListSize property, which by default is 10

[danielgarciasantos]

this problem is related to _renderCicle in circleStyle => left: this.state.x - (circleSize / 2) + ((lineWidth-1) / 2),

this.state.x may be zeroed due to _renderEvent's onLayout

onLayout
Invoked on mount and layout changes with:

{nativeEvent: {layout: {x, y, width, height}}}

This event is fired immediately once the layout has been calculated, but the new layout may not be reflected on the screen at the time the event is received, especially if the layout animation is in progress.

[danielgarciasantos]

any solution for this ?

[Schwarzenegger]

@danielgarciasantos like I said, i overwrote renderCircle to look like this.

 renderCircle(rowData, sectionID, rowID) {
    var circleSize = 20
    var circleColor = rowData.circleColor
    var lineWidth = 2
    var ballPadding = (Platform.OS === 'ios') ? width/1.11 : width/1.10

    return (
       <View style={{
          width: 22,
           height: 22,
           borderRadius: 50,
           backgroundColor: circleColor,
           right: ballPadding
         }} />
     )
  } 

And the component

<Timeline
   style={timelineScreenStyle.list}
   data={this.state.data}
   timeContainerStyle={{minWidth:0}}
   detailContainerStyle={timelineScreenStyle.detailContainerStyle}
   separator={false}
   innerCircle={'none'}
   lineWidth={2}
   renderDetail={this.renderDetail}
   renderCircle={this.renderCircle}
   descriptionStyle={{color:'gray'}}
   enableEmptySections={true}
   options={{
     style:{paddingTop: 5}
    }}
    circleSize={22}
             />

It worked smooth for me on Android and IOs after this.

[dsah]

overwrote renderCircle helped but circle position css is messed, its showing on the far right and line on the left.

[danielgarciasantos]

gave up component?

[naklow12]

Have same problem and I can't do overwrite just like you. Any other solution for this ?

[bhaskardabhi]

I am also facing issue while overriding renderCircle