native-timeline

Table of Contents

1. About The Project
2. Installation
3. Usage
4. Contributing
5. License
6. Contact
7. Api
   • Props
   • Types and interfaces

About The Project

React Native timeline component, based on typescript. It helps to manage your events in different time modes("Months", "Weeks", "Days"). It can be well customized to suit your needs using props. Read the documentation below.

Installation

# using yarn
yarn add native-timeline

# using npm
npm install native-timeline

Usage

At the very minimum:

import React from "react";
import Timeline from "native-timeline";

// ... some component and it's logic

const data = [
  {
    props: {
      id: 1,
      startDate: "2020-12-10",
      endDate: "2020-12-18",
      title: "Test1",
    },
    subItems: [
      {
        id: 2,
        startDate: "2020-12-10",
        endDate: "2020-12-14",
        title: "SubTest1",
      },
      {
        id: 3,
        startDate: "2020-12-15",
        endDate: "2020-12-18",
        title: "SubTest2",
      },
    ],
  },
  {
    props: {
      id: 4,
      startDate: "2020-12-19",
      endDate: "2020-12-25",
      title: "Test2",
    },
  },
];

const period = { startDate: "2020-12-01", endDate: "2020-12-31" };

return <Timeline data={data} period={period} />

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Danyil Zatserkovnyi - [e-mail]

Project Link: https://github.com/Crysis020304050/native-timeline

Api

Props

• data: Data

Specify an array of event items and optional it's sub items

• period: Period

Specify time period to be rendered

• horizontal?: boolean

Specify timeline position(default is vertical)

Vertical:

Horizontal:

• showSubItemsOnMainItemPress?: boolean (true by default)

Specify if sub events will be shown when user press main event item

• useTapOnDatesToChangeTimeMode?: boolean (true by default)

Specify if time mode will be changed when user press dates container

• defaultTimeMode?: string (default is "Days")

Timeline has 3 time modes("Months", "Weeks", "Days"), you can chose one by default

Use TIME_MODES constant for this

import { TIME_MODES } from "native-timeline";

defaultTimeMode={TIME_MODES.W}

• onMainItemPress?: OnItemPress

Specify function that will be called when user press main event item, event ID will be passed to this function

• onSubItemPress?: OnItemPress

Specify function that will be called when user press sub event item, event ID will be passed to this function

• useStickyItemsText?: boolean (true by default)

Specify if event text will be moved inside event to be visible when user scroll timeline

• datesStyles?: Styles

Specify styles provided to timeline dates

• datesFormat?: DatesFormat

Specify timeline dates format for every time mode(default is "MMM" for "Months" time mode, "MM-DD" for "Weeks" time mode and "DD ddd" for "Days" time mode)

Use TIME_MODES constant for this

import { TIME_MODES } from "native-timeline";

datesFormat={{ [TIME_MODES.M]: "YYYY MMM" }, { [TIME_MODES.D]: "DD MMM" }}

In this example dates format for "Weeks" time mode will be default

Default months format:

Custom months format:

• dateLinesStyles?: DateLinesStyles

Specify styles for regular day, weekend or today on timeline

For example, you can color all weekends with red(default this color is #FFFFFF for regular day, #DEDEDE for weekend and #BBD0DE for today)

Default today color:

Custom today color:

• modesToDayContainerSize?: ModesToDayContainerSize

Specify day unit size for every time mode

You can control timeline scale in every time mode(default is 10px for "Months" time mode, 20px for "Weeks" time mode and 50px for "Days" time mode)

Use TIME_MODES constant for this

import { TIME_MODES } from "native-timeline";

modesToDayContainerSize={{ [TIME_MODES.W]: 30 }, { [TIME_MODES.D]: 80 }}

In this example day unit size for "Months" time mode will be default

Default day unit size:

Custom day unit size:

• gapBetweenEvents?: number(50 by default)

Specify left or top distance(depending on timeline position) between events

If event item width or height(depending on timeline position) will be increased you will most likely need to increase this distance

Default gap:

Custom gap:

• useSelectForScrollingToItems?: boolean(true by default)

Specify if main event items will be shown in modal selector, also add possibility to scroll to chosen event by picking it in the selector

• selectProps?: SelectProps

If you use modal selector you can specify it's styles or some settings

Types and interfaces

• DateArgs

type DateArgs = Date | moment.Moment | string | number;

• ID

type type ID = string | number;

• Styles

type Styles = { container?: ViewStyle; text?: TextStyle };

• ItemProps

interface ItemProps {
  startDate: DateArgs;
  endDate: DateArgs;
  title: string;
  styles?: Styles;
  id: ID;
}

• Data

type Data = Array<{ props: ItemProps; subItems?: Array<ItemProps> }>;

• Period

type Period = { startDate: DateArgs; endDate: DateArgs };

• OnItemPress

type OnItemPress = (id: ID) => void;

• DatesFormat

type DatesFormat = Record<string, string>;

• DateLinesStyles

type DateLinesStyles = { day?: ViewStyle; weekend?: ViewStyle; today?: ViewStyle };

• ModesToDayContainerSize

type ModesToDayContainerSize = Record<string, number>;

• SelectProps

type SelectProps = { [key: string]: any };

react-native-modal-selector module is used in this project, so you can find SelectProps here

Your can pass any props except data and onChange