{"id":3990,"url":"https://github.com/thegamenicorus/react-native-timeline-listview","last_synced_at":"2025-05-15T18:02:14.166Z","repository":{"id":40643592,"uuid":"84804243","full_name":"thegamenicorus/react-native-timeline-listview","owner":"thegamenicorus","description":"Timeline component for React Native App","archived":false,"fork":false,"pushed_at":"2019-11-25T20:35:47.000Z","size":172,"stargazers_count":1173,"open_issues_count":44,"forks_count":184,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-03-31T21:51:22.039Z","etag":null,"topics":["android","ios","react-native","schedule","timeline"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-timeline-listview","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thegamenicorus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T08:53:57.000Z","updated_at":"2025-01-29T08:34:12.000Z","dependencies_parsed_at":"2022-08-09T23:50:51.700Z","dependency_job_id":null,"html_url":"https://github.com/thegamenicorus/react-native-timeline-listview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-timeline-listview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-timeline-listview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-timeline-listview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-timeline-listview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thegamenicorus","download_url":"https://codeload.github.com/thegamenicorus/react-native-timeline-listview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737788,"owners_count":20987721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native","schedule","timeline"],"created_at":"2024-01-05T20:16:57.802Z","updated_at":"2025-04-07T22:11:28.171Z","avatar_url":"https://github.com/thegamenicorus.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# React Native Timeline Listview\nTimeline component for React Native App work for Android and iOS\n\n![untitled-1](https://cloud.githubusercontent.com/assets/21040043/24750025/8c8d044e-1aef-11e7-8fd7-7d64431af7e4.png)\n\n**Table of Contents**\n- [Installation](#installation)\n- Usage\n  - [Basic usage](#basic-usage)\n  - [Custom example](#custom)\n  - [Circle dot example](#circle-dot)\n  - [Icon example](#icon)\n  - [Override render example](#override-render)\n  - [Pull to refresh and load more example](#pull-to-refresh-and-load-more)\n- Column Format (in v.0.2.0)\n  - [Single column right](#single-column-right)\n  - [Two column](#two-column)\n  - [Time container hiding](#hide-time)\n- Configuration\n  - [Data Object](#data-object)\n  - [Timeline](#timeline)\n- [Shift problem](#shift-problem)\n\n## Installation\n```\nnpm i react-native-timeline-listview --save\n```\n\n## Basic Usage\n![image2](https://cloud.githubusercontent.com/assets/21040043/24320617/6a7494ea-116b-11e7-9cf5-12244f5eec58.png)\n```jsx\nimport Timeline from 'react-native-timeline-listview'\n\nconstructor(){\n    super()\n    this.data = [\n      {time: '09:00', title: 'Event 1', description: 'Event 1 Description'},\n      {time: '10:45', title: 'Event 2', description: 'Event 2 Description'},\n      {time: '12:00', title: 'Event 3', description: 'Event 3 Description'},\n      {time: '14:00', title: 'Event 4', description: 'Event 4 Description'},\n      {time: '16:30', title: 'Event 5', description: 'Event 5 Description'}\n    ]\n  }\n\nrender(){\n    return(\n        \u003cTimeline\n          data={this.data}\n        /\u003e\n    )\n}\n```\n[see full basic example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/basicExample.js)\n\n## Custom\n![image3](https://cloud.githubusercontent.com/assets/21040043/24320631/9df21a86-116b-11e7-8865-2631d35bc640.png)\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          circleSize={20}\n          circleColor='rgb(45,156,219)'\n          lineColor='rgb(45,156,219)'\n          timeContainerStyle={{minWidth:52, marginTop: -5}}\n          timeStyle={{textAlign: 'center', backgroundColor:'#ff9797', color:'white', padding:5, borderRadius:13}}\n          descriptionStyle={{color:'gray'}}\n          options={{\n            style:{paddingTop:5}\n          }}\n        /\u003e\n    )\n}\n```\n[see full custom example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/customExample.js)\n\n## Circle Dot\n![image4](https://cloud.githubusercontent.com/assets/21040043/24320644/f5bc5b0a-116b-11e7-9252-2c9fc2361dc9.png)\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          innerCircle={'dot'}\n        /\u003e\n    )\n}\n```\n[see full circle dot example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/dotExample.js)\n\n## Icon\n![image5](https://cloud.githubusercontent.com/assets/21040043/24320654/1c5de27e-116c-11e7-95cc-750d55e001b8.png)\n```jsx\nconstructor(){\n    super()\n    this.data = [\n      {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')},\n      {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')},\n      {time: '12:00', title: 'Lunch', icon: require('../img/lunch.png')},\n      {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')},\n      {time: '16:30', title: 'Go to Fitness center', description: 'Look out for the Best Gym \u0026 Fitness Centers around me :)', icon: require('../img/dumbbell.png')}\n    ]\n  }\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          innerCircle={'icon'}\n        /\u003e\n    )\n}\n```\n[see full icon example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/iconExample.js)\n\n## Override Render\n![image6](https://cloud.githubusercontent.com/assets/21040043/24320661/36fe76e8-116c-11e7-950f-2968aef312bb.png)\n```jsx\nconstructor(){\n    super()\n    this.renderEvent = this.renderEvent.bind(this)\n\n    this.data = [\n      {\n        time: '09:00',\n        title: 'Archery Training',\n        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. ',\n        lineColor:'#009688',\n        icon: require('../img/archery.png'),\n        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240340/c0f96b3a-0fe3-11e7-8964-fe66e4d9be7a.jpg'\n      },\n      {\n        time: '10:45',\n        title: 'Play Badminton',\n        description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.',\n        icon: require('../img/badminton.png'),\n        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240405/0ba41234-0fe4-11e7-919b-c3f88ced349c.jpg'\n      },\n      {\n        time: '12:00',\n        title: 'Lunch',\n        icon: require('../img/lunch.png'),\n      },\n      {\n        time: '14:00',\n        title: 'Watch Soccer',\n        description: 'Team sport played between two teams of eleven players with a spherical ball. ',\n        lineColor:'#009688',\n        icon: require('../img/soccer.png'),\n        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240419/1f553dee-0fe4-11e7-8638-6025682232b1.jpg'\n      },\n      {\n        time: '16:30',\n        title: 'Go to Fitness center',\n        description: 'Look out for the Best Gym \u0026 Fitness Centers around me :)',\n        icon: require('../img/dumbbell.png'),\n        imageUrl: 'https://cloud.githubusercontent.com/assets/21040043/24240422/20d84f6c-0fe4-11e7-8f1d-9dbc594d0cfa.jpg'\n      }\n    ]\n  }\n\nrenderDetail(rowData, sectionID, rowID) {\n    let title = \u003cText style={[styles.title]}\u003e{rowData.title}\u003c/Text\u003e\n    var desc = null\n    if(rowData.description \u0026\u0026 rowData.imageUrl)\n      desc = (\n        \u003cView style={styles.descriptionContainer}\u003e   \n          \u003cImage source={{uri: rowData.imageUrl}} style={styles.image}/\u003e\n          \u003cText style={[styles.textDescription]}\u003e{rowData.description}\u003c/Text\u003e\n        \u003c/View\u003e\n      )\n\n    return (\n      \u003cView style={{flex:1}}\u003e\n        {title}\n        {desc}\n      \u003c/View\u003e\n    )\n  }\n\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          renderEvent={this.renderEvent}\n        /\u003e\n    )\n}\n```\n[see full override render example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/overrideRenderExample.js)\n\n## Pull to refresh and load more\n![rflm](https://cloud.githubusercontent.com/assets/21040043/26756369/304d2e7a-48cb-11e7-816d-66e8d40a97ee.png)\n```jsx\n\nonRefresh(){\n  //set initial data\n}\n\nonEndReached() {\n  //fetch next data\n}\n\nrenderFooter() {\n    //show loading indicator\n    if (this.state.waiting) {\n        return \u003cActivityIndicator /\u003e;\n    } else {\n        return \u003cText\u003e~\u003c/Text\u003e;\n    }\n}\n\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          options={{\n            refreshControl: (\n              \u003cRefreshControl\n                refreshing={this.state.isRefreshing}\n                onRefresh={this.onRefresh}\n              /\u003e\n            ),\n            renderFooter: this.renderFooter,\n            onEndReached: this.onEndReached\n          }}\n        /\u003e\n    )\n}\n```\n[see full refresh and load more example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/refreshLoadMoreExample.js)\n\n## Column Format\n### Single Column Right\n![simulator screen shot apr 6 2560 be 5 19 51 pm](https://cloud.githubusercontent.com/assets/21040043/24749469/60a7869e-1aed-11e7-9c41-f87f866b2d8d.png)\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          columnFormat='single-column-right'\n        /\u003e\n    )\n}\n```\n[see full single column right example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/singleRightExample.js)\n\n### Two Column\n![simulator screen shot apr 6 2560 be 5 05 32 pm](https://cloud.githubusercontent.com/assets/21040043/24749638/0515f210-1aee-11e7-82af-082d93efb618.png)\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          columnFormat='two-column'\n        /\u003e\n    )\n}\n```\n[see full two column example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/twoColumnExample.js)\n\n### Time container hiding\n![showTime](https://user-images.githubusercontent.com/6987730/35145888-fae0f1e2-fd3b-11e7-9571-2143342512c8.png)\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          showTime={false}\n        /\u003e\n    )\n}\n```\n\n\n## Configuration\n#### Data Object:\n| Property | Type | Default | Description |\n|---------------|----------|-------------|----------------------------------------------------------------|\n| time | string | null | event time |\n| title | string | null | event title |\n| description | string | null | event description |\n| lineWidth | int | same as lineWidth of 'Timeline' | event line width  |\n| lineColor | string | same as lineColor of 'Timeline' | event line color |\n| circleSize | int | same as circleSize of 'Timeline' | event circle size |\n| circleColor | string | same as circleColor of 'Timeline' | event circle color |\n| dotColor | string | same as dotColor of 'Timeline' | event dot color (innerCircle = 'dot') |\n| icon | obj(image source) | same as icon of 'Timeline' | event icon (innerCircle = 'color') |\n\n#### Timeline:\n| Property | Type | Default | Description |\n|---------------|----------|-------------|----------------------------------------------------------------|\n| data | data object | null | timeline data |\n| innerCircle | string | null | timeline mode : 'none', 'dot', 'icon' |\n| separator | bool | true | render separator line of events |\n| columnFormat | string | 'single-left' | can be 'single-column-left', 'single-column-right', 'two-column' |\n| lineWidth | int | 2 | timeline line width  |\n| lineColor | string | '#007AFF' | timeline line color |\n| circleSize | int | 16 | timeline circle size |\n| circleColor | string | '#007AFF' | timeline circle color |\n| dotColor | string | 'white' | timeline dot color (innerCircle = 'dot') |\n| icon | obj(image source) | null | timeline icon (innerCircle = 'color') |\n| style | object | null | custom styles of Timeline container |\n| listViewStyle | object | null | custom styles of inner ListView |\n| timeStyle | object | null | custom styles of event time |\n| titleStyle | object | null | custom styles of event title |\n| descriptionStyle | object | null | custom styles of event description |\n| iconStyle | object | null | custom styles of event icon |\n| separatorStyle | object | null | custom styles of separator |\n| rowContainerStyle | object | null | custom styles of event container |\n| timeContainerStyle | object | null | custom styles of container of event time  |\n| detailContainerStyle| object | null | custom styles of container of event title and event description |\n| onEventPress | function(event) | null | function to be invoked when event was pressed |\n| renderTime | function(rowData, sectionID, rowID) | null | custom render event time |\n| renderDetail | function(rowData, sectionID, rowID) | null | custom render event title and event description |\n| renderCircle | function(rowData, sectionID, rowID) | null | custom render circle |\n| renderFullLine | bool | false | render event border on last timeline item |\n| options | object | null | ListView properties|\n| showTime | boolean | true | Time container options|\n\n\n## Shift problem\n\nText width of event time may not be the same.\n\n![untitled-1](https://cloud.githubusercontent.com/assets/21040043/24321589/78d0c77c-1182-11e7-9c0f-69ebe591cb14.png)\n\nfix by add 'minWidth' in 'timeContainerStyle' to appropriate value\n\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          timeContainerStyle={{minWidth:72}}\n        /\u003e\n    )\n}\n```\n\n## Timeline is rendered, but not displayed until scroll\n\nfix by add removeClippedSubviews: false into options\n\n```jsx\nrender(){\n    return(\n        \u003cTimeline\n          //..other props\n          options={{\n            removeClippedSubviews: false\n          }}\n        /\u003e\n    )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegamenicorus%2Freact-native-timeline-listview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegamenicorus%2Freact-native-timeline-listview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegamenicorus%2Freact-native-timeline-listview/lists"}