HomeOur TeamContact

Two Column Timeline Listview

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

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

Timeline component for React Native App work for Android and iOS

Configuration

Data Object:
PropertyTypeDefaultDescription
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’)

Timeline:

PropertyTypeDefaultDescription
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

Installation

npm i react-native-timeline-listview --save

Example

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.data = [
     {time: '09:00', title: 'Archery Training', description: 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ',lineColor:'#009688', icon: require('./assets/archery.png'), imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg'},
      {time: '10:45', title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.', icon: require('/assets/badminton.png'), imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg'},
      {time: '12:00', title: 'Lunch', Image: require('/assets/lunch.png'), imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg' },
      {time: '14:00', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688', icon: require('./assets/soccer.png'), imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg', },
      {time: '16:30', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', icon: require('./assets/dumbbell.png'), imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg'}
    ];
  }

  onEventPress(data){
    this.setState({selected: data})
  }

  renderSelected(){
      if(this.state.selected)
        return <Text style={{marginTop:10}}>Selected event: {this.state.selected.title} at {this.state.selected.time}</Text>
  }

  renderDetail(rowData, sectionID, rowID) {
    let title = <Text style={[styles.title]} >{rowData.title}</Text>
    var desc = null
    if(rowData.description && rowData.imageUrl)
      desc = (
        <View style={styles.descriptionContainer}>   
          <Image source={{uri: rowData.imageUrl}} style={styles.image}/>
          <Text style={[styles.textDescription]} >{rowData.description}</Text>
        </View>
      )

    return (
      <View style={{flex:1}}>
        {title}
        {desc}
      </View>
    )
  }
  render() {
    return (
      <View style={styles.container}>
        <Timeline 
          style={styles.list}
          data={this.data}
          circleSize={20}
          circleColor='rgba(0,0,0,0)'
          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}
          renderDetail={this.renderDetail}          
          separator={false}
          detailContainerStyle={{marginBottom: 20, paddingLeft: 5, paddingRight: 5, backgroundColor: "#BBDAFF", borderRadius: 10}}
          columnFormat='two-column'
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
    flex: 1,
    padding: 20,
  paddingTop:3,
    backgroundColor:'white'
  },
  list: {
    flex: 1,
    marginTop:20,
  },
  title:{
    fontSize:16,
    fontWeight: 'bold'
  },
  descriptionContainer:{
    flexDirection: 'row',
    paddingRight: 50
  },
  image:{
    width: 50,
    height: 50,
    borderRadius: 25
  },
  textDescription: {
    marginLeft: 10,
    color: 'black'
  },
});

Tutorial

Coming Soon…


Previous Article
Circle Dot Timeline Listview
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Basic Timeline Listview
Basic Timeline Listview
April 15, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media