Short SDK Native

A React Native SDK for creating short video components with MQTT integration, social actions, and product cards.

Features

• 🎥 Video player with custom controls
• 💬 MQTT integration for real-time events
• ❤️ Social actions (like, share, save)
• 🛒 Product card integration
• 👤 User profile display
• 📱 Fully customizable styling
• 🔄 Event tracking system

Installation

npm install short-sdk-native

or

yarn add short-sdk-native

Usage

Basic Example

import React, { useRef } from "react";
import { ShortSdkNative, ShortSdkNativeRef } from "short-sdk-native";

const App = () => {
  const sdkRef = useRef<ShortSdkNativeRef>(null);

  const handleEvent = (type: string) => {
    sdkRef.current?.sendEvent(type as any);
  };

  return (
    <ShortSdkNative
      ref={sdkRef}
      shortVideoId="video123"
      mqtt={{
        clientId: "your-client-id",
        username: "your-username",
        password: "your-password",
      }}
      video={{
        streamUrl: "https://example.com/video.mp4",
        coverUrl: "https://example.com/cover.jpg",
        onEnded: () => console.log("Video ended"),
        onPlay: () => console.log("Video started playing"),
        isMuted: false,
        loop: true,
      }}
      actions={{
        like: {
          count: 1234,
          isLiked: false,
          onPress: () => handleEvent("like"),
        },
        share: {
          onPress: () => handleEvent("share"),
        },
        save: {
          onPress: () => handleEvent("save"),
        },
      }}
      productCard={{
        image: "https://example.com/product.jpg",
        description: "Amazing Product",
        price: 99.99,
        button: {
          children: "Buy Now",
          onPress: () => handleEvent("add-to-cart"),
        },
      }}
      profile={{
        image: "https://example.com/avatar.jpg",
        title: "John Doe",
        subTitle: "@johndoe",
        onPress: () => handleEvent("seller-view"),
      }}
    />
  );
};

export default App;

Advanced Configuration

import React from "react";
import { ShortSdkNative } from "short-sdk-native";

const AdvancedExample = () => {
  return (
    <ShortSdkNative
      shortVideoId="video456"
      mqtt={{
        clientId: "advanced-client",
        username: "user",
        password: "pass",
      }}
      video={{
        streamUrl: "https://example.com/video.mp4",
        coverUrl: "https://example.com/cover.jpg",
        onEnded: () => console.log("Video ended"),
        onSoundStateChange: (isMuted) => console.log("Sound:", isMuted),
        onPlay: () => console.log("Video playing"),
        isMuted: false,
        loop: false,
        forceDisableSound: false,
        resizeMode: "cover",
        posterResizeMode: "contain",
        style: {
          width: 300,
          height: 400,
        },
      }}
      actions={{
        like: {
          count: 5678,
          isLiked: true,
          onPress: () => console.log("Liked!"),
          style: {
            backgroundColor: "#ff4757",
          },
        },
        share: {
          onPress: () => console.log("Shared!"),
          style: {
            backgroundColor: "#2ed573",
          },
        },
        save: {
          onPress: () => console.log("Saved!"),
          style: {
            backgroundColor: "#3742fa",
          },
        },
        basket: {
          onPress: () => console.log("Added to basket!"),
          style: {
            backgroundColor: "#ffa502",
          },
        },
      }}
      productCard={{
        image: "https://example.com/product.jpg",
        description: "Premium Product with amazing features",
        price: 199.99,
        style: {
          backgroundColor: "#ffffff",
          borderRadius: 10,
          padding: 15,
        },
        button: {
          children: "Add to Cart",
          onPress: () => console.log("Added to cart"),
          style: {
            backgroundColor: "#ff4757",
            borderRadius: 5,
          },
          textStyle: {
            color: "#ffffff",
            fontWeight: "bold",
          },
        },
      }}
      profile={{
        image: "https://example.com/avatar.jpg",
        title: "Jane Smith",
        subTitle: "@janesmith",
        onPress: () => console.log("Profile clicked"),
        style: {
          backgroundColor: "rgba(0,0,0,0.7)",
          borderRadius: 20,
        },
      }}
      style={{
        backgroundColor: "#000000",
      }}
      containerStyle={{
        width: 300,
        height: 500,
      }}
    />
  );
};

API Reference

Props

ShortSdkNativeProps

| Property | Type | Required | Description | | ---------------- | ------------- | -------- | ------------------------------- | | shortVideoId | string | Yes | Unique identifier for the video | | mqtt | MqttConfig | Yes | MQTT configuration | | video | Video | Yes | Video configuration | | actions | Actions | No | Social action buttons | | productCard | ProductCard | No | Product card display | | profile | Profile | No | User profile display | | style | ViewStyle | No | Container style | | containerStyle | ViewStyle | No | Main container style |

MqttConfig

interface MqttConfig {
  clientId: string;
  username: string;
  password: string;
}

Video

interface Video {
  style?: ViewStyle;
  streamUrl: string;
  coverUrl?: string;
  onEnded?: () => void;
  onSoundStateChange?: (isMuted: boolean) => void;
  isMuted?: boolean;
  onPlay?: () => void;
  loop?: boolean;
  forceDisableSound?: boolean;
  resizeMode?: "stretch" | "contain" | "cover" | "none";
  posterResizeMode?: "stretch" | "contain" | "cover" | "none";
}

Actions

interface Actions {
  like?: {
    style?: ViewStyle;
    count: number;
    onPress?: () => void;
    isLiked?: boolean;
  };
  share?: {
    style?: ViewStyle;
    onPress?: () => void;
  };
  save?: {
    style?: ViewStyle;
    onPress?: () => void;
  };
  basket?: {
    style?: ViewStyle;
    onPress?: () => void;
  };
}

ProductCard

interface ProductCard {
  style?: ViewStyle;
  image: string | ImageSourcePropType;
  description: string;
  price: number;
  button?: {
    style?: ViewStyle;
    textStyle?: TextStyle;
    onPress?: () => void;
    children?: string;
  };
}

Profile

interface Profile {
  style?: ViewStyle;
  image: string | ImageSourcePropType;
  title: string;
  subTitle: string;
  onPress?: () => void;
}

Ref Methods

ShortSdkNativeRef

interface ShortSdkNativeRef {
  sendEvent(type: Events): void;
}

Events

Available event types:

• "like"
• "dislike"
• "share"
• "basket"
• "save"
• "add-to-cart"
• "seller-view"
• "ad-view"
• "cart-view"

Events

The SDK supports various events that can be tracked:

• like/dislike: User interaction with like button
• share: User sharing the video
• save: User saving the video
• basket: User adding to basket
• add-to-cart: User adding product to cart
• seller-view: User viewing seller profile
• ad-view: Ad impression tracking
• cart-view: User viewing cart

Styling

All components support custom styling through the style prop. You can customize:

• Colors
• Dimensions
• Borders
• Shadows
• Typography
• Layout

Requirements

• React Native >= 0.60.0
• React >= 16.8.0

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request