> 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/circle-story-react-native.md).

# Circle Story (React Native)

Use the `CircleStory` component to display circular video thumbnails.

### Use the CircleStory component

```tsx
import { CircleStory } from 'react-native-firework-sdk';

<CircleStory
  style={{ height: 200 }}
  source="discover"
  circleStoryConfiguration={{
    enableAutoplay: false,
    playIcon: {
      hidden: false,
      imageName: 'custom_play_icon',
      iconWidth: 40,
    },
  }}
/>
```

For this example, bundle `custom_play_icon` in your iOS asset catalog and Android `res/drawable` directory. Omit `imageName` to keep the default artwork. `systemImageName` is also supported on iOS. The icon is square, preserves its colors, and is sized by `iconWidth`, including when using the default artwork. The default width is 40 on iOS and 36dp on Android. See [custom thumbnail play icon](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/video-feed-configurations-react-native.md#custom-thumbnail-play-icon) for details.

### Alternative: circular thumbnails with VideoFeed

You can also configure `VideoFeed` to display circular thumbnails as shown below.

```tsx
import { Platform, StyleSheet, View } from 'react-native';
import type { VideoFeedConfiguration } from 'react-native-firework-sdk';
import { VideoFeed, type VideoFeedPadding } from 'react-native-firework-sdk';

const CircleThumbnails = () => {
  const feedHeight = 200;
  const paddingTop = 10;
  const paddingRight = 10;
  const paddingBottom = 10;
  const paddingLeft = 10;

  const contentPadding: VideoFeedPadding = {
    top: paddingTop,
    right: paddingRight,
    bottom: paddingBottom,
    left: paddingLeft,
  };
  const aspectRatio = 1.0;
  let thumbnailHeight = feedHeight - paddingTop - paddingBottom;

  const videoFeedConfiguration: VideoFeedConfiguration = {
    aspectRatio: aspectRatio,
    contentPadding: contentPadding,
    cornerRadius: thumbnailHeight / 2,
    title: { hidden: true },
  };
  return (
    <View style={styles.container}>
      <VideoFeed
        style={{ height: feedHeight }}
        source="discover"
        mode="row"
        videoFeedConfiguration={videoFeedConfiguration}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: 'white',
  },
});

export default CircleThumbnails;
```