Home

Awesome

React Native Timeline Listview

Timeline component for React Native App work for Android and iOS

untitled-1

Table of Contents

Installation

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

Basic Usage

image2

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

image3

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

image4

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

see full circle dot example

Icon

image5

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

image6

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

rflm


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

simulator screen shot apr 6 2560 be 5 19 51 pm

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

see full single column right example

Two Column

simulator screen shot apr 6 2560 be 5 05 32 pm

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

see full two column example

Time container hiding

showTime

render(){
    return(
        <Timeline
          //..other props
          showTime={false}
        />
    )
}

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

Shift problem

Text width of event time may not be the same.

untitled-1

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
          }}
        />
    )
}