How to Design Beautiful Timeline in React Native

A timeline design can be used in a mobile app for many cases. One such case is tracking shipped items in the eCommerce mobile app. In this blog post, let’s see how to create a beautiful timeline design in React Native.

We are using a third-party library react native timeline flatlist to create timeline design. First of all, install the library using the command below:

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

or

yarn add react-native-timeline-flatlist

The basic usage of react native timeline flatlist is pretty simple.

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

Following is the complete react native example to design timeline.

Learn more or give us feedback
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';

export default class TimelineExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 
        [
          {time: '09:00', title: 'BreakFast', description: 'I had breakfast from a wonderful restaurant and the food was super tasty.'},
          {time: '11:00', title: 'Tea Break', description: 'I made a tea myself and drink it with a packet of biscuits.'},
          {time: '13:00', title: 'Lunch', description: 'I ate lunch from nearby hotel but food was just okay.'},
          {time: '16:00', title: 'Tea Break', description: 'Ate two snacks.'},
          {time: '20:00', title: 'Dinner', description: 'This time I prepared dinner looking a youtube tutorial.'}
        ]
      
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Timeline
        circleSize={20}
        separator={true}
        circleColor='blue'
        lineColor='gray'
        timeStyle={styles.time}
        descriptionStyle={styles.description}
        style={styles.list}
        data={this.state.data}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
		backgroundColor:'white'
  },
  list: {
    flex: 1,
    marginTop:20,
  },
  time: {
    textAlign: 'center',
    backgroundColor:'gray',
    fontSize: 12,
    color:'white', 
    padding:5, 
    borderRadius:13, 
    overflow: 'hidden'
  },
  description: {
    color: 'gray'
  }
});

Following is the output of the react native example.

I hope you liked this react native tutorial. Thank you for reading!