Card View

This option allows you to display our custom widget that display stories in an card format horizontally or on grid.

Layout

You first need to add our card view within your layout:

List format

<JoinStoriesCardView
    alias="<alias>"
    format="list"
    ...
/>

Grid format

<JoinStoriesCardView
    alias="<alias>"
    format="grid"
    ...
/>

Configuration

You can fine tune SDK behavior and UI, by specifying optional values of the JoinStoriesView parameter.

Show Label

Show/hide text below each card. The label is visible by default.

<JoinStoriesView
    ...
    withLabel={true|false}
    ...
/>

Label Typeface

Card views label custom font (withLabel should be true). Only .otf and .ttf formats supported

<JoinStoriesCardView
    ...
    fontName={"EB-Garamond"}
    ...
/>

Label Color

Card views label custom text color (withLabel should be true)

<JoinStoriesCardView
    ...
    labelColor="#00AA80"
    ...
/>

Card elevation

Card views custom elevation. 8 is default value

<JoinStoriesCardView
    ...
    cardElevation={10}
    ...
/>

Card raduis

Card views custom radius. 8 is default value

<JoinStoriesCardView
    ...
    cardRadius={8}
    ...
/>

Show play button

Show/hide play button below each card. The play button is visible by default

<JoinStoriesCardView
    ...
    hasPlayButton={false}
    ...
/>

Show overlay

Show/hide overlay below each card. The overlay is visible by default

<JoinStoriesCardView
    ...
    hasOverlay={false}
    ...
/>

Spacing

You can custom spacing between each card. The spacing default value is 8.

<JoinStoriesCardView
    ...
    spacing={8}
    ...
/>

Number of column

You can custom the number of column (grid format only). The number of column default value is 2.

<JoinStoriesCardView
    ...
    column={3}
    ...
/>

Grid edge

We need to known the edge of card grid container to calculate correctly the card size. By default, the value of edge is 0.

<JoinStoriesCardView
    ...
    edge={20}
    ...
/>

Card Size

By default, the size of the card is calculated by a ratio based on the width or height of the container.

If you want to custom size :

<JoinStoriesCardView
    ...
    cardSize={100}
    ...
/>

In list mode, cardSize change the witdh of card. In grid mode, cardSize change the height of card.

Player Background Color

Color of the player's background, if the player height is smaller than screen dimensions. By default, the background color is #000000. Your can use hex colors in #RGB or #RGBA format.

<JoinStoriesView
    ...
    playerBackgroundColor="#00AA0033"
    ...
/>

Player Vertical Anchor

If the player's height is smaller than screen height. The anchor default is bottom

Player vertical anchor available

Bottom

<JoinStoriesView
    ...
    playerVerticalAnchor="bottom"
    ...
/>

Top

<JoinStoriesView
    ...
    playerVerticalAnchor="topIgnoringSafeArea"
    ...
/>

<JoinStoriesView
    ...
    playerVerticalAnchor="topWithSafeArea"
    ...
/>

topWithSafeArea and topIgnoringSafeArea are specific to iOS and there is no difference for Android, which keeps the top anchor for these 2 values.

Center

<JoinStoriesView
    ...
    playerVerticalAnchor="center"
    ...
/>

Player Share Button

Change the visibility of the share button displayed on the Player view. The button is visible by default

<JoinStoriesView
    ...
    playerShowShareButton={true|false}
    ...
/>

Player Closing Button

Change the visibility of the close button displayed on the Player view. The button is visible by default

<JoinStoriesView
    ...
    playerClosingButton={true|false}
    ...
/>

Player Horizontal Margin

Apply the margin to the left and right of the player view. To maintain ratio, it also changes the height of the player view

<JoinStoriesView
    ...
    playerHorizontalMargins={10}
    ...
/>

Player Corner Radius

Apply radius to the 4 corners of the player view

<JoinStoriesView
    ...
    playerCornerRadius={30}
    ...
/>

Player Progress Bar Default Color

Change the background color of the progress bar in the player view. If no value or null is filled, the default color will be used. Format is #RRGGBB or #RRGGBBAA

<JoinStoriesView
    ...
    playerProgressBarDefaultColor="#FFFFFF"
    ...
/>

Player Progress Bar Fill Color

Change the fill color of the progress bar in the player view. If no value or null is filled, the default color will be used. Format is #RRGGBB or #RRGGBBAA

<JoinStoriesView
    ...
    playerProgressBarFillColor="#026EDA"
    ...
/>

Player Progress Bar Thickness

Change the thickness of the progress bar in the player view. If no value or null is filled, the default thickness will be used.

<JoinStoriesView
    ...
    playerProgressBarThickness={4}
    ...
/>

Player Progress Bar Radius

Change the radius of the progress bar in the player view. If no value or null is filled, the default thickness will be used. Radius will be applied to the 4 corners.

<JoinStoriesView
    ...
    playerProgressBarRadius={8}
    ...
/>

Multiple widgets

You can implement our cardView widget multiple times on the same screen, with the same or different join alias.

To do so, you need to implement n JoinStoriesView within your UI.