Skip to content

Search#

The Search component allows users to search for Storyteller Clips and Stories. As users type, a list of suggestions will appear, from which users can either select a suggestion or search using their entered term. Results are categorized into two sections: Stories and Clips, based on their type. Filters allow users to narrow down their search results, enabling them to find specific content that meets their criteria more efficiently. For instance, users can apply filters such as date posted, content type or they can sort it by certain criteria.

Prerequisites#

Search functionality must be enabled in your Storyteller dashboard before it can be used in the app. Contact your Storyteller account manager or support if you need assistance enabling this feature.

How to Use#

The Search functionality is available through the StorytellerSdk module:

API Reference#

// Check if search is enabled
StorytellerSdk.isSearchEnabled(): boolean

// Open the search interface
StorytellerSdk.openSearch(): void

Example Usage#

import StorytellerSdk from '@getstoryteller/react-native-storyteller-sdk';

// Check if search is available before opening
if (StorytellerSdk.isSearchEnabled()) {
  StorytellerSdk.openSearch();
} else {
  console.log('Search is not enabled for this app');
}

Behavior Notes:

  • If the Storyteller player is currently displayed when openSearch() is called, it will be dismissed before presenting the Search component.
  • If search is not enabled at the dashboard level, isSearchEnabled() will return false and openSearch() will have no effect.

Search Filters#

Users can apply filters to narrow down their search results within the Search UI:

Date Posted#

  • All - default value
  • Past 24 hours
  • Last Week
  • Last Month
  • Last Year

Content Type#

  • All - default value
  • Stories
  • Clips

Sort By#

  • Relevance - default value
  • Like Count
  • Share Count
  • Date Posted

Note: Filter selections persist during the current session but reset when the Search component is dismissed and reopened.

Customization#

Certain UI parts of the Search component can be customized through theming. For more information, see the Search section in Themes.

Available customizations include:

  • Back icon
  • Heading font, size, and color (iOS only)
  • Text case for headings
  • Line height for text elements

For detailed theme configuration options, refer to the full Themes documentation.