@ilz5753/react-native-time-line NPM

@ilz5753/react-native-time-line

A customizable and animated timeline component for React Native applications.

Demo

https://github.com/ilz5753/react-native-time-line/assets/87062381/3796bc4c-eee1-4f56-8e08-f3b5427b4a0e

Note

The react-native-time-line package relies on react-native-reanimated to provide smooth animations. These dependencies must be installed and properly configured in your React Native project for the timeline component to function correctly.

Installation

npm install @ilz5753/react-native-time-line
# or yarn
yarn add @ilz5753/react-native-time-line
# or bun
bun add @ilz5753/react-native-time-line

Usage

import TimeLine, {
  ITimeLineItem,
  TTimeLineAnimatedComponentProps,
} from "@ilz5753/react-native-time-line";

function Node({
  animatedValue,
  sharedProps = {},
  goto,
  activeIndex,
  isActive,
}: TTimeLineAnimatedComponentProps) {
  return (
    <View>
      <Text>Hello from Node</Text>
    </View>
  );
}
function Label({
  animatedValue,
  sharedProps = {},
  goto,
  activeIndex,
  isActive,
}: TTimeLineAnimatedComponentProps) {
  return (
    <View>
      <Text>Hello from Label</Text>
    </View>
  );
}
function Line({
  animatedValue,
  sharedProps = {},
  goto,
  activeIndex,
  isActive,
}: TTimeLineAnimatedComponentProps) {
  return (
    <View>
      <Text>Hello from Line</Text>
    </View>
  );
}
function Render({
  animatedValue,
  sharedProps = {},
  goto,
  activeIndex,
  isActive,
}: TTimeLineAnimatedComponentProps) {
  return (
    <View>
      <Text>Hello from Render</Text>
    </View>
  );
}

const timeLines: ITimeLineItem[] = [
  {
    id: "1",
    Node,
    Label,
    Line,
    Render,
    // disabled: true,
  },
  // ...
];

function App() {
  return (
    <TimeLine
      items={timeLines}
      delayBetween={200}
      duration={500}
      initialIndex={0}
      isRTL={false}
      spaceOut={50}
      gapHor={20}
      gapVert={20}
    />
  );
}

TimeLine Props

Prop	Type	Default	Description
items	`ITimeLineItem[]`		An array of timeline items. Each item consists of an `id`, a `Node` component, a `Line` component, a `Label` component, and an optional `disabled` flag.
delayBetween	`number`	`0`	The delay between the end of the previous animation and the start of the next one.
duration	`number`	`300`	The duration of each animation.
initialIndex	`number`	`0`	The index of the initially active item.
isRTL	`boolean`	`false`	Determines the direction of the timeline. Set to `true` for right-to-left languages.
spaceOut	`number`	`20`	The padding space arround component.
gapHor	`number`	`10`	The horizontal gap between the node-label and line-render components.
gapVert	`number`	`10`	The vertical gap between the node-line and label-render components.
sharedProps	`object`		Any additional props that should be shared among the animated components.

TimeLineItem Props

Prop	Type	Description
id	`string`	A unique identifier for the timeline item.
Node	`TTimeLineAnimatedComponent`	A component representing the visual element (node) in the timeline.
Label	`TTimeLineAnimatedComponent`	A component representing the label for the timeline item.
Line	`TTimeLineAnimatedComponent`	A component representing the line connecting the nodes in the timeline.
Render	`TTimeLineAnimatedComponent`	A component representing the time line item Render.
disabled	`boolean`	When `true`, the item is disabled and not interactive.

Animated Component Props

The animated components (Node, Line, Label, and Render) receive the following props:

Prop	Type	Description
animatedValue	`SharedValue`	The current animated value (0-1).
activeIndex	`number`	The index of the currently active item.
isActive	`boolean`	boolean flag indicates item is active or not.
sharedProps	`object`	Any additional props passed to the component through the `sharedProps` prop of the `TimeLine` component.
goto(index: number)	`function`	Manually move the timeline to the specified index.