Appearance

AppearanceManager controls the visual presentation of story cards in the feed, readers (stories, games, In-App Messages), controls (likes, favorites, share, sound), and custom asset icons.

Stories list appearance

Configure the appearance of story cards and the feed container with setStoriesListOptions:

import {
  AppearanceManager,
  StoriesListCardTitlePosition,
  StoriesListCardTitleTextAlign,
  StoriesListCardViewVariant,
} from '@inappstory/react-native-sdk';
import { Platform } from 'react-native';

const appearanceManager = new AppearanceManager();

appearanceManager.setStoriesListOptions({
  card: {
    title: {
      fontSize: 12,
      fontWeight: 600,
      fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto',
      lineHeight: 14,
      lineClamp: 2,
      textAlign: StoriesListCardTitleTextAlign.LEFT,
      position: StoriesListCardTitlePosition.CARD_INSIDE_BOTTOM,
      padding: { paddingTop: 0, paddingRight: 8, paddingBottom: 8, paddingLeft: 8 },
    },
    gap: 8,
    height: 140,
    aspectRatio: 1,
    variant: StoriesListCardViewVariant.RECTANGLE, // CIRCLE | QUAD | RECTANGLE
    border: {
      radius: 12,
      color: '#007AFF',
      width: 2,
      gap: 2,
    },
    mask: {
      color: 'rgba(0, 0, 0, 0.2)',
    },
    opacity: 1,
    opened: {
      border: {
        radius: 12,
        color: '#8E8E93',
        width: 1,
        gap: 2,
      },
      mask: {
        color: 'rgba(0, 0, 0, 0.4)',
      },
      opacity: 0.8,
    },
  },
  favoriteCard: {
    title: {
      content: 'Saved',
    },
  },
  sidePadding: 16,
  topPadding: 8,
  bottomPadding: 8,
});

StoriesListCardOptions

Option	Type	Description
height	number	Card height in pixels
aspectRatio	number	Aspect ratio of the card
gap	number	Spacing between cards
variant	StoriesListCardViewVariant	RECTANGLE, QUAD, or CIRCLE
border	{ radius?, color?, width?, gap? }	Card border and outer ring styling
mask	{ color? }	Color overlay on top of the cover
opacity	number	Card opacity (0 to 1)
opened	Partial<StoriesListCardOptions>	Overrides for already-viewed stories
title	CardTitleOptions	Title typography and alignment

Card Title Options

Option	Type	Description
fontSize	number	Font size in points
fontWeight	string | number	Font weight (e.g. '600', 600, 'bold')
fontFamily	string	Font family name
lineHeight	number	Line height in points
lineClamp	number	Maximum number of visible lines
textAlign	StoriesListCardTitleTextAlign	LEFT, CENTER, or RIGHT
position	StoriesListCardTitlePosition	CARD_INSIDE_BOTTOM, CARD_OUTSIDE_TOP, or CARD_OUTSIDE_BOTTOM
padding	number | string | object	Inner padding for the title container

Custom story cell

To completely replace the card rendering with your own React Native components, pass renderCell or renderFavoriteCell to <StoriesList />:

<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed="default"
  renderCell={(story, { isFirstItem, isLastItem }) => (
    <View style={{ width: 100, height: 140, padding: 8 }}>
      <Image source={{ uri: story.coverImagePath }} style={{ width: '100%', height: 100 }} />
      <Text numberOfLines={2}>{story.title}</Text>
    </View>
  )}
/>

Story reader appearance

Reader-related appearance settings are configured on appearanceManager and apply globally to all readers (story reader, game reader, In-App Messages):

appearanceManager.setOverScrollToClose(true);
appearanceManager.setSwipeToClose(false);
appearanceManager.setTimerGradientEnable(true);
appearanceManager.setScrollStyle(StoryReaderSwipeStyle.FLAT);
appearanceManager.setPresentationStyle(StoryReaderPresentationStyle.MODAL);
appearanceManager.setReaderBackgroundColor('#000000');
appearanceManager.setReaderCornerRadius(16);
appearanceManager.setCoverQuality(CoverQuality.HIGH);

Method	Value type	Description
setOverScrollToClose	boolean	Allow closing reader by overscrolling
setSwipeToClose	boolean	Allow closing reader by swipe down
setTimerGradientEnable	boolean	Show gradient underneath the story progress timer
setScrollStyle	StoryReaderSwipeStyle	Transition animation: FLAT, COVER, CUBE, DEPTH
setPresentationStyle	StoryReaderPresentationStyle	Screen presentation: ZOOM, MODAL, FADE
setReaderBackgroundColor	string	Background color of the reader container
setReaderCornerRadius	number	Reader corner radius in px
setCoverQuality	CoverQuality	Cover image resolution: CoverQuality.MEDIUM or HIGH

You can also set reader options together via setStoryReaderOptions:

appearanceManager.setStoryReaderOptions({
  closeButtonPosition: StoryReaderCloseButtonPosition.RIGHT,
  scrollStyle: StoryReaderSwipeStyle.FLAT,
  slideBorderRadius: 16,
});

Likes, share, favorites

Configure which buttons are displayed in the story reader with setCommonOptions:

appearanceManager.setCommonOptions({
  hasLike: true,
  hasLikeButton: true,
  hasDislikeButton: false,
  hasFavorite: true,
  hasShare: true,
  coverQuality: CoverQuality.HIGH,
});

Custom icons

Customize reader toolbar icons by passing the names of assets bundled with your application:

appearanceManager.setLikeImage('like_icon', 'like_icon_selected');
appearanceManager.setDislikeImage('dislike_icon', 'dislike_icon_selected');
appearanceManager.setFavoriteImage('fav_icon', 'fav_icon_selected');
appearanceManager.setShareImage('share_icon', 'share_icon_selected');
appearanceManager.setSoundImage('sound_on_icon', 'sound_muted_icon');
appearanceManager.setCloseReaderImage('close_reader_icon');
appearanceManager.setRefreshImage('refresh_icon');
appearanceManager.setRefreshGoodsImage('refresh_goods_icon');
appearanceManager.setCloseGoodsImage('close_goods_icon');