{"id":4263,"url":"https://github.com/tomzaku/react-native-timeline-theme","last_synced_at":"2026-03-06T01:01:20.059Z","repository":{"id":57340901,"uuid":"123549367","full_name":"tomzaku/react-native-timeline-theme","owner":"tomzaku","description":null,"archived":false,"fork":false,"pushed_at":"2018-05-15T05:12:04.000Z","size":4426,"stargazers_count":47,"open_issues_count":0,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-22T00:34:09.221Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/tomzaku.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":"2018-03-02T08:03:20.000Z","updated_at":"2024-05-01T13:00:13.000Z","dependencies_parsed_at":"2022-09-07T16:40:18.712Z","dependency_job_id":null,"html_url":"https://github.com/tomzaku/react-native-timeline-theme","commit_stats":null,"previous_names":["tomzaku/react-native-timeline"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/tomzaku/react-native-timeline-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-timeline-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-timeline-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-timeline-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-timeline-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomzaku","download_url":"https://codeload.github.com/tomzaku/react-native-timeline-theme/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomzaku%2Freact-native-timeline-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30156842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"ssl_error","status_checked_at":"2026-03-05T22:39:24.771Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-01-05T20:17:06.231Z","updated_at":"2026-03-06T01:01:20.021Z","avatar_url":"https://github.com/tomzaku.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"readme":"\u003ch2 align=\"center\"\u003e\n  React Native TimeLine Theme\n\u003c/h2\u003e\n\u003ch5 align=\"center\"\u003e\nCollection of TimeLine theme. \nThis package only use flexbox(without absolute) \u0026 FlatList\n\n\u003c/h5\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/tomzaku/react-native-timeline-theme/blob/master/phone-detail.gif?raw=true\"\u003e\n\u003c/p\u003e\n\n## Get Started\nInspired by [react-native-timeline-listview](https://github.com/thegamenicorus/react-native-timeline-listview)\n### Installation\n\n`npm i react-native-dash \u0026\u0026 npm i react-native-timeline-theme --save`\n\nor\n\n`yarn add react-native-dash \u0026\u0026 yarn add react-native-timeline-theme`\n\n\nThat's all!\n\n### Usage\n\n#### Simple\n![](https://github.com/tomzaku/react-native-timeline-theme/blob/master/phone-basic.png?raw=true)\n``` js\nconst data = [\n  {\n    title: 'Wake up',\n    description: 'Remember tooth brushing and read notes on the tablet',\n    time: new Date(\"March 6, 2018 6:15:00\"),\n  },\n  {\n    title: 'Eatting',\n    description: 'Eat breakfast: bread and drink milk',\n    time: new Date(\"March 6, 2018 7:00:00\"),\n  },\n  {\n    title: 'Working',\n    description: 'Go to ABX Company and working react-native',\n    time: new Date(\"March 6, 2018 7:35:00\"),\n  },\n  {\n    title: 'Relax',\n    description: 'Listen to music \"Hello Vietnam\" song',\n    time: new Date(\"March 6, 2018 14:15:00\"),\n  },\n]\n...\n \u003cTimeLine\n  data={data}\n  isRenderSeperator\n  columnFormat={'two-column'}\n/\u003e\n\n```\n\n#### Add icon into timeline\n![](https://github.com/tomzaku/react-native-timeline-theme/blob/master/phone-icon.png?raw=true)\n``` js\nimport Icon from 'react-native-vector-icons/MaterialIcons';\nimport IconFont from 'react-native-vector-icons/FontAwesome';\n\nconst data = [\n  {\n    title: 'Wake up',\n    description: 'Remember tooth brushing and read notes on the tablet',\n    time: new Date(\"March 6, 2018 6:15:00\"),\n    renderIcon: () =\u003e \u003cIcon name={'alarm'} size={40} color={'#304ffe'}/\u003e,\n    lineColor: '#304ffe',\n    titleStyle: {color: '#304ffe'},\n    renderTimeBottom: () =\u003e (\u003cView style={{ alignItems: 'flex-end', flex: 1, backgroundColor: 'white', borderRadius: 6, padding: 3 }}\u003e \u003cText\u003e(06.30)\u003c/Text\u003e\u003c/View\u003e)\n  },\n  {\n    title: 'Eatting',\n    description: 'Eat breakfast: bread and drink milk',\n    time: new Date(\"March 6, 2018 7:00:00\"),\n    renderIcon: () =\u003e \u003cIconFont name={'coffee'} size={20} color={'#546e7a'}/\u003e,\n    lineColor: '#546e7a',\n    titleStyle: {color: '#546e7a'},\n  },\n  {\n    title: 'Working',\n    description: 'Go to ABX Company and working react-native',\n    time: new Date(\"March 6, 2018 7:35:00\"),\n    renderIcon: () =\u003e \u003cIconFont name={'briefcase'} size={20} color={'#dd2c00'} /\u003e,\n    lineColor: '#dd2c00',\n    titleStyle: {color: '#dd2c00'},\n\n  },\n  {\n    title: 'Relax',\n    description: 'Listen to music \"Hello Vietnam\" song',\n    time: new Date(\"March 6, 2018 14:15:00\"),\n    renderIcon: () =\u003e \u003cIconFont name={'headphones'} size={20} color={'#006064'}/\u003e,\n    lineColor: '#006064',\n    titleStyle: {color: '#006064'},\n\n  },\n]\n...\n \u003cTimeLine\n  data={data}\n  isRenderSeperator\n  widthLineContainer={65}\n  style={{margin: 16}}\n/\u003e\n\n```\n#### Render Different Detail\n![](https://github.com/tomzaku/react-native-timeline-theme/blob/master/phone-detail.gif?raw=true)\n``` js\nimport { View, Text, StyleSheet, Image } from 'react-native';\nimport TimeLine from '../lib/index'\nimport Icon from 'react-native-vector-icons/MaterialIcons';\nimport IconFont from 'react-native-vector-icons/FontAwesome';\n\nconst data = [\n  {\n    title: 'Wake up',\n    description: 'Remember tooth brushing and read notes on the tablet',\n    time: new Date(\"March 6, 2018 6:15:00\"),\n    renderIcon: () =\u003e \u003cIcon name={'alarm'} size={40} color={'#304ffe'}/\u003e,\n    lineColor: '#304ffe',\n    titleStyle: {color: '#304ffe'},\n    renderTimeBottom: () =\u003e (\u003cView style={{ alignItems: 'flex-end', flex: 1, backgroundColor: 'white', borderRadius: 6, padding: 3 }}\u003e \u003cText style={{fontSize: 8, fontWeight: 'bold'}}\u003eImportant\u003c/Text\u003e\n    \u003cText style={{fontSize: 8, fontWeight: 'bold', color: '#b40000'}}\u003eLazy time\u003c/Text\u003e\u003cText style={{fontSize: 8, fontWeight: 'bold', textAlign: 'right'}}\u003eLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text\u003c/Text\u003e\u003c/View\u003e),\n    renderDetail: ({title, description, titleStyle}, index) =\u003e \u003cView\u003e\u003cText style={{ fontSize: 20, fontWeight: 'bold'}}\u003e{title}\u003c/Text\u003e\u003cImage style={{width: 200, height: 150}} source={require('./assets/wake.gif')} /\u003e\u003cText\u003e{description}\u003c/Text\u003e\u003c/View\u003e\n  },\n  {\n    title: 'Eatting',\n    description: 'Eat breakfast: bread and drink milk',\n    time: new Date(\"March 6, 2018 7:00:00\"),\n    renderIcon: () =\u003e \u003cIconFont name={'coffee'} size={20} color={'#546e7a'}/\u003e,\n    lineColor: '#546e7a',\n    titleStyle: {color: '#546e7a'},\n    renderDetail: ({title, description, titleStyle}, index) =\u003e \u003cView\u003e\u003cText style={[titleStyle, { fontWeight: 'bold'}]}\u003e{title}\u003c/Text\u003e\u003cImage style={{width: 200, height: 150}} source={require('./assets/eat.gif')} /\u003e\u003cText\u003e{description}\u003c/Text\u003e \u003c/View\u003e\n  },\n  {\n    title: 'Working',\n    description: 'Go to ABX Company and working react-native',\n    time: new Date(\"March 6, 2018 7:35:00\"),\n    renderIcon: () =\u003e \u003cIconFont name={'briefcase'} size={20} color={'#dd2c00'} /\u003e,\n    lineColor: '#dd2c00',\n    titleStyle: {color: '#dd2c00'},\n\n  },\n  {\n    title: 'Relax',\n    description: 'Listen to music \"Hello Vietnam\" song',\n    time: new Date(\"March 6, 2018 14:15:00\"),\n    renderIcon: () =\u003e \u003cIconFont name={'headphones'} size={20} color={'#006064'}/\u003e,\n    lineColor: '#006064',\n    titleStyle: {color: '#006064'},\n\n  },\n]\n\n```\n\nMore Detail see [this](https://github.com/tomzaku/react-native-timeline-theme/tree/master/example/src)\n\n### Props\n\nThis package is used FlatList, therefore you can override all the props at [this](https://facebook.github.io/react-native/docs/flatlist.html)\n\n| Prop | Description | Type | Default |\n|---|---|---| ---|\n|**`data`**| Data of timeline | array |[]|\n|**`styleContainer`**|Styles applied to the container| StyleSheet object |`{flex: 1}`|\n|**`columnFormat`**|Format of column timeline: 'single-column-left', 'single-column-right', 'two-column' | string |`'single-column-left'`|\n|**`renderIcon`**|Render icon of timeLine| function |`null`|\n|**`renderDetail`**|Render Detail(Event) of timeline | function |`null`|\n|**`isRenderSeperator`**|Render Seperate line| boolean |`false`|\n|**`widthLineContainer`**|Width of Line Container| number |`30`|\n|**`showAmPm`**|Show AM or PM| boolean |`true`|\n|**`timeFormat`**|Time format, please read [this](https://momentjs.com/)| string |`'hh.mm'`|\n|**`innerCircleType`**|Type of inner circle: 'dot'| string |`none`|\n|**`spacingDot`**|Spacing around dot| number |`4`|\n|**`dotColor`**|The color of dot| string |`'white'`|\n|**`dotSize`**|Size of dot| number | 4 |\n|**`marginTopCircle`**| You can marginTop alignTop to adjust the line number | number |`8`|\n|**`circleColor`**|Color of circle| string |`#37474f`|\n|**`circleSize`**|Size of circle| number |`8`|\n|**`renderTimeBottom`**| Render Component Below Time| function |`null`|\n|**`renderTimeBottom`**| Render Component Below Time| function |`null`|\n|**`lineWidth`**|With of line| number |`0.75`|\n|**`lineColor`**|Color of line| string |`#909090`|\n|**`dashLine`**|style of line: dash| bool |`false`|\n|**`renderSeperateTotal`**|vertical line in the bottom of event| bool |`false`|\n\n\n\n### Todos\n- [x] Add icon for line event\n- [x] Add dash line \n- [ ] Add dark, light theme\n- [ ] Add theme seperator\n\n### Contribute\n\nAny help this module will be approciate!\n\n\n### License\n\n[MIT](https://github.com/tomzaku/react-native-timeline-theme/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomzaku%2Freact-native-timeline-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomzaku%2Freact-native-timeline-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomzaku%2Freact-native-timeline-theme/lists"}