Video Feed (React Native)
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
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
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"
/>
VideoFeed
component supports three modes: row
, column
, and grid
.
Use grid
mode:
<VideoFeed
style={{ flex: 1 }}
source="discover"
mode="grid"
/>
Please consult Video feed configurations (React Native).
Please consult Player configurations (React Native).
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);
}}
/>
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"
/>
Please refer to Enable PiP(Picture in Picture).
The callback is triggered when users click the video feed item. The event type is VideoFeedClickEvent.
FireworkSDK.getInstance().onVideoFeedClick = (event) => {};
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 });
}