Video Feed (React Native)
Currently, there are five source types of video feed:
Discover
Channel
Playlist
Playlist Group(Only supported on iOS)
Dynamic Content
Hashtag Playlist
SKU
Single Content
Integration
import {
VideoFeed,
} from 'react-native-firework-sdk';
// discover
<VideoFeed
style={{ height: 200 }}
source="discover"
/>
// channel
<VideoFeed
style={{ height: 200 }}
source="channel"
mode="row"
channel="your encoded channel id"
/>
// playlist
<VideoFeed
style={{ height: 200 }}
source="playlist"
mode="row"
playlist="your encoded playlist id"
channel="your encoded channel id"
/>
// playlist group(only supported on iOS)
<VideoFeed
style={{ height: 200 }}
source="playlistGroup"
mode="row"
playlistGroup="your encoded playlist group id"
/>
// dynamic content
<VideoFeed
style={{ height: 200 }}
source="dynamicContent"
mode="row"
channel="your encoded channel id"
dynamicContentParameters={{
'<cohort key>': ['<cohort value1>', '<cohort value2>'],
}}
/>
// hashtag playlist
<VideoFeed
style={{ height: 200 }}
source="hashtagPlaylist"
mode="row"
channel="your encoded channel id"
hashtagFilterExpression="<hashtag filter expression>"
/>
// sku
<VideoFeed
style={{ height: 200 }}
source="sku"
mode="row"
channel="your encoded channel id"
productIds={['prodct_id_1', 'product_id_2']}
/>
// single content
<VideoFeed
style={{ height: 200 }}
source="singleContent"
mode="row"
contentId="your encoded video or live stream id"
/>
Mode
VideoFeed
component supports three modes: row
, column
, and grid
.
Use grid
mode:
<VideoFeed
style={{ flex: 1 }}
source="discover"
mode="grid"
/>
Video feed configurations
Please consult Video feed configurations (React Native).
Video player configurations
Please consult Player configurations (React Native).
Video feed loading result callback
VideoFeed
component provides onVideoFeedLoadFinished
prop for setting video feed loading result callback.
<VideoFeed
style={{ height: 200 }}
source="discover"
onVideoFeedLoadFinished={(error) => {
/**
* if error is undefined, it means that video feed loaded successfully.
* Otherwise, it means that video feed failed to load.
*/
console.log('onVideoFeedLoadFinished error', error);
}}
/>
Force refreshing video feed
const feedRef = useRef<VideoFeed>(null);
const handleRefresh = () => {
//force refreshing video feed
feedRef.current?.refresh();
};
<VideoFeed
style={{ height: 200 }}
source="discover"
ref={feedRef}
/>
<Button
onPress={handleRefresh}
title="Refresh"
/>
Enable PiP(Picture in Picture)
Please refer to Enable PiP(Picture in Picture).
onVideoFeedClick
The callback is triggered when users click the video feed item. The event type is VideoFeedClickEvent.
FireworkSDK.getInstance().onVideoFeedClick = (event) => {};
onCustomCTAClick
The callback is triggered when users click the CTA button on the video in the video player. We start the floating player in the following sample codes. The event type is CustomCTAClickEvent.
FireworkSDK.getInstance().onCustomCTAClick = async (event) => {
const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer();
if (!result) {
/* when the result is false, the current fullscreen player may not
* enable the floating player. In that case, we could call the
* following method to close the fullscreen player.
*/
await FireworkSDK.getInstance().navigator.popNativeContainer();
}
// Navigate to the RN webview page of the host app.
navigation.navigate('LinkContent', { url: event.url });
}
Reference
Last updated
Was this helpful?