How To Make A React Native App Timeline
React Native Timeline Flatlist
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
Table of Contents
- Installation
- Usage
- Basic usage
- Custom example
- Circle dot example
- Icon example
- Override render example
- Pull to refresh and load more example
- Column Format (in v.0.2.0)
- Single column right
- Two column
- Time container hiding
- Configuration
- Data Object
- Timeline
- Shift problem
Installation
npm i react-native-timeline-flatlist --save or
yarn add react-native-timeline-flatlist Basic Usage
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 ( < Timeline data = { this . data } / > ) }
see full basic example
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 } } } / > ) }
see full custom example
Circle Dot
render ( ) { return ( < Timeline //..other props innerCircle = { 'dot' } / > ) }
see full circle dot example
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' } / > ) }
Also you can pass any React element as icon or iconDefault:
this.data = [ ... {time: '12:00', title: 'Custom rendered icon', icon: <Image style={{width: 20, height: 20}} source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}} />}, ... ] } see full icon example
Override Render
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 = < 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 renderDetail = { this . renderDetail } / > ) }
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' / > ) }
see full two column example
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 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.
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 } } / > ) }
How To Make A React Native App Timeline
Source: https://github.com/Eugnis/react-native-timeline-flatlist
Posted by: hydesith1974.blogspot.com
0 Response to "How To Make A React Native App Timeline"
Post a Comment