React Native Timeline Flatlist

Timeline component for React Native App work for Android and iOS

It's a fork of react-native-timeline-listview with some updates including FlatList, because old ListView is deprecated.

Examples in examples folder and on Expo https://expo.io/@eugnis/react-native-timeline-flatlist-examples

DEMO HERE

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
  • Time container hiding
• Configuration
  • Data Object
  • Timeline
• Shift problem

Installation

npm i react-native-timeline-flatlist --save

or

yarn add react-native-timeline-flatlist

Basic Usage

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

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

Also you can pass any React element as icon or iconDefault:

this.data = [
      ...
      {time: '12:00', title: 'Custom rendered icon', icon: <Image
      style={{width: 20, height: 20}}
      source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
    />},
      ...
    ]
  }

see full icon example

Override Render

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

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

Time container hiding

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

Configuration

Data Object:

| Property | Type | Default | Description | | ------------------- | ---------------------------------- | --------------------------------- | --------------------------------------------------- | | time | string | null | event time | | title | string | null | event title | | description | string or object | null | event description | | lineWidth | int | same as lineWidth of 'Timeline' | event line width | | lineColor | string | same as lineColor of 'Timeline' | event line color | | eventContainerStyle | object | null | custom styles of line | | 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) or React.Element | same as icon of 'Timeline' | event icon (innerCircle = 'icon' or 'element') | | position | string | null | event side in 'two-column' layout : 'left', 'right' |

Timeline:

| Property | Type | Default | Description | | ---------------------- | ----------------------------------- | -------------------------- | ---------------------------------------------------------------- | | data | data object | null | timeline data | | innerCircle | string | null | timeline mode : 'none', 'dot', 'icon', 'element' | | 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') | | dotSize | int | circleSize / 2 | timeline dot size (innerCircle = 'dot') | | iconDefault (or icon) | obj(image source) or React.Element | same as icon of 'Timeline' | default event icon | | style | object | null | custom styles of Timeline container | | listViewStyle | object | null | custom styles of inner ListView | | listViewContainerStyle | object | null | custom styles of inner ListView container | | 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 | | eventContainerStyle | object | null | custom styles of the event part of the row (line) | | eventDetailStyle | object | null | custom styles of the event detail part of the row (line) | | 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 | | showTime | boolean | true | Time container options |

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