Overview

Props for your Flagship Scrollable and Stacked Feeds as well as Flagship Story to customize the appearance and behavior.

scroll (Scrollable Feeds)

By default scroll is true and will render the Feed as a <Flatlist>. Setting to false will render feed in a <View> instead.

scroll?: boolean;

touchableActiveOpacity (All Feed Types)

Set the default activeOpacity of touchable feed components such as images, text, buttons that have links attached. Default value is 1.

touchableActiveOpacity?: number;

videoPaused (Stacked Feeds)

In a stacked feed, this allows you to optionally control the pause/play status of the current video in focus from the app. This allows you to pause the video when navigating to different tabs or deeplinking elsewhere in the app, then resuming when navigating back.

videoPaused?: boolean;

Example:

const [isPaused, setIsPaused] = useState(false);

<FlagshipStacked 
videoPaused={isPaused} 
/>

feedsRef (Scrollable & Stacked Feeds)

The sdk exposes two separate refs for control of the scrollable and stacked feeds. This will allow the app to control custom scrolling actions (for scrollable feeds) or paging to certain items (in the stacked feed).

feedsRef?: FeedsRef;

Example:

import type { FeedsRef } from '@brandingbrand/flagship-sdk';

const feedsRef = useRef<FeedsRef>(null);
const stackedRef = useRef<FeedsRef>(null);

<FlagshipFeed feedsRef={feedsRef} />
<FlagshipStacked feedsRef={stackedRef} />

// Usage:
if (feedsRef?.current) {
    feedsRef.current?.scrollToOffset({ animated: true, offset: 0 });
}

if (stackedRef?.current) {
    stackedRef.current?.setPage(0);
}

contentInsetAdjustmentBehavior (Scrollable Feeds & Story)

This property specifies how the safe area insets are used to modify the content area of the scroll view. Available on iOS 11 and later. This defaults to automatic, and will allow for some default space above the Flatlist at the top of the feed on load, depending on the device. To force the content to always be pushed to the top of the screen, use contentInsetAdjustmentBehavior='never'.

contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';

ContainerStyle (All Feed Types)

Exposes the container style of the View that wraps the entire feed. Most useful for setting the background color of the whole feed.

containerStyle?: StyleProp<ViewStyle>;

Example:

<FlagshipFeed
    containerStyle={{
        backgroundColor: '#000000'
    }}
/>

renderGhost (All Feed Types)

Customize the default ghost screen with a function that returns a React element.

renderGhost?: () => JSX.Element;

Example:

const renderCustomLoadingComponent = () => (
    <View>
        <Image source={logo} />
        <Text>Loading Feed...</Text>
    </View>
);

<FlagshipFeed renderGhost={renderCustomLoadingComponent} />

backArrowPosition (Story Only)

This positions the back arrow when browsing to a feed story. The default position is top: 50 and left: 10.

backArrowPosition?: StyleProp<ViewStyle>;

Example:

<FlagshipStory
    backButton
    postID={id}
    backArrowPosition={{
        top: 10,
        left: 5
    }}
/>