# 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
    // Only supported on iOS
    aspectRatio: 9 / 16,
    // Configure content padding
    // Only supported on iOS
    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,
  }}
/>;
```