Numbers Prefer Multiplication

    react-native-timeline-flatlist
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.0 • Public • Published

    React Native Timeline Flatlist

    npm version Platform

    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

    untitled-1

    Table of Contents

    Installation

    npm i react-native-timeline-flatlist --save
    

    or

    yarn add react-native-timeline-flatlist
    

    Basic Usage

    image2

    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

    image3

    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}
              }}
              isUsingFlatlist={true}
            />
        )
    }

    see full custom example

    Circle Dot

    image4

    render(){
        return(
            <Timeline
              //..other props
              innerCircle={'dot'}
            />
        )
    }

    see full circle dot example

    Icon

    image5

    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

    image6

    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

    rflm

    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

    simulator screen shot apr 6 2560 be 5 19 51 pm

    render(){
        return(
            <Timeline
              //..other props
              columnFormat='single-column-right'
            />
        )
    }

    see full single column right example

    Two Column

    simulator screen shot apr 6 2560 be 5 05 32 pm

    render(){
        return(
            <Timeline
              //..other props
              columnFormat='two-column'
            />
        )
    }

    see full two column example

    Time container hiding

    showTime

    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
    isUsingFlatlist boolean false Render inner components in Flatlist (if false - render in View)

    Shift problem

    Text width of event time may not be the same.

    untitled-1

    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
              }}
            />
        )
    }

    Install

    npm i react-native-timeline-flatlist

    DownloadsWeekly Downloads

    4,542

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    38.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • eugnis