Skip to main content

Favorites

InAppStory SDK provides built-in support for users to mark stories as favorites, display a favorite entry cell in feeds, or render a dedicated favorites screen.

Enabling favorites in story lists​

To show a favorites entry cell inside the regular story feed, set showFavorites={true} on <StoriesList />:

<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed="default"
  showFavorites={true}
/>

When a user taps the favorite cell, you can intercept the tap using storyManager.onFavoriteCell:

storyManager.onFavoriteCell(() => {
  // Navigate to your dedicated favorites screen
  navigation.navigate('FavoritesScreen');
});

Displaying a favorites-only feed​

To render a feed containing only favorited stories (e.g. in a profile or saved tab), pass favoritesOnly={true}:

<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed="default"
  favoritesOnly={true}
/>

Custom favorite cell rendering​

Use renderFavoriteCell to provide custom rendering for the favorites card:

<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed="default"
  showFavorites={true}
  renderFavoriteCell={(favoriteStories) => (
    <View style={{ width: 100, height: 140, backgroundColor: '#333', borderRadius: 8, padding: 8 }}>
      <Text style={{ color: '#fff', fontWeight: 'bold' }}>Favorites ({favoriteStories.length})</Text>
    </View>
  )}
/>

Managing favorites programmatically​

// Remove a single story from favorites
storyManager.removeFromFavorite('123');

// Clear all favorites
storyManager.removeAllFavorites();

// Query the count of favorited stories
const count = await storyManager.favoritesCount();

Favorite events​

To react when a story is added or removed from favorites inside the reader:

storyManager.onFavoriteStory((event) => {
  const { id, value } = event.body;
  console.log(`Story ${id} favorite status changed to: ${value}`);
});