Story Block (React Native)

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.

There are four source types of the story block:

• Discover

• Channel

• Playlist

• Dynamic Content

• Hashtag Playlist

• Sku

• Single Content

Integration

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']}
/>

Please refer to the Encoded IDs help article to learn about how to find your encoded channel ID, playlist ID.

Story block loading result callback

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

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

Enable PiP(Picture in Picture)

Please refer to Enable PiP(Picture in Picture).

Reference

StoryBlock

IStoryBlockProps