Need help with react-native-timeline-flatlist?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Eugnis
233 Stars 49 Forks MIT License 140 Commits 29 Opened issues

Description

FlatList based timeline component for React Native for iOS and Android

Services available

!
?

Need anything else?

Contributors list

# 35,144
JavaScr...
React N...
React
CSS
65 commits
# 107,123
C
spectre
Shell
React N...
32 commits
# 197,449
JavaScr...
iOS
Android
React N...
4 commits
# 499,085
JavaScr...
iOS
React N...
react-n...
3 commits
# 5,961
Objecti...
Shell
Kotlin
React N...
2 commits
# 294,906
React
CSS
HTML
toggle
1 commit
# 285,243
JavaScr...
Less
iOS
React N...
1 commit
# 286,782
React N...
C
TypeScr...
react-n...
1 commit
# 62,176
vuejs2
vue2
Less
HTML
1 commit

React Native Timeline Flatlist

npm version Platform

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

untitled-1

Table of Contents

Installation

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

or

yarn add react-native-timeline-flatlist

Basic Usage

image2

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

see full basic example

Custom

image3

render(){
    return(
        
    )
}

see full custom example

Circle Dot

image4

render(){
    return(
        
    )
}

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

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

this.data = [
      ...
      {time: '12:00', title: 'Custom rendered icon', icon: },
      ...
    ]
  }

see full icon example

Override Render

image6

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 = {rowData.title} var desc = null if(rowData.description && rowData.imageUrl) desc = ( {rowData.description} )

return (
  <view style="{{flex:1}}">
    {title}
    {desc}
  </view>
)

}

render(){ return( ) }

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 ; } else { return ~; } }

render(){ return( ), 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(
        
    )
}

see full single column right example

Two Column

simulator screen shot apr 6 2560 be 5 05 32 pm

render(){
    return(
        
    )
}

see full two column example

Time container hiding

showTime

render(){
    return(
        
    )
}

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.

untitled-1

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

render(){
    return(
        
    )
}

Timeline is rendered, but not displayed until scroll

fix by add removeClippedSubviews: false into options

render(){
    return(
        
    )
}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.