@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-tracking

Using npm

npm i @mindinventory/order-tracking

Usage

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-svg
• react-native-reanimated
• react-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 ios

Contributing!

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