# Story Block (React Native)

{% hint style="info" %}
For android:

StoryBlock is a heavy object containing multiple instances of the player, Heavy-lifting UI elements, and intensive background tasks, Beware that the recommended number of the StoryBlock being used in a single screen is 1. However, in a wide range of new Android devices, 2 instances might work alright. Any number of StoryBlock above this limitation is not recommended by the Firework team and is not supported.
{% endhint %}

There are four source types of the story block:

* Discover
* Channel
* Playlist
* Dynamic Content
* Hashtag Playlist
* Sku
* Single Content

## Integration

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

// discover
<StoryBlock
  style={{ height: 400 }} 
  source="discover" 
/>

// channel
<StoryBlock 
  style={{ height: 400 }} 
  source="channel" 
  channel="your encoded channel id"
/>

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

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

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

<StoryBlock 
  style={{ height: 400 }} 
  source="sku"
  channel="your encoded channel id"
  productIds={['prodct_id_1', 'product_id_2']}
/>

<StoryBlock 
  style={{ height: 400 }} 
  source="singleContent"
  channel="your encoded vide or live stream id"
  productIds={['prodct_id_1', 'product_id_2']}
/>
```

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

### Story block loading result callback

`StoryBlock` component provides `onStoryBlockLoadFinished` prop for setting video feed loading result callback.

```tsx
<StoryBlock
  style={{ height: 400 }}
  source="discover"
  onStoryBlockLoadFinished={(error) => {
  /**
    * if error is undefined, it means that story block loaded successfully. 
    * Otherwise, it means that story block failed to load.
    */
  console.log('onStoryBlockLoadFinished error', error);
  }}
/>
```

### Story block configuration

Please refer to [Player configurations (React Native)](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)

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

## Reference

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

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