Overview

Displaying a Story is similar to displaying a Feed, except you'll specify which Story to display.

You can ask FlagshipStory to display a specific story by passing a Post ID, or you can pass a dynamic ID in response to an incoming deep link or a show story event.

Android

Use the FlagshipStoryIntent to present a single story wherever you want within your application. This will typically be used in conjunction with either a deeplink that contains the postID or the Show Story Event, which provides the ID of the Post for which a user tapped on from the Feed.

val storyIntent = FlagshipStoryIntent.Builder(this@MainActivity)
    .setPostID(postID)
    // Optional - register a delegate to handle events
    .setDelegate(myDelegate)
    .build()
    
startActivity(storyIntent)

iOS

Use the FlagshipStoryViewController to present a single story wherever you want within your application. This will typically be used in conjunction with either a deeplink that contains the postID or the Show Story Event, which provides the ID of the Post for which a user tapped on from the Feed.

let storyViewController = FlagshipStoryViewController.init(postID: YOUR_POST_ID)

// Optional - register a delegate to handle events
storyViewController.delegate = self

// Present the story view controller
YOUR_NAVIGATION_CONTROLLER.pushViewController(storyViewController, animated: true)

React Native - Basic Usage

return (
    <FlagshipStory
        postID={YOUR_POST_ID}
        // Optional - provide your event handlers
        handleCloseStory={YOUR_CLOSE_STORY_HANDLER}
        handleDeepLink={YOUR_DEEPLINK_HANDLER}
        handleAnalytics={YOUR_ANALYTICS_HANDLER}
        handleError={YOUR_ERROR_HANDLER}
    />
);

React Native - Rendering a Back Button

By default, the Story component does not render a back button, allowing you to implement this behavior as desired, such as through a navigation bar.

However, you can instruct the Story component to render a default back button or a custom back button of your design. To display the default back button, pass backButton={true} as a property to the FlagshipStory component. To display a custom back button, pass backButton={true} and provide a function to the renderBackButton property that returns JSX.

When the user taps on the back button (default or custom), the handleCloseStory event that you passed to the FlagshipStory component or Flagship constructor will be invoked, allowing you to determine how to navigate the user back to the main Feed.

const handleCloseStory = (postID?: String) => {
    // Navigate the user back to the main Feed
};

const renderBackButton = () => {
    // Note that your component will automatically be wrapped with a
    // TouchableOpacity component that will invoke the handleCloseStory event
    return (
        <MyBackButtonComponent />
    );
};

<FlagshipStory
    postID={postID}
    backButton={true}
    renderBackButton={renderBackButton}
    handleCloseStory={handleCloseStory}
/>

When the user taps on the back button (default or custom), the handleCloseStory event that you passed to the FlagshipStory component or Flagship constructor will be invoked, allowing you to determine how to navigate the user back to the main Feed.