shopclips-reels-ui-rn

React Native UI library for displaying reels/short video content with product integration.

Installation

npm install shopclips-reels-ui-rn

Dependencies

This library requires the following peer dependencies:

{
  "react-native-svg": "^15.8.0",
  "react-native-vector-icons": "^10.2.0",
  "react-native-video": "^6.7.0"
}

Usage

ReelsList Component

The main component for displaying vertical scrollable reels:

import { ReelsList } from 'shopclips-reels-ui-rn';

const reels = [
  {
    id: '1',
    image: 'thumbnail-url',
    videoUrl: 'video-url',
    products: [
      {
        id: '1',
        title: 'Product Name',
        variants: [
          {
            id: '1',
            price: '29.99',
            title: 'Default'
          }
        ],
        images: [
          {
            src: 'product-image-url',
            alt: 'Product Image'
          }
        ]
      }
    ]
  }
];

function App() {
  return (
    <ReelsList
      reels={reels}
      visible={true}
      initialIndex={0}
      onClose={() => {}}
      onAddToCart={async (product, variant) => {
        // Handle add to cart
      }}
      openCart={() => {
        // Handle cart open
      }}
      goToProduct={(product) => {
        // Handle product navigation
      }}
      onVideoProgress={(progress) => {
        // Handle video progress
      }}
      onVideoLoad={() => {
        // Handle video load
      }}
      cartCount={0}
    />
  );
}

Props

ReelsList Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | visible | boolean | Yes | Controls visibility of reels | | reels | Reel[] | Yes | Array of reel objects | | initialIndex | number | No | Starting reel index | | onClose | () => void | Yes | Called when closing reels | | onAddToCart | (product, variant) => Promise | Yes | Handle cart addition | | openCart | () => void | Yes | Open cart callback | | goToProduct | (product) => void | Yes | Product navigation | | onVideoProgress | (progress: number) => void | No | Video progress callback | | onVideoLoad | () => void | No | Video load callback | | cartCount | number | No | Cart items count |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library