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

# Player Deck (React Native)

The `PlayerDeck` component displays a horizontally scrollable row of video thumbnails with inline playback and product cards. Currently, there are eight source types of player deck:

* Discover
* Channel
* Playlist
* Playlist Group
* Dynamic Content
* Hashtag Playlist
* SKU
* Single Content

## Integration

```tsx
import { PlayerDeck } from 'react-native-firework-sdk';

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

// channel
<PlayerDeck
  style={{ height: 580 }}
  source="channel"
  channel="your encoded channel id"
/>

// playlist
<PlayerDeck
  style={{ height: 580 }}
  source="playlist"
  channel="your encoded channel id"
  playlist="your encoded playlist id"
/>

// playlist group
<PlayerDeck
  style={{ height: 580 }}
  source="playlistGroup"
  playlistGroup="your encoded playlist group id"
/>

// dynamic content
<PlayerDeck
  style={{ height: 580 }}
  source="dynamicContent"
  channel="your encoded channel id"
  dynamicContentParameters={{
    '<cohort key>': ['<cohort value1>', '<cohort value2>'],
  }}
/>

// hashtag playlist
<PlayerDeck
  style={{ height: 580 }}
  source="hashtagPlaylist"
  channel="your encoded channel id"
  hashtagFilterExpression="<hashtag filter expression>"
/>

// sku
<PlayerDeck
  style={{ height: 580 }}
  source="sku"
  channel="your encoded channel id"
  productIds={['product_id_1', 'product_id_2']}
/>

// single content
<PlayerDeck
  style={{ height: 580 }}
  source="singleContent"
  contentId="your encoded video or live stream id"
/>
```

{% hint style="info" %}
Please refer to the [Encoded IDs](/firework-for-developers/additional-resources/encoded-ids.md) help article to learn about how to find your encoded channel ID, playlist ID, and playlist group ID.
{% endhint %}

### Player deck loading result callback

`PlayerDeck` component provides `onPlayerDeckLoadFinished` prop for setting player deck loading result callback.

```tsx
<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  onPlayerDeckLoadFinished={(error) => {
    /**
     * if error is undefined, it means that player deck loaded successfully.
     * Otherwise, it means that player deck failed to load.
     */
    console.log('onPlayerDeckLoadFinished error', error);
  }}
/>
```

### Empty callback

`PlayerDeck` component provides `onPlayerDeckEmpty` prop for setting player deck empty callback.

```tsx
<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  onPlayerDeckEmpty={(error) => {
    // Hide the component here if needed
    console.log('onPlayerDeckEmpty error', error);
  }}
/>
```

### Force refreshing player deck

```tsx
const playerDeckRef = useRef<PlayerDeck>(null);

const handleRefresh = () => {
  playerDeckRef.current?.refresh();
};

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

<Button
  onPress={handleRefresh}
  title="Refresh"
/>
```

### Get feed id

`PlayerDeck` component provides `onPlayerDeckGetFeedId` prop for getting the feed id.

```tsx
<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  onPlayerDeckGetFeedId={(feedId) => {
    // Use feedId
    console.log('onPlayerDeckGetFeedId feedId', feedId);
  }}
/>
```

### Enable PiP(Picture in Picture)

Please refer to [Enable PiP(Picture in Picture)](https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/player-configurations-react-native#enable-pip-picture-in-picture).

### Player deck configurations

Please refer to [Player deck configurations (React Native)](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/player-deck-configurations-react-native.md).

### Player configurations

Please refer to [Player configurations (React Native)](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/player-configurations-react-native.md).

## Reference

[PlayerDeck](https://eng.firework.com/react-native-firework-sdk/v2/classes/PlayerDeck.html)

[IPlayerDeckProps](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/IPlayerDeckProps.html)

[PlayerDeckSource](https://eng.firework.com/react-native-firework-sdk/v2/types/PlayerDeckSource.html)