# UI Customizations

This guide shows you how to customize the story experience of your users. These customizations apply to both storyly bar and story view.

# Storyly Bar Customizations

This section shows supported customizations on the storyly bar.

# Story Group Text Color Seen

This attribute changes the text color of the Story Group that are seen by the user.

In order to set this attribute, use the following methods:

<Storyly
    ...
    storyGroupTextColorSeen={'#ff808080'}

# Story Group Text Color Not Seen

This attribute changes the text color of the Story Group that are not seen by the user.

In order to set this attribute, use the following methods:

<Storyly
    ...
    storyGroupTextColorNotSeen={'#ff000000'}

# Story Group Text Visibility

This styling changes the visibility of story group text.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupTextIsVisible={true}

# Story Group Icon Background Color

This attribute changes the background color of the story group icon that is shown to the user as skeleton view till the stories are loaded.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupIconBackgroundColor={'#000000'}

# Story Group Icon Border Seen State Color

This attribute changes the border color of the story group icons that are seen by the user. The border consists of color gradients.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupIconBorderColorSeen={['#ff0000', '#ff0000']}

# Story Group Icon Border Not Seen State Color

This attribute changes the border color of the story group icons that are unseen by the user. The border consists of color gradients.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupIconBorderColorNotSeen={['#ff0000', '#ff0000']}

# Story Group Pin Icon Color

If any of the story groups are selected as pinned groups from the dashboard, a little star icon will appear along with the story group icon. This attribute changes the background color of this pin icon.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupPinIconColor={'#ff0000'}

# Story Group Size

This attribute changes the size of the story group. Currently, supported sizes are small, large and custom sizes. The default story group size is large.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupSize={'large'}

WARNING

If you set your story group size as custom, you can change a few measures of the story groups such as icon height, icon width, icon corner radius. Check the Custom Size Story Group Icon Styling.

# Custom Size Story Group Icon Styling

This styling changes the shape of the story group icons, their corners, and the distance between each other. Users can create square, circle, and oval-shaped icons using these attributes.

WARNING

This section is effective if you set your story group size as custom. If you set any other size and use this attribute, your changes will not take effect.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupIconWidth={100}
    storyGroupIconHeight={100}
    storyGroupIconCornerRadius={50}

WARNING

You need to set all parameters for this customization to be effective.

# Story Group List Styling

This styling changes the distance between the story groups and edge paddings of the first and last story groups.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyGroupListEdgePadding={20}
    storyGroupListPaddingBetweenItems={20}

WARNING

You need to set all parameters for this customization to be effective.

# Storyly Layout Direction

This attribute changes the layout direction of the Storyly Bar. Storyly Bar can either be LTR (Left to right) or RTL (Right to left). If your UI is bidirectional and it changes depending on the device or app language you can use this attribute.

<Storyly
    ...
    storylyLayoutDirection={'ltr | rtl'}

WARNING

Storyly will use the LTR layout if the StorylyLayoutDirection is not set.

WARNING

For Android, to declare your app is willing to support right-to-left (RTL) layout, you need to set android:supportsRtl="true" (opens new window) in your app.

# Story View Customizations

This section shows supported customizations on story view.

# Storyly View Header Text Color

This attribute changes the header text color of the story view.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyItemTextColor={'#000000'}

# Storyly View Header Icon Border Color

This attribute changes the header icon border color of the story view. The border consists of color gradients.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, two same color code can be used.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyItemIconBorderColor={['#ff0000', '#ff0000']}

# Storyly View Progress Bar Color

This attribute changes the progress bar colors, two colors, of the story view. The first defined color is the color of the background bars and the second one is the color of the foreground bars while watching the stories.

WARNING

Only 2 colors must be defined in order to use this attribute.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyItemIconBorderColor={['#ff0000', '#ff0000']}

# Storyly View Header Icon and Text Visibility

This styling changes the visibility of story group text.

In order to set this attribute, use the following method:

<Storyly
    ...
    storyHeaderTextIsVisible={true}
    storyHeaderIconIsVisible={true}
    storyHeaderCloseButtonIsVisible={true}

WARNING

You need to set all parameters for this customization to be effective.

← Initial SDK Setup Button Click & Swipe Up Events →