Use modern design (React Native)

Use modern (v2) short video player

The host app can utilize the following code to enable the modern (v2) design for short videos.

import FireworkSDK, { ShortVideoPlayerDesignVersion } from 'react-native-firework-sdk';

FireworkSDK.getInstance().shortVideoPlayerDesignVersion =
  ShortVideoPlayerDesignVersion.v2;

Use modern (v2) livestream player

The modern (v2) livestream player offers a more extensive feature set than the classic (v1) version. For instance, features such as Giveaway, Trivia Giveaway, and AI Copilot are available exclusively in the modern player, and are not supported in the classic player.

import FireworkSDK, { LivestreamPlayerDesignVersion } from 'react-native-firework-sdk';

// Use modern (v2) livestream player
FireworkSDK.getInstance().livestreamPlayerDesignVersion =
  LivestreamPlayerDesignVersion.v2;

Customize the V2 product card

When the modern (v2) design is enabled, shoppable videos display the V2 product card. You can customize it via the productCardV2 property of FireworkSDK.getInstance().shopping.productInfoViewConfiguration.

FireworkSDK.getInstance().shopping.productInfoViewConfiguration = {
  // Configure the V2 product card for videos
  productCardV2: {
    // The corner radius of the V2 video product card
    cornerRadius: 8,
    // The background color of the V2 video product card
    // If not set, the default gradient background will be applied
    backgroundColor: '#ffffff',
    // The border configuration of the V2 video product card
    borderConfiguration: {
      // The border color of the V2 video product card
      color: '#ffffff',
    },
    // The label configuration of product name
    nameLabel: {
      textColor: '#3f4145',
    },
    // The price configuration of the V2 video product card
    priceConfiguration: {
      // The label configuration of price
      priceLabel: {
        textColor: '#3f4145',
      },
      // The label configuration of discount
      discountLabel: {
        textColor: '#ff4040',
      },
      // The label configuration of original price
      originalPriceLabel: {
        textColor: '#6b6e73',
      },
    },
  },
};

For more shopping-related configurations, please refer to Shopping configurations (React Native).