Widgets - React Native

Initialize the Experiences SDK before you start using the widgets.

BlazeStoriesGridView

import BlazeStoriesGridView from '@wscsports/blaze-rtn-sdk';

<BlazeStoriesGridView
  style={style}
  ref={storiesGridRef}
  isEmbeddedInScrollView={isEmbeddedInScrollView}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('live-stories'),
  }}
  presetWidgetLayout={presetGridLayout}        
  blazeWidgetLayout={widgetLayoutStoriesGrid}
  blazeStoryPlayerStyle={storyPlayerGridStyle}
  playbackConfiguration={{ bufferingSpinnerDelayMs: 750 }}
  widgetDelegate={ widgetDelegate }
  perItemStyleOverrides={ perItemStyleOverrides }
/>

BlazeStoriesRowView

import BlazeStoriesRowView from '@wscsports/blaze-rtn-sdk';
		
<BlazeStoriesRowView
  style={style}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('live-stories'),
    orderType: 'aToZ',
    maxItems: 10,
    labelsPriority: [BlazeWidgetLabel.singleLabel('live-stories')],
  }}
  presetWidgetLayout={presetRowLayout}
  blazeWidgetLayout={widgetLayoutStoriesRow}
  blazeStoryPlayerStyle={storyPlayerRowStyle}
  playbackConfiguration={{ bufferingSpinnerDelayMs: 750 }}
  widgetDelegate={ widgetDelegate }
/>

BlazeMomentsRowView

import BlazeMomentsRowView from '@wscsports/blaze-rtn-sdk';
		
<BlazeMomentsRowView
  style={style}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('moments'),
  }}
  presetWidgetLayout={presetRowLayout}        
  blazeWidgetLayout={widgetLayoutMomentsRow}
  blazeMomentsPlayerStyle={momentPlayerRowStyle}
  playbackConfiguration={{ bufferingSpinnerDelayMs: 750 }}
  widgetDelegate={ widgetDelegate }
/>

BlazeMomentsGridView

import BlazeMomentsGridView from '@wscsports/blaze-rtn-sdk';
		
<BlazeMomentsGridView
  style={style}
  ref={momentsGridRef}
  isEmbeddedInScrollView={isEmbeddedInScrollView}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('moments'),
  }}
  presetWidgetLayout={presetGridLayout}        
  blazeWidgetLayout={widgetLayoutMomentsGrid}
  blazeMomentsPlayerStyle={momentPlayerGridStyle}
  playbackConfiguration={{ bufferingSpinnerDelayMs: 750 }}
  widgetDelegate={ widgetDelegate }
  perItemStyleOverrides={ perItemStyleOverrides }
/>

Videos widgets

To show Videos on React Native, use the Videos widgets, BlazeVideosRowView and BlazeVideosGridView. When a viewer taps an item, the SDK opens the fullscreen Videos player. To open the same player without a widget, use playVideo and playVideos.

As of React Native SDK 1.20.0, there's no inline video player on React Native. For a working implementation, see WidgetVideosRowList.tsx in the React Native sample app.

BlazeVideosRowView

import { BlazeVideosRowView, BlazeWidgetLabel } from '@wscsports/blaze-rtn-sdk';

<BlazeVideosRowView
  style={style}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('videos'),
  }}
  presetWidgetLayout={'VideosWidget.Row.horizontalRectangles'}
  playerStyle={videosPlayerStyle}
  playbackConfiguration={{ bufferingSpinnerDelayMs: 750 }}
  widgetDelegate={widgetDelegate}
/>

BlazeVideosGridView

import { BlazeVideosGridView, BlazeWidgetLabel } from '@wscsports/blaze-rtn-sdk';

<BlazeVideosGridView
  style={style}
  ref={videosGridRef}
  isEmbeddedInScrollView={isEmbeddedInScrollView}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('videos'),
  }}
  presetWidgetLayout={'VideosWidget.Grid.twoColumnsVerticalRectangles'}
  playerStyle={videosPlayerStyle}
  widgetDelegate={widgetDelegate}
/>

To show live and upcoming streams in a Videos widget, set videosFilterParams. See videosFilterParams and WidgetWatchLiveVideosRowList.tsx.

React Native 1.19.0 widget props

React Native SDK 1.19.0 adds the following widget props:

Prop	Widgets	Description
`playbackConfiguration`	Stories, Moments, and Videos row/grid widgets	Sets widget-level playback behavior, including `bufferingSpinnerDelayMs`.
`tabsConfiguration`	`BlazeMomentsRowView`, `BlazeMomentsGridView`	Opens a fullscreen Moments tabs player when a viewer taps a widget item.
`momentsContainerTabsDelegate`	`BlazeMomentsRowView`, `BlazeMomentsGridView`	Handles tabs-player events for the widget instance.

Moments widget to tabs

Set tabsConfiguration on a Moments row or grid widget to open a fullscreen tabs player from widget items. When tabsConfiguration is omitted, the widget behaves as a standard Moments widget.

The widget thumbnails are driven by the first tab's dataSource, so dataSource is not required when tabsConfiguration is set.

<BlazeMomentsRowView
  style={style}
  tabsConfiguration={{
    containerSourceId: 'match-moments-tabs',
    tabs: [
      {
        containerId: 'highlights',
        title: 'Highlights',
        dataSource: {
          labels: BlazeWidgetLabel.singleLabel('moments'),
        },
      },
    ],
  }}
  momentsContainerTabsDelegate={{
    onTabSelected: event => {
      console.log('Selected Moments tab:', event);
    },
  }}
/>

Use tabsStyle to customize the tabs strip and playerStyle to customize the fullscreen Moments player. Omitted fields keep the native default appearance.

React Native 1.20.0 widget props

React Native SDK 1.20.0 adds the following widget props:

Prop	Widgets	Description
`widgetRemoteIdentifier`	Stories, Moments, and Videos row/grid widgets	Puts the widget under remote Widget Builder control of its layout, data source, and per-item style overrides.
`widgetId`	Stories, Moments, and Videos row/grid widgets	Supplies your own per-instance widget identifier instead of the auto-generated one.

widgetRemoteIdentifier

Set widgetRemoteIdentifier to let the Widget Builder control the widget remotely: its layout, data source, and per-item style overrides are fetched from the remote configuration instead of the values passed locally. If the remote fetch fails, the widget falls back to the dataSource your app supplied.

<BlazeStoriesRowView
  style={style}
  widgetRemoteIdentifier={'home-top-stories'}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('live-stories'),
  }}
  presetWidgetLayout={presetRowLayout}
/>

While a widget is remote-managed, local calls that change its layout, data source, or style overrides are ignored.

Property	Type	Default	Description
`widgetRemoteIdentifier`	`string`	`undefined`	Remote identifier of the widget. When omitted, the widget uses the values your app passes locally.

On iOS, a new value is applied whenever the prop changes. On Android, the prop is read once when the widget is created, so changing it after mount has no effect. On Android, the prop also isn't supported on tabs-backed Moments widgets (widgets that use tabsConfiguration).

widgetId

Set widgetId to supply your own identifier for a widget instance, for example to correlate SDK analytics with your own screen or content identifiers. When omitted, the identifier is generated automatically ("<type>-<row|grid>-<reactTag>" on iOS, "<Type>-<Row|Grid>: <viewId>" on Android).

Property	Type	Default	Description
`widgetId`	`string`	auto-generated	Identifier of the widget instance. Read once when the widget is created on both platforms.

tabsStyle

Optional BlazePlayerTabsStyle on tabsConfiguration, controlling the tabs strip of the fullscreen Moments tabs player. Every field is optional; omitted fields keep the native default appearance.

Changed in React Native SDK 1.20.0: the tabs bar collapses when a container has 0 or 1 visible tabs. Set isTabTitleVisibleWhenSingleTab: true to keep it visible.

<BlazeMomentsRowView
  style={style}
  tabsConfiguration={{
    containerSourceId: 'match-moments-tabs',
    tabs: [ /* ... */ ],
    tabsStyle: {
      activeTabIndicator: {
        isVisible: true,
        height: 2,
      },
      isTabTitleVisibleWhenSingleTab: true,
      isTabVisibleWhenEmpty: false,
    },
  }}
/>

React Native SDK 1.20.0 adds the following BlazePlayerTabsStyle fields:

Property	Type	Default	Description
`activeTabIndicator`	`BlazePlayerActiveTabIndicatorStyle`	hidden	Underline indicator drawn beneath the active tab's title.
`isTabTitleVisibleWhenSingleTab`	`boolean`	`false`	When `true`, the tab bar stays visible when the container has 0 or 1 visible tabs. When `false`, the bar collapses.
`isTabVisibleWhenEmpty`	`boolean`	`true`	When `true`, a tab whose content is empty or fails to load stays visible and presents the player's empty state. When `false`, such a tab is removed; the first tab is always kept.

BlazePlayerActiveTabIndicatorStyle

Property	Type	Default	Description
`isVisible`	`boolean`	`false`	Whether the indicator is drawn under the active tab's title.
`height`	`number`	`2`	Indicator height, in points on iOS and dp on Android.

The indicator's color always matches the selected tab's text color and its width always matches the tab title's text width; neither is configurable.

dataSource

To set the labels, use the dataSource prop. The labels or specific story IDs in the dataSource prop determine which Stories are displayed.

dataSource={{
  labels: BlazeWidgetLabel.singleLabel('real-madrid')
}}

dataSource={{
  ids:['id1', 'id2'],
}}

For more information about data sources and label expressions, see DataSource.

shouldOrderWidgetByReadStatus

Optional prop on all row and grid widget components (BlazeStoriesRowView, BlazeStoriesGridView, BlazeMomentsRowView, BlazeMomentsGridView, and the Videos widgets).

<BlazeStoriesRowView
  style={style}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('live-stories'),
  }}
  shouldOrderWidgetByReadStatus={true}
  presetWidgetLayout={presetRowLayout}
  blazeWidgetLayout={widgetLayoutStoriesRow}
  blazeStoryPlayerStyle={storyPlayerRowStyle}
  widgetDelegate={widgetDelegate}
/>

Property	Type	Default	Description
`shouldOrderWidgetByReadStatus`	`boolean`	`true`	When `true`, unread items appear before read items. When `false`, read/unread does not change order.

See Ordering and item limits for interaction with advanced order and the difference between reordering and filtering read content.

isEmbededInScrollView

The isEmbededInScrollView property indicates whether the widget should automatically adjust its size. The property is useful when a vertically scrolling widget (for example, a grid) is embedded inside a scroll view or any other scrollable element, because it lets the widget adjust its size to its content. The property is only available for grid widgets.

widgetDelegate

For more information about the widget delegate, see Widget delegate.

perItemStyleOverrides

perItemStyleOverrides is another way to give a specific item a different style from the rest. For more information, see updateOverrideStyles.

Using the presetTheme

Preset themes are customized presets. Use them with the PresetThemeGridType enum. The following presets are available:

TWO: two columns
THREE: three columns

You can customize widgets via BlazeWidgetLayout

To customize a specific widget, use the blazeWidgetLayout prop.

Color props expect hexadecimal values in RGBA format.

const blazeWidgetLayout: BlazeWidgetLayout = {
  horizontalItemsSpacing: 10,
  verticalItemsSpacing: 10,
  itemRatio: 9/16,
  columns: 4,
  widgetItemAppearance: {
    title: {
      isVisible: true,
      readStyle: {
        font: 'HelveticaNeue',
        textSize: 10,
        letterSpacing: 1,
        textColor: '#FFFF00FF',
        lineHeight: 20,
        maxLines: 2,
        textAlign: 'Start',
      },
      unreadStyle: {
        font: 'HelveticaNeue',
        textSize: 14,
        letterSpacing: 0,
        textColor: '#FF0000FF',
        lineHeight: 10,
        maxLines: 3,
        textAlign: 'End',
      },
    },
    image: {
      position: 'TopStart',
      border: {
        isVisible: true,
        liveReadBorder: {
          isVisible: true,
          color: '#0000FF66',
          margin: 2,
          width: 1,
        },
        liveUnreadBorder: {
          isVisible: true,
          color: '#00FF0066',
          margin: 2,
          width: 1,
        },
        readBorder: {
          isVisible: true,
          color: '#FFA50024',
          margin: 2,
          width: 1,
        },
        unreadBorder: {
          isVisible: true,
          color: '#FF0000',
          margin: 0,
          width: 1,
        },
      },
      type: 'VerticalTwoByThree',
    },
  },
};

You can customize widgets stories player via BlazePlayerStoryTheme

const blazeStoryTheme: BlazePlayerStoryTheme = {
  backgroundColor: '#ffffff',
  headerGradient: {
    startColor: '#000000',
    endColor: '#ffffff',
  },
  title: {
    font: {
      fontName: 'Tahoma',
    },
    textColor: '#99ff00',
  },
  iconThumbnail: {
    width: 40,
    height: 20,
  },
  buttons: {
    mute: {
      width: 40,
      height: 40,
      color: '#F7DC6F',
    },
    exit: {
      width: 80,
      height: 80,
      color: '#646464',
      scaleType: 'CENTER_CROP',
    },
    share: {
      width: 70,
      height: 70,
      color: '#3498DB',
    },
  },
  chips: {
    ad: {
      text: 'Hello',
      textColor: '#ECF0F1',
      backgroundColor: '#2C3E50',
    },
  },
  firstTimeSlideAppearance: {
    backgroundColor: {
      colorFileName: 'first_time_color', //Android
      colorName: '#E74C3C'}, //iOS
    show: true,
    mainTitle: {
      text: 'WSC TITLE',
    },
    instructions: {
      forward: {
        headerText: {
          text: 'forward',
        },
      },
      pause: {
        headerText: {
          text: 'pause',
        },
      },
      backwards: {
        headerText: {
          text: 'backwards',
        },
      },
      transition: {
        headerText: {
          text: 'transition',
        },
      },
    },
  },
  progressBarStyle: {
    backgroundColor: '#000000',
    progressColor: '#99ff00',
  },
};

You can customize widgets moments player via BlazePlayerMomentTheme

const momentPlayerGridTheme: BlazePlayerMomentTheme = {
  title: {
    textColor: '#ffffff',
  },
  collectionTitle: {
    textColor: '#F8C471',
  },
  buttons: {
    mute: {
      width: 40,
      height: 40,
      color: '#F8C471',
      isVisible: true,
    },
    exit: {
      width: 40,
      height: 40,
      color: '#fcfcfc',
      isVisible: true,
      scaleType: 'FIT_END',
      isVisibleForAds: false,
    },
    share: {
      width: 60,
      height: 60,
      color: '#00ff5e',
      isVisible: true,
    },
    like: {
      width: 60,
      height: 60,
      color: '#ffaaaa',
      isVisible: true,
      scaleType: 'FIT_XY',
      image: {
        selectedImage: {
          imageName: 'exit',
        },
        unselectedImage: {
          imageName: 'like',
        },
      },
    },
  },
  ctaStyle: {cornerRadius: 16},
  headerGradient: {
    isVisible: true,
    startColor: '#0022ff',
    endColor: '#000000',
  },
  footerGradient: {
    isVisible: true,
    startColor: '#000000',
    endColor: '#0040ff',
  },
  shouldShowCloseButtonForAds: true,
  firstTimeSlideAppearance: {
    backgroundColor: {
      colorFileName: 'first_time_color', //Android
      colorName: '#005c8a', //iOS
    },
    instructions: {
      previous: {
        headerText: {
          text: 'previous',
        },
      },
      pause: {
        headerText: {
          text: 'pause',
        },
      },
      play: {
        headerText: {
          text: 'play',
        },
      },
      next: {
        headerText: {
          text: 'next',
        },
      },
    },
  },
  playerSeekBar: {
    isVisible: true,
    progressColor: '#1c3434',
    thumbColor: '#b3ffFF',
    thumbImage: {
      imageName: 'exit',
    },
  },
};

RTL enforcement

Forcing RTL is strongly discouraged. If you must force RTL, you can do so for widgets only.

Android:

import { I18nManager, Platform } from 'react-native';

I18nManager.forceRTL(true);

if (Platform.OS === 'android') {
  I18nManager.allowRTL(true);
}

iOS:

Inside AppDelegate:

import BlazeSDK

UIView.appearance(
  whenContainedInInstancesOf: [BlazeWidgetView.self]
).semanticContentAttribute = .forceRightToLeft

Updated 20 days ago

Did this page help you?