Video feed configurations (React Native)

VideoFeed component provides videoFeedConfiguration prop for configuring Video Feed. The current configurable are backgroundColor, cornerRadius, and enableAutoplay etc. Please refer to VideoFeedConfiguration for more details.

Customize video feed item title

<VideoFeed
  style={{ height: 200 }}
  source="discover"
  videoFeedConfiguration={{
    title: {
      // Specifies if the video feed item title is hidden
      hidden: false,
      // Configure video feed item title color
      textColor: '#000000',
      // Configure video feed title item font size
      fontSize: 16,
      // Configure the number of allowed lines for the video feed item title
      numberOfLines: 2,
      // Configure iOS font info.
      // The property is ignored when fontSize is not set
      iOSFontInfo: {
        fontName: 'Helvetica',
        systemFontStyle: 'italic',
        systemFontWeight: 'bold',
      },
      // Configure Android font info.
      // The property is ignored when fontSize is not set
      androidFontInfo: {
        isCustom: false,
        typefaceName: 'SANS_SERIF',
      },
      // Configure the background drawable of video feed item title
      // Only supported on Android
      gradientDrawable: {
        orientation: 'RIGHT_LEFT',
        colors: ['#FF48C9B0', '#FFD98880', '#FFF4D03F'],
      },
    },
    // Configure video feed item title position
    titlePosition: 'nested',
  }}
/>;

Customize other video feed configuration

<VideoFeed
  style={{ height: 200 }}
  source="discover"
  videoFeedConfiguration={{
    // Configure background color
    backgroundColor: '#ffffff',
    // Configure the corner radius for video feed item
    cornerRadius: 10,
    // Configure video feed item play icon
    playIcon: {
      hidden: true,
      iconWidth: 30,
    },
    // Indicates if the video feed shows ad badge
    showAdBadge: true,
    // The aspect ratio(width / height) for video feed item
    aspectRatio: 9 / 16,
    // Configure content padding
    contentPadding: { top: 10, right: 10, bottom: 10, left: 10 },
    // Configure the item spacing
    itemSpacing: 10,
    // Specifies if video feed item autoplay is enabled
    enableAutoplay: true,
    // Configure the number of feed items to be displayed per row
    // The property only takes effect when video feed mode is grid
    gridColumns: 2,
  }}
/>;

Custom thumbnail play icon

Use playIcon.imageName to replace the thumbnail play icon with an image bundled in your app:

<VideoFeed
  style={{ height: 200 }}
  source="discover"
  videoFeedConfiguration={{
    playIcon: {
      hidden: false,
      imageName: 'custom_play_icon',
      iconWidth: 40,
    },
  }}
/>

• On iOS, add the image to your app's asset catalog, such as Images.xcassets or Assets.xcassets, and pass the asset name.

• On Android, add the image to your app's res/drawable directory and pass the resource name without the file extension.

• On iOS, you can use systemImageName, such as 'play.circle.fill', instead of imageName to select a system image. Android ignores systemImageName.

• The icon is square. iconWidth controls its size independently of the image and also applies to the default icon. The default width is 40 on iOS and 36dp on Android.

• No tint is applied to the thumbnail play icon, so custom artwork retains its own colors. Omit both image properties to keep the default artwork.

The same options are available through CircleStory's circleStoryConfiguration.playIcon and PlayerDeck's playerDeckConfiguration.playIcon. Player Deck has a different default icon width; see Player deck configurations.

Autoplay visibility on iOS

When enableAutoplay is enabled, the thumbnail autoplay trigger requires 100% visibility. The feed uses a viewport that is not inset by the safe area. See iOS playback behavior for related initialization and viewport behavior.