React Native Timeline Listview

Timeline component for React Native App work for Android and iOS

Table of Contents

• Installation
• Usage
  • Basic usage
  • Custom example
  • Circle dot example
  • Icon example
  • Override render example
  • Pull to refresh and load more example
• Column Format (in v.0.2.0)
  • Single column right
  • Two column
• Configuration
  • Data Object
  • Timeline
• Shift problem

Installation

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

Basic Usage

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

constructor(){
    super()
    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(
        <Timeline
          data={this.data}
        />
    )
}

see full basic example

Custom

render(){
    return(
        <Timeline
          //..other props
          circleSize={20}
          circleColor='rgb(45,156,219)'
          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}
          }}
        />
    )
}

see full custom example

Circle Dot

render(){
    return(
        <Timeline
          //..other props
          innerCircle={'dot'}
        />
    )
}

see full circle dot example

Icon

constructor(){
    super()
    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('../img/archery.png')},
      {time: '10:45', title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.', icon: require('../img/badminton.png')},
      {time: '12:00', title: 'Lunch', icon: require('../img/lunch.png')},
      {time: '14:00', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688', icon: require('../img/soccer.png')},
      {time: '16:30', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', icon: require('../img/dumbbell.png')}
    ]
  }
render(){
    return(
        <Timeline
          //..other props
          innerCircle={'icon'}
        />
    )
}

see full icon example

Override Render

constructor(){
    super()
    this.renderEvent = this.renderEvent.bind(this)

    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('../img/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('../img/badminton.png'),
        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg'
      },
      {
        time: '12:00',
        title: 'Lunch',
        icon: require('../img/lunch.png'),
      },
      {
        time: '14:00',
        title: 'Watch Soccer',
        description: 'Team sport played between two teams of eleven players with a spherical ball. ',
        lineColor:'#009688',
        icon: require('../img/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('../img/dumbbell.png'),
        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg'
      }
    ]
  }

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(
        <Timeline
          //..other props
          renderEvent={this.renderEvent}
        />
    )
}

see full override render example

Pull to refresh and load more

onRefresh(){
  //set initial data
}

onEndReached() {
  //fetch next data
}

renderFooter() {
    //show loading indicator
    if (this.state.waiting) {
        return <ActivityIndicator />;
    } else {
        return <Text>~</Text>;
    }
}

render(){
    return(
        <Timeline
          //..other props
          options={{
            refreshControl: (
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this.onRefresh}
              />
            ),
            renderFooter: this.renderFooter,
            onEndReached: this.onEndReached
          }}
        />
    )
}

see full refresh and load more example

Column Format

Single Column Right

render(){
    return(
        <Timeline
          //..other props
          columnFormat='single-column-right'
        />
    )
}

see full single column right example

Two Column

render(){
    return(
        <Timeline
          //..other props
          columnFormat='two-column'
        />
    )
}

see full two column example

Configuration

Data Object:

Property	Type	Default	Description
time	string	null	event time
title	string	null	event title
description	string	null	event description
lineWidth	int	same as lineWidth of 'Timeline'	event line width
lineColor	string	same as lineColor of 'Timeline'	event line color
circleSize	int	same as circleSize of 'Timeline'	event circle size
circleColor	string	same as circleColor of 'Timeline'	event circle color
dotColor	string	same as dotColor of 'Timeline'	event dot color (innerCircle = 'dot')
icon	obj(image source)	same as icon of 'Timeline'	event icon (innerCircle = 'color')

Timeline:

Property	Type	Default	Description
data	data object	null	timeline data
innerCircle	string	null	timeline mode : 'none', 'dot', 'icon'
separator	bool	true	render separator line of events
columnFormat	string	'single-left'	can be 'single-column-left', 'single-column-right', 'two-column'
lineWidth	int	2	timeline line width
lineColor	string	'#007AFF'	timeline line color
circleSize	int	16	timeline circle size
circleColor	string	'#007AFF'	timeline circle color
dotColor	string	'white'	timeline dot color (innerCircle = 'dot')
icon	obj(image source)	null	timeline icon (innerCircle = 'color')
style	object	null	custom styles of Timeline container
listViewStyle	object	null	custom styles of inner ListView
timeStyle	object	null	custom styles of event time
titleStyle	object	null	custom styles of event title
descriptionStyle	object	null	custom styles of event description
iconStyle	object	null	custom styles of event icon
separatorStyle	object	null	custom styles of separator
rowContainerStyle	object	null	custom styles of event container
timeContainerStyle	object	null	custom styles of container of event time
detailContainerStyle	object	null	custom styles of container of event title and event description
onEventPress	function(event)	null	function to be invoked when event was pressed
renderTime	function(rowData, sectionID, rowID)	null	custom render event time
renderDetail	function(rowData, sectionID, rowID)	null	custom render event title and event description
renderCircle	function(rowData, sectionID, rowID)	null	custom render circle
renderFullLine	bool	false	render event border on last timeline item
options	object	null	ListView properties

Shift problem

Text width of event time may not be the same.

fix by add 'minWidth' in 'timeContainerStyle' to appropriate value

render(){
    return(
        <Timeline
          //..other props
          timeContainerStyle={{minWidth:72}}
        />
    )
}

Timeline is rendered, but not displayed until scroll

fix by add removeClippedSubviews: false into options

render(){
    return(
        <Timeline
          //..other props
          options={{
            removeClippedSubviews: false
          }}
        />
    )
}