Customizable Performant Timeline Component – just-timeline

React Native Just Timeline is a package intended to provide an elegant, highly flexible, and customizable, performant solution to render a sequence of events, taking in mind the support for RTL orientation and the package was developed with that concern in mind.

Install & Import:

# Yarn
$ yarn add react-native-just-timeline

# NPM
$ npm i react-native-just-timeline --save

Basic Usage:

const BasicTimeline = () => {
  const data = [
    {
      title: {
        content: 'Event One',
      },
      description: {
        content: 'Event One Description',
      },
      time: {
        content: moment().format('ll'),
      },
    },
    {
      title: {
        content: 'Event Two ',
      },
      description: {
        content: 'Event Two Description',
      },
      time: {
        content: moment().format('ll'),
      },
    }
  ];
  return (
    <View style={styles.container}>
      <Timeline data={data} />
    </View>
  );
};

Default Component Props:

data = [], // The actual event's array, array of objects, each object represents a single event
eventStyle = {}, // Each event's whole row's style
timeContainerStyle = {}, // The style object of the container that holds the time
iconContainerStyle = {}, // The style object of the container that holds the icon
lineStyle = {}, // The vertical line's style object
contentContainerStyle = {}, // The style object of the container that holds the content i.e. title and description
onEndReachedThreshold,
onEndReached,
TimelineFooter,
TimelineHeader

Preview:

Download Details:

Author:

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: