1.0.2 • Published 3 years ago
@mindinventory/order-tracking v1.0.2
@mindinventory/order-tracking
With order track library you can easily integrate tracking view of library with all the customization in Horizontal & Vertical direction.
Installation
Using yarn
yarn add @mindinventory/order-trackingUsing npm
npm i @mindinventory/order-trackingUsage
import OrderTrackList from '@mindinventory/order-tracking';
// ...
const orderData = [
{
status: 'Order Confirmed',
date: `Tue, 28th Dec '21 - 1:47 PM`,
},
{
status: 'Shipped',
date: `Thu, 30th Dec '21 - 1:30 AM`,
},
{
status: 'Out For Delivery',
date: `Thu, 30th Dec '21 - 11:31 AM`,
},
{
status: 'Delivered',
date: `Thu, 30th Dec '21 - 4:45 PM`,
},
{
status: 'Return',
date: `Thu, 31st Dec '21 - 2:23 PM`,
},
];
<OrderTrackList
data={orderData}
renderItem={renderOrderData}
completedIndex={count}
/>;Component props
| Prop | Value | Required/Optional | Description |
|---|---|---|---|
| data | array | required | Array of your order status like: ordered, delivered, return, etc. |
| renderItem | function | required | Works similar like flatlist renderItem, to render your order status array. |
| completedIndex | number | required | Used for updating the completed order index animation. |
| horizontal | boolean | optional | Use for horizontal component view of Order track UI. |
| strokePendingColor | string | optional | Use for default stroke color. |
| strokeCompletedColor | string | optional | Use for order completed stroke color. |
| strokeDuration | number | optional | Use to specify duration of path animation in milliseconds (default 1000 ms). |
| strokeWidth | number | optional | Use for set width of stroke (default 5). |
| strokeLength | number | optional | Use for set length of stroke (default 50). |
| enableRippleAnimation | boolean | optional | Use for enabling ripple effect animation in progress view (default true). |
| rippleRadius | number | optional | Use for set radius of ripple effect. More the radius, more will be ripple effect outer circle (default 20). |
| rippleDuration | number | optional | Use to specify duration of ripple effect in milliseconds (default 600 ms). |
| rippleDelay | number | optional | Use to specify delay between two consecutive ripple effects animation in milliseconds (default 400 ms). |
| rippleStyle | style | optional | Use to set custom style to ripple effect |
| completedViewStyle | style | optional | Use to set custom style to default completed order status view |
| pendingViewStyle | style | optional | Use to set custom style to default pending order status view |
| progressViewStyle | style | optional | Use to set custom style to default progress order status view |
| strokeContainerStyle | style | optional | Use to set custom style to animation path container |
| strokeComponentWidth | number | optional | Use to set width of custom component (default 25 for vertical & 20 for Horizontal). |
| completedComponent | function | optional | Use to set custom completed order status view |
| pendingComponent | function | optional | Use to set custom pending order status view |
| progressComponent | function | optional | Use to set custom progress order status view |
Dependencies
react-native-svgreact-native-reanimatedreact-native-gesture-handler
To run example
Goto example directory and install all packages that requires.
cd example && yarn
Pod Installation: cd example && cd ios && pod install && cd ..
To Run: yarn iosContributing!
See the contributing guide to learn how to contribute to the repository and the development workflow.
License!
@mindinventory/order-tracking MIT-licensed.
Let us know!
If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com