Skip to main content

​
Stories

The SDK provides story/collection highlights similar to Instagram Stories. Stories are managed through the Stackfront REST API and support view tracking, tap tracking, and poll voting.

​
Usage

import { useStories } from 'react-native-stackfront-sdk';

function StoryHighlights() {
  const { stories, loading, recordView, recordTap, recordPollVote } = useStories();

  if (loading) return <Loading />;

  const groups = stories?.groups ?? [];

  return (
    <StoryCarousel>
      {groups.map((group) => (
        <StoryGroup
          key={group.id}
          group={group}
          onStoryView={(storyId) => recordView(storyId, group.id, true)}
          onElementTap={(storyId, elementId) => recordTap(storyId, elementId, true)}
          onPollVote={(storyId, elementId, optionId) =>
            recordPollVote(storyId, elementId, optionId)
          }
        />
      ))}
    </StoryCarousel>
  );
}

​
Hook API

function useStories(): {
  stories: SdkStoriesResponse | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
  recordView: (storyId: string, storyGroupId: string, watchedFullDuration: boolean) => Promise<void>;
  recordTap: (storyId: string, elementId: string, actionTaken: boolean) => Promise<void>;
  recordPollVote: (storyId: string, elementId: string, optionId: string) => Promise<StoryPollVoteResponse>;
}

​
Service API

const { stories } = useStackfront();

await stories.getStories();
await stories.recordView({ storyId, storyGroupId, watchedFullDuration, oneSignalPlayerId });
await stories.recordTap({ storyId, elementId, actionTaken, oneSignalPlayerId });
await stories.recordPollVote({ storyId, elementId, optionId, oneSignalPlayerId });