react-native-timeline-listview
react-native-timeline-listview copied to clipboard
thegamenicorus
Timeline not showing 'dots' when I have many elements on the list
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
@Schwarzenegger Have you figure it out? I've got the same issue as you were...
@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.
@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.
this problem is related to the initialListSize property, which by default is 10
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 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.
overwrote renderCircle helped but circle position css is messed, its showing on the far right and line on the left.
Have same problem and I can't do overwrite just like you. Any other solution for this ?
