Player deck configurations (React Native)

PlayerDeck component provides playerDeckConfiguration prop for configuring player deck appearance, layout, autoplay, item controls, ad badge, fullscreen behavior, and subtitles.

Configuration reference

1. PlayerDeckConfiguration

2. PlayerDeckPadding

3. PlayerDeckSubtitleConfiguration

Customize player deck appearance and layout

const playerDeckConfiguration = {
  // Configure background color
  backgroundColor: '#FFFFFF',
  // Configure the corner radius for each deck item
  cornerRadius: 8,
  // Configure the spacing between each deck item
  itemSpacing: 16,
  // Configure content padding
  contentPadding: {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10,
  },
};

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  playerDeckConfiguration={playerDeckConfiguration}
/>

Customize player deck item controls

const playerDeckConfiguration = {
  // Specifies if player deck item autoplay is enabled
  autoplay: { isEnabled: true },
  // Specifies if the play icon is hidden
  playIcon: { hidden: false, iconWidth: 50 },
  // Specifies if the mute button is hidden (iOS only)
  muteButton: { hidden: false },
  // Specifies if the share button is hidden
  shareButton: { hidden: false },
  // Specifies if full screen mode is enabled for the deck player
  fullScreen: { isEnabled: true },
  // Specifies if ad badge is shown
  showAdBadge: true,
  // Configure first display mute state (iOS only): default or unmuted
  onFirstDisplayMuteState: 'default',
};

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  playerDeckConfiguration={playerDeckConfiguration}
/>

Customize player deck subtitles

const playerDeckConfiguration = {
  subtitleConfiguration: {
    // iOS only
    swapMuteAndSubtitleButtons: false,
    textColor: '#FFFFFF',
    backgroundColor: '#000000',
  },
};

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  playerDeckConfiguration={playerDeckConfiguration}
/>

Update player deck configuration

You can update playerDeckConfiguration by rendering PlayerDeck with a new configuration value.

const [playerDeckConfiguration, setPlayerDeckConfiguration] = useState({
  autoplay: { isEnabled: true },
});

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  playerDeckConfiguration={playerDeckConfiguration}
/>

const disablePlayerDeckAutoplay = () => {
  setPlayerDeckConfiguration({
    autoplay: { isEnabled: false },
  });
};