> 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,
  // Optional override of the SDK initialization mute behavior (iOS only).
  // Omit this property to follow videoLaunchBehavior.
  // onFirstDisplayMuteState: 'unmuted',
};

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

### Custom thumbnail play icon

Set `playerDeckConfiguration.playIcon.imageName` to use artwork bundled in your app:

```tsx
<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  playerDeckConfiguration={{
    playIcon: {
      hidden: false,
      imageName: 'custom_play_icon',
      iconWidth: 50,
    },
  }}
/>
```

Use an asset catalog image name on iOS or an Android `res/drawable` resource name without its extension. `systemImageName` is an iOS-only alternative. The icon stays square and retains its own colors, with no tint applied. `iconWidth` also applies when using the default artwork. See [custom thumbnail play icon](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/video-feed-configurations-react-native.md#custom-thumbnail-play-icon) for asset setup.

The default icon width is 50 on iOS and 50dp on Android. Android previously used 36dp; set `playIcon: { iconWidth: 36 }` to preserve that size.

### Autoplay and first-display mute behavior on iOS

When autoplay is enabled, the thumbnail autoplay trigger requires 100% visibility. Player Deck uses a viewport that is not inset by the safe area.

If `onFirstDisplayMuteState` is omitted, Player Deck follows the SDK initialization option `videoLaunchBehavior`: `.muteOnFirstLaunch` starts the inline deck muted; otherwise it starts unmuted. Explicitly setting `onFirstDisplayMuteState` to `'default'` or `'unmuted'` overrides that initialization behavior for the inline player. Omit it when you want the initialization setting to apply.

The full-screen player also honors `videoLaunchBehavior` when no `videoPlayerConfiguration` is supplied. See [iOS playback behavior](/firework-for-developers/react-native-sdk/integration-guide-v2/getting-started.md#ios-playback-behavior).