Stories List

StoriesList is the primary React Native component for rendering a feed of story cards (carousels or vertical lists).

Usage

Create your StoryManager and AppearanceManager instances and pass them to <StoriesList />:

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import {
  StoriesList,
  type StoriesListRef,
  type ListLoadStatus,
} from '@inappstory/react-native-sdk';
import { storyManager, appearanceManager } from './StoryService';

export function HomeScreen() {
  const storiesListRef = useRef<StoriesListRef>(null);

  const handleLoadStart = () => {
    console.log('Stories loading started');
  };

  const handleLoadEnd = (status: ListLoadStatus) => {
    console.log('Stories loaded:', status.feed, 'count:', status.defaultListLength);
  };

  return (
    <View style={styles.container}>
      <StoriesList
        ref={storiesListRef}
        storyManager={storyManager}
        appearanceManager={appearanceManager}
        feed="default"
        onLoadStart={handleLoadStart}
        onLoadEnd={handleLoadEnd}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Props

Prop	Type	Default	Description
storyManager	StoryManager (required)	—	The StoryManager instance
appearanceManager	AppearanceManager (required)	—	The AppearanceManager styling configuration
feed	string (required)	—	Slug / ID of the feed to display (e.g. 'default')
onLoadStart	() => void	—	Callback invoked when the feed starts loading
onLoadEnd	(status: ListLoadStatus) => void	—	Callback invoked when the feed finishes loading
showFavorites	boolean	false	Whether to include the favorites entry cell in the list
favoritesOnly	boolean	false	When true, displays only the list of favorited stories
vertical	boolean	false	Layout mode: horizontal carousel (false) or vertical (true)
renderCell	RenderCell	—	Custom render function for standard story cells
renderFavoriteCell	RenderFavoriteCell	—	Custom render function for the favorite story cell

Reloading the feed (StoriesListRef)

Pass a ref typed as StoriesListRef to imperatively reload the stories feed (e.g. on pull-to-refresh):

const storiesListRef = useRef<StoriesListRef>(null);

// Trigger a reload
storiesListRef.current?.reload();

<StoriesList ref={storiesListRef} /* ...props */ />

ListLoadStatus

The onLoadEnd callback receives a ListLoadStatus object:

export type ListLoadStatus = {
  feed: string | number;
  defaultListLength: number;
  favoriteListLength: number;
  success: boolean;
  list: string;
  error: {
    name: string;
    networkStatus: number;
    networkMessage: string;
  } | null;
};

Custom Story Cells

You can completely customize how each story card or favorite cell is rendered using renderCell and renderFavoriteCell:

import type { Story, RenderCell, RenderFavoriteCell } from '@inappstory/react-native-sdk';
import { View, Text, Image, TouchableOpacity } from 'react-native';

const customRenderCell: RenderCell = (story: Story, { isFirstItem, isLastItem }) => {
  return (
    <View style={{ width: 100, height: 140, marginHorizontal: 4 }}>
      <Image
        source={{ uri: story.coverImagePath }}
        style={{ width: '100%', height: 100, borderRadius: 8 }}
      />
      <Text numberOfLines={2} style={{ color: story.titleColor }}>
        {story.title}
      </Text>
    </View>
  );
};

<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed="default"
  renderCell={customRenderCell}
/>

Vertical Stories List

To display items in a vertical list instead of a horizontal carousel:

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