@ilz5753/react-native-time-line
A customizable and animated timeline component for React Native applications.
Demo
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. |
Methods
The TimeLine
component provides the following methods via the ref
prop:
Method | Description |
---|---|
goto(index: number) | Manually move the timeline to the specified index. |
License
This package is licensed under the MIT license.
Made with create-react-native-library