> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/video-feed-configurations-react-native.md).

# 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](https://eng.firework.com/react-native-firework-sdk/v2/interfaces/VideoFeedConfiguration.html) for more details.

### Customize video feed item title

```tsx
<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

```tsx
<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:

```tsx
<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](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/player-deck-configurations-react-native.md#custom-thumbnail-play-icon).

### 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](/firework-for-developers/react-native-sdk/integration-guide-v2/getting-started.md#ios-playback-behavior) for related initialization and viewport behavior.