> 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/customization-react-native/player-deck-configurations-react-native.md).

# 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](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/PlayerDeckConfiguration.html)
2. [PlayerDeckPadding](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/PlayerDeckPadding.html)
3. [PlayerDeckSubtitleConfiguration](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/PlayerDeckSubtitleConfiguration.html)

### Customize player deck appearance and layout

```tsx
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

```tsx
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

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

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

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

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