Home
GuidesAPI ReferenceRelease Notes
HomeLog InHome
Guides
Home
  1. SDK React Native

Widgets React Native

🚧

Please notice that BlazeSDK must been initialized 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 }
/>

React Native 1.19.0 widget props

React Native SDK 1.19.0 adds the following widget props:

PropWidgetsDescription
playbackConfigurationStories, Moments, and Videos row/grid widgetsSets widget-level playback behavior, including bufferingSpinnerDelayMs.
tabsConfigurationBlazeMomentsRowView, BlazeMomentsGridViewOpens a fullscreen Moments tabs player when a viewer taps a widget item.
momentsContainerTabsDelegateBlazeMomentsRowView, BlazeMomentsGridViewHandles 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:

PropWidgetsDescription
widgetRemoteIdentifierStories, Moments, and Videos row/grid widgetsPuts the widget under remote Widget Builder control of its layout, data source, and per-item style overrides.
widgetIdStories, Moments, and Videos row/grid widgetsSupplies 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.

PropertyTypeDefaultDescription
widgetRemoteIdentifierstringundefinedRemote 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 — changing it after mount has no effect — and it is not 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).

PropertyTypeDefaultDescription
widgetIdstringauto-generatedIdentifier 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 now 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:

PropertyTypeDefaultDescription
activeTabIndicatorBlazePlayerActiveTabIndicatorStylehiddenUnderline indicator drawn beneath the active tab's title.
isTabTitleVisibleWhenSingleTabbooleanfalseWhen true, the tab bar stays visible when the container has 0 or 1 visible tabs. When false, the bar collapses.
isTabVisibleWhenEmptybooleantrueWhen 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

PropertyTypeDefaultDescription
isVisiblebooleanfalseWhether the indicator is drawn under the active tab's title.
heightnumber2Indicator 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 stories that will be displayed are determined by labels or specific stories ids in dataSource prop.

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

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

**For more info about DataSource and Label expression DataSource


shouldOrderWidgetByReadStatus

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

<BlazeStoriesRowView
  style={style}
  dataSource={{
    labels: BlazeWidgetLabel.singleLabel('live-stories'),
  }}
  shouldOrderWidgetByReadStatus={true}
  presetWidgetLayout={presetRowLayout}
  blazeWidgetLayout={widgetLayoutStoriesRow}
  blazeStoryPlayerStyle={storyPlayerRowStyle}
  widgetDelegate={widgetDelegate}
/>
PropertyTypeDefaultDescription
shouldOrderWidgetByReadStatusbooleantrueWhen 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. This property is useful when a vertically- scrolling Widget (For example, Grid) is embedded inside a scroll view or any other scrollable element, as it allows the Widget to adjust its size according to its content. This property is only available for Grid widgets.


widgetDelegate

You can find more information about the widget's delegate here.

perItemStyleOverrides

This is another way to set a specific item's style different than the rest. You can find more info here.


Using the presetTheme

Preset themes are customized presets and you can use them with PresetThemeGridType enum.
The following presets available:

  1. TWO - two columns
  2. THREE - three columns

You can customize widgets via BlazeWidgetLayout

You can customize the specific widget via blazeWidgetLayout prop

note - the instances of the Props color type anticipate receiving hexadecimal values in the 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

We strongly discourage forcing RTL. That said, if you must force RTL, it is possible to 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 about 1 month ago

Did this page help you?