Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thegamenicorus/react-native-timeline-listview
Timeline component for React Native App
https://github.com/thegamenicorus/react-native-timeline-listview
android ios react-native schedule timeline
Last synced: 6 days ago
JSON representation
Timeline component for React Native App
- Host: GitHub
- URL: https://github.com/thegamenicorus/react-native-timeline-listview
- Owner: thegamenicorus
- License: mit
- Created: 2017-03-13T08:53:57.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-11-25T20:35:47.000Z (about 5 years ago)
- Last Synced: 2024-11-30T13:03:32.212Z (13 days ago)
- Topics: android, ios, react-native, schedule, timeline
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-timeline-listview
- Size: 168 KB
- Stars: 1,168
- Watchers: 27
- Forks: 184
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-timeline-listview ★665 - Timeline component for React Native App (Components / UI)
- awesome-reactnative-ui - react-native-timeline-listview - 1aef-11e7-8fd7-7d64431af7e4.png)| (Others)
- awesome-react-native - react-native-timeline-listview ★665 - Timeline component for React Native App (Components / UI)
- awesome-reactnative-ui - react-native-timeline-listview - 1aef-11e7-8fd7-7d64431af7e4.png)| (Others)
- awesome-react-native - react-native-timeline-listview ★665 - Timeline component for React Native App (Components / UI)
- awesome-react-native - react-native-timeline-listview ★665 - Timeline component for React Native App (Components / UI)
README
# React Native Timeline Listview
Timeline component for React Native App work for Android and iOS
**Table of Contents**
- [Installation](#installation)
- Usage
- [Basic usage](#basic-usage)
- [Custom example](#custom)
- [Circle dot example](#circle-dot)
- [Icon example](#icon)
- [Override render example](#override-render)
- [Pull to refresh and load more example](#pull-to-refresh-and-load-more)
- Column Format (in v.0.2.0)
- [Single column right](#single-column-right)
- [Two column](#two-column)
- [Time container hiding](#hide-time)
- Configuration
- [Data Object](#data-object)
- [Timeline](#timeline)
- [Shift problem](#shift-problem)
## Installation
```
npm i react-native-timeline-listview --save
```
## Basic Usage
```jsx
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(
)
}
```
[see full basic example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/basicExample.js)
## Custom
```jsx
render(){
return(
)
}
```
[see full custom example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/customExample.js)
## Circle Dot
```jsx
render(){
return(
)
}
```
[see full circle dot example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/dotExample.js)
## Icon
```jsx
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(
)
}
```
[see full icon example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/iconExample.js)
## Override Render
```jsx
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 = {rowData.title}
var desc = null
if(rowData.description && rowData.imageUrl)
desc = (
{rowData.description}
)
return (
{title}
{desc}
)
}
render(){
return(
)
}
```
[see full override render example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/overrideRenderExample.js)
## Pull to refresh and load more
```jsx
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](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/refreshLoadMoreExample.js)
## Column Format
### Single Column Right
```jsx
render(){
return(
)
}
```
[see full single column right example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/singleRightExample.js)
### Two Column
```jsx
render(){
return(
)
}
```
[see full two column example](https://github.com/thegamenicorus/react-native-timeline-listview/blob/master/examples/Example/pages/twoColumnExample.js)
### Time container hiding
```jsx
render(){
return(
)
}
```
## Configuration
#### Data Object:
| Property | Type | Default | Description |
|---------------|----------|-------------|----------------------------------------------------------------|
| time | string | null | event time |
| title | string | null | event title |
| description | string | null | event description |
| lineWidth | int | same as lineWidth of 'Timeline' | event line width |
| lineColor | string | same as lineColor of 'Timeline' | event line color |
| 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) | same as icon of 'Timeline' | event icon (innerCircle = 'color') |
#### Timeline:
| Property | Type | Default | Description |
|---------------|----------|-------------|----------------------------------------------------------------|
| data | data object | null | timeline data |
| innerCircle | string | null | timeline mode : 'none', 'dot', 'icon' |
| 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') |
| icon | obj(image source) | null | timeline icon (innerCircle = 'color') |
| style | object | null | custom styles of Timeline container |
| listViewStyle | object | null | custom styles of inner ListView |
| 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 |
| 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
```jsx
render(){
return(
)
}
```
## Timeline is rendered, but not displayed until scroll
fix by add removeClippedSubviews: false into options
```jsx
render(){
return(
)
}
```