native-timeline v1.0.1

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 - crysiswarhead020304050@gmail.com

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](#onitempress)

 Specify function that will be called when user press main event item, event [ID](#id) will be passed to this function

 - **onSubItemPress**?: [OnItemPress](#onitempress)

 Specify function that will be called when user press sub event item, event [ID](#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
 
 ![Sticky text](https://i.ibb.co/w4QkpgW/sticky.gif)
 
 - **datesStyles**?: [Styles](#styles)
 
 Specify styles provided to timeline dates
 
 - **datesFormat**?: [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
  ```typescript
 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