HomeOur TeamContact

Basic Timeline Listview

By Utkarsh Lubal
Published in List
April 15, 2023
1 min read
Basic Timeline Listview

Table Of Contents

Complete Example


Hey there, React Native enthusiasts! Are you tired of boring, bland-looking lists in your mobile apps? Do you want to add some excitement and style to your app’s timeline? Then you’re in luck because React Native Timeline Listview is here to save the day!

But before we dive in and get technical, let’s set the mood with a joke.

Why did the developer quit his job at the calendar factory? Because he took a day off.

Okay, okay, I know that was cheesy. But I couldn’t resist! Let’s get back on track and start using this awesome library.

Getting started:

First things first, let’s install the library. Now, I know what you’re thinking. “Oh no, more installation steps? I’m going to die of boredom.” But fret not, my friend! Installing this library is easier than stealing candy from a baby. (Note: Please do not actually steal candy from babies. That’s just mean.)

All you have to do is run this command in your terminal:

npm install react-native-timeline-listview

And that’s it! You’re ready to use the library. It’s like magic, but without the hassle of chanting spells or waving a wand.


Now, let’s jump into the code. First, you’ll need to import the Timeline component:

import Timeline from 'react-native-timeline-listview';

Next, you’ll need to create some data to populate your timeline. Here’s an example:

const data = [
  { time: "09:00", title: "Wake up", description: "Start your day off right" },
    time: "10:00",
    title: "Brush your teeth",
    description: "Don’t forget to floss!",
    time: "11:00",
    title: "Take a shower",
    description: "Sing like no one is listening",
  { time: "12:00", title: "Lunch time", description: "Nom nom nom" },
  { time: "13:00", title: "Nap time", description: "Zzzzzzzz" },
    time: "14:00",
    title: "Coffee break",
    description: "Caffeine is my friend",
    time: "15:00",
    title: "Code like a boss",
    description: "I am the master of code",
  { time: "18:00", title: "Dinner time", description: "Food is love" },
    time: "20:00",
    title: "Watch Netflix",
    description: "Because I deserve it",
  { time: "23:00", title: "Bed time", description: "Goodnight, world" },

And finally, you’ll need to render the Timeline component

    minWidth: 52,
    textAlign: "center",
    backgroundColor: "#ff9797",
    color: "white",
    padding: 5,
    borderRadius: 13,
    color: "gray",
    style: {
      paddingTop: 5,

And voila! You now have a beautiful, stylish timeline in your React Native app. Wasn’t that easy?

Complete Example

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';

export default class App extends Component {
  constructor(props) {
    this.data = [
      { time: '09:00', title: 'Event 1', description: 'Event 1 Description' },
      { time: '10:45', title: 'Event 2', description: 'Event 2 Description' },
      { time: '12:00', title: 'Event 3', description: 'Event 3 Description' },
      { time: '14:00', title: 'Event 4', description: 'Event 4 Description' },
      { time: '16:30', title: 'Event 5', description: 'Event 5 Description' }

  render() {
    return (
      <View style={styles.container}>
            style:{ paddingTop:5, flex:1 }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: '#F5FCFF',
    paddingHorizontal: 20


Data Object:
timestringnullevent time
titlestringnullevent title
descriptionstringnullevent description
lineWidthintsame as lineWidth of ‘Timeline’event line width
lineColorstringsame as lineColor of ‘Timeline’event line color
circleSizeintsame as circleSize of ‘Timeline’event circle size
circleColorstringsame as circleColor of ‘Timeline’event circle color
dotColorstringsame as dotColor of ‘Timeline’event dot color (innerCircle = ‘dot’)
iconobj(image source)same as icon of ‘Timeline’event icon (innerCircle = ‘color’)


datadata objectnulltimeline data
innerCirclestringnulltimeline mode : ‘none’, ‘dot’, ‘icon’
separatorbooltruerender separator line of events
columnFormatstring‘single-left’can be ‘single-column-left’, ‘single-column-right’, ‘two-column’
lineWidthint2timeline line width
lineColorstring‘#007AFF’timeline line color
circleSizeint16timeline circle size
circleColorstring‘#007AFF’timeline circle color
dotColorstring‘white’timeline dot color (innerCircle = ‘dot’)
iconobj(image source)nulltimeline icon (innerCircle = ‘color’)
styleobjectnullcustom styles of Timeline container
listViewStyleobjectnullcustom styles of inner ListView
timeStyleobjectnullcustom styles of event time
titleStyleobjectnullcustom styles of event title
descriptionStyleobjectnullcustom styles of event description
iconStyleobjectnullcustom styles of event icon
separatorStyleobjectnullcustom styles of separator
rowContainerStyleobjectnullcustom styles of event container
timeContainerStyleobjectnullcustom styles of container of event time
detailContainerStyleobjectnullcustom styles of container of event title and event description
onEventPressfunction(event)nullfunction to be invoked when event was pressed
renderTimefunction(rowData, sectionID, rowID)nullcustom render event time
renderDetailfunction(rowData, sectionID, rowID)nullcustom render event title and event description
renderCirclefunction(rowData, sectionID, rowID)nullcustom render circle
renderFullLineboolfalserender event border on last timeline item
optionsobjectnullListView properties
showTimebooleantrueTime container options
# Tutorial
Coming Soon...

export const _frontmatter = {}

Previous Article
Custom Timeline Listview
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Single Column Right Timeline Listview
Single Column Right Timeline Listview
April 15, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media