Displaying Tagged Content

Flagship Feeds™ gives you the ability to add Tags to Posts and then specify a set of tags to be displayed within your Feed.

By default, your Feed will display all relevant Posts, regardless of any Tags. However, if you specify a list of Tags, the Feed will only display Posts with the specified Tags. Both the Scrollable Feed and Stacked Feed can be provided with a list of Tags.

Note: You should provide the Tag slugs as opposed to their display names. You can view the slugs in the Feed Tags screen in Flagship™ Feeds.

Android

The FlagshipFragment and FlagshipStackedIntent accept an optional array of tags via the setTags method. When specified, the Feed will only display Posts with one of the provided tags. If no tags are provided, the Feed will display all Posts regardless of their tags.

Note that you should provide the Tag slugs as opposed to their display names. You can view the slugs in the Feed Tags screen in FlagshipTM Feeds.

FlagshipFragment.Builder(this@MainActivity)
    .setType(FlagshipFragmentType.FEED_FRAGMENT)
    .setTags(arrayOf("tag-1", "tag-12"))
    .build()

iOS

The FlagshipFeedViewController and FlagshipStackedViewController accept an optional array of tags. When specified, the Feed will only display Posts with one of the provided tags. If no tags are provided, the Feed will display all Posts regardless of their tags.

Note that you should provide the Tag slugs as opposed to their display names. You can view the slugs in the Feed Tags screen in FlagshipTM Feeds.

let vc = FlagshipStackedViewController.init(tags: ["tag1", "tag2"])

React Native

The FlagshipFeed component accepts an optional array of tags. When specified, the Feed will only display Posts with one of the provided tags. If no tags are provided, the Feed will display all Posts regardless of their tags. Note that you should provide the Tag slugs as opposed to their display names. You can view the slugs in the Feed Tags screen in FlagshipTM Feeds.

<FlagshipFeed 
tags={["tag1", "tag2"]} 
/>

Adding a Tag Bar

You can take your Feed a step further by adding a Tag Bar. This will add a set of tabs at the top of your Feed, rendering one tab per specified Tag. Tapping on each tab will display the set of Posts that match that particular Tag.

First, provide a set of Tags to be displayed as tabs using the interface described above. The tabs will be rendered in the order in which the Tabs were specified.

Configuring the Tag Bar (iOS & Android)

Next, create an instance of the FlagshipTagBarConfig and pass it to the Feed. The following properties can be set on the config, all of which are optional:

• theme: FlagshipTagBarTheme - Which theme to use. The default is "pill."
• initialTag: String - Which tag slug to select first. If not specified, the first (leftmost) tag will be selected.
• activeColor: Int (Android) | UIColor (iOS) - The background color for the selected tab
• inactiveColor: Int (Android) | UIColor (iOS) - The background color for the inactive tabs
• activeTextColor: Int (Android) | UIColor (iOS) - The text color for the selected tab label
• inactiveTextColor: Int (Android) | UIColor (iOS) - The text color for the inactive tab labels
• fontSize: Int - The font size for the labels
• fontFamily: String- The font family to use for the labels. This must be installed within your app or built into the operating system.

Android

Create an instance of FlagshipTagBarConfig and pass to the FlagshipFragment , FlagshipFeedIntent , or FlagshipStackedIntent using the setTagBarConfig method.

val config = FlagshipTagBarConfig()
config.initialTag = "tag-1"
config.theme = FlagshipTagBarTheme.pill
config.activeColor = Color.RED
config.inactiveColor = Color.YELLOW
config.activeTextColor = Color.BLUE
config.inactiveTextColor = Color.CYAN
config.fontSize = 14
config.fontFamily = "Verdana"

return FlagshipFragment.Builder()
    .setType(FlagshipFragmentType.FEED_FRAGMENT)
    .setTags(arrayOf<String>("tag-1", "tag-2"))
    .setTagBarConfig(config)
    .build()

iOS

Create an instance of FlagshipTagBarConfig and pass it via the constructor of the FlagshipFeedViewController or FlagshipStackedViewController

var config = FlagshipTagBarConfig()
config.initialTag = "tag-1"
config.theme = FlagshipTagBarTheme.pill
config.activeColor = UIColor.red
config.inactiveColor = UIColor.yellow
config.activeTextColor = UIColor.blue
config.inactiveTextColor = UIColor.cyan
config.fontSize = 14
config.fontFamily = "Verdana"

let vc = FlagshipFeedViewController.init(
    tags: ["tag-1", "tag-2", "tag-3"],
    tagBarConfig: tagBarConfig
)

Available Themes

The SDK provides several Tag Bar themes to choose from:

pill (default)

underline

You can then customize various styles in the theme such as the colors, font size, and font family.

Configuring the Tag Bar (React Native)

To enable the Tag Bar for React Native, simply set showTagsNav={true} on the FlagshipFeed or FlagshipStacked components. You can customize the look and feel of the Tag Bar with additional props, all of which are optional:

• tagContainerStyle: ViewStyle - A set of styles for the container in which the tabs are rendered
• initialTag: String - Which tag slug to select first. If not specified, the first (leftmost) tag will be selected.
• renderTagNavigationItem: Function - A function that returns your own designs for the tabs. If none is specified, the default pill style will be used.

React Native:

const renderTagItem = ({ id, title, order, slug }, selected) => (
    <View style={[isSelected && styles.activeStyle, styles.defaultStyle]}>
        <Text>{title}</Text>
    </View>
);

return (
    <FlagshipFeed
        tags={["tag-1", "tag-2"]}
        showTagsNav={true}
        tagContainerStyle={{ padding: 5 }}
        initialTag="tag-1"
        renderTagNavigationItem={renderTagItem}
    />
);