> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/use-modern-design-react-native.md).

# 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.

```javascript
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.

```javascript
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`.

```typescript
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',
      },
    },
  },
};
```

{% hint style="info" %}
For more shopping-related configurations, please refer to [Shopping configurations (React Native)](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/shopping-configurations-react-native.md).
{% endhint %}