Not all icons are shown

[LongicornYu]

I dynamically set the this.data array, however some icons are shown and first 11 ones are not. I tried to check the data array and the data looks correct.

[{"time":"April 10, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 3, 2018","title":"Today","description":"","lineColor":"#009688","icon":31},{"time":"May 6, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"May 8, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 3, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"June 5, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"July 1, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 3, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"July 29, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 31, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"August 26, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"August 28, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"September 23, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"September 25, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"October 21, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"October 23, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"November 18, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"November 20, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"December 16, 2018","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"December 18, 2018","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"January 13, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"January 15, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"February 10, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"February 12, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"March 10, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"March 12, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"April 7, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"April 9, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 5, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"May 7, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 2, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"June 4, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 30, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 2, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"July 28, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"July 30, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"August 25, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"August 27, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"September 22, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"September 24, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"October 20, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"October 22, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"November 17, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"November 19, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"December 15, 2019","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"December 17, 2019","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"January 12, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"January 14, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"February 9, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"February 11, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"March 8, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"March 10, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"April 5, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"April 7, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 3, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"May 5, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"May 31, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32},{"time":"June 2, 2020","title":"Pill Cycle Start","description":"","lineColor":"#009688","icon":30},{"time":"June 28, 2020","title":"Pill Cycle End","description":"","lineColor":"#009688","icon":32}]

[LongicornYu]

The code is the same from the sample. Any idea what might be the issue? Thanks <Timeline style={styles.list} data={this.state.data} circleSize={20} circleColor='lightgray' lineColor='rgb(45,156,219)' timeContainerStyle={{minWidth:52, marginTop: -5}} timeStyle={{textAlign: 'center', backgroundColor:'#ff9797', color:'white', padding:5, borderRadius:13}} descriptionStyle={{color:'gray'}} options={{ style:{paddingTop:5} }} innerCircle={'icon'} onEventPress={this.onEventPress} separator={false} detailContainerStyle={{marginBottom: 20, paddingLeft: 5, paddingRight: 5, backgroundColor: "#BBDAFF", borderRadius: 10}} columnFormat='two-column' />

[ahmad6242]

Having same issue here, When i run the onRefresh Icons Shows Up. But at the first launch they does not appeared at all, as i loads more data through onEndReached Icons shows up in the new data but still not there in the Old data. !!!!!!!