thegamenicorus / React Native Timeline Listview
Licence: mit
Timeline component for React Native App
Stars: ✭ 1,070
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Timeline Listview
Timespace
A jQuery plugin to handle displaying of time events
Stars: ✭ 27 (-97.48%)
Mutual labels: schedule, timeline
Zmjganttchart
Full configurable spreadsheet view user interfaces for iOS applications. With this framework, you can easily create complex layouts like schedule, gantt chart or timetable as if you are using Excel.
Stars: ✭ 301 (-71.87%)
Mutual labels: schedule, timeline
react-gantt-schedule-timeline-calendar
React Gantt Schedule Timeline Calendar component wrapper for gantt-schedule-timeline-calendar [ react gantt, gantt, react gantt chart, react schedule, react timeline, react calendar, gantt, schedule, scheduler, timeline, calendar, react gantt chart ]
Stars: ✭ 47 (-95.61%)
Mutual labels: schedule, timeline
Gantt Schedule Timeline Calendar
Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]
Stars: ✭ 990 (-7.48%)
Mutual labels: schedule, timeline
angular-gantt-schedule-timeline-calendar-example
Angular gantt-schedule-timeline-calendar usage example
Stars: ✭ 15 (-98.6%)
Mutual labels: schedule, timeline
Angular Gantt Schedule Timeline Calendar
Angular version of gantt-schedule-timeline-calendar [ angular gantt, gantt chart, angular gantt chart, angular schedule, angular timeline, angular calendar, gantt chart, schedule, scheduler, timeline, calendar ]
Stars: ✭ 32 (-97.01%)
Mutual labels: schedule, timeline
Adaptivecards
A new way for developers to exchange card content in a common and consistent way.
Stars: ✭ 950 (-11.21%)
Mutual labels: timeline
Unitystationbumper
Video bumper for Unity's live streaming channel.
Stars: ✭ 28 (-97.38%)
Mutual labels: timeline
Forcal
📅 Das AddOn ist ein variabel einsetzbarer Kalender(-Generator), Skedule, Newssystem, Event- und Terminplaner für REDAXO 5.x.
Stars: ✭ 52 (-95.14%)
Mutual labels: schedule
Phpcalfeed
A simple PHP script for providing calendar feeds for your website in a variety of different formats including iCalendar, RSS, JSON and XML.
Stars: ✭ 31 (-97.1%)
Mutual labels: schedule
Timeline
Awesome UI: Timeline with images in Xamarin.Forms.
Stars: ✭ 29 (-97.29%)
Mutual labels: timeline
Node Hue Api
Node.js Library for interacting with the Philips Hue Bridge and Lights
Stars: ✭ 1,034 (-3.36%)
Mutual labels: schedule
Bell
⏱ Counting down to the next time the bell rings at school
Stars: ✭ 15 (-98.6%)
Mutual labels: schedule
React Native Timetable
📆timetable component library for React Native
Stars: ✭ 38 (-96.45%)
Mutual labels: schedule
React Native Timeline Listview
Timeline component for React Native App work for Android and iOS
Table of Contents
- Installation
- Usage
- Column Format (in v.0.2.0)
- Configuration
- Shift problem
Installation
npm i react-native-timeline-listview --save
Basic Usage
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(
<Timeline
data={this.data}
/>
)
}
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}
}}
/>
)
}
Circle Dot
render(){
return(
<Timeline
//..other props
innerCircle={'dot'}
/>
)
}
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'}
/>
)
}
Override Render
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 = <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
renderEvent={this.renderEvent}
/>
)
}
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'
/>
)
}
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 | 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
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
}}
/>
)
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].