ThumbView

This option allows you to display our custom widget that display stories in an horizontal scrollable view with a Instagram-like UI.

Layout

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

import { JoinStoriesView } from "@join-stories/react-native-widgets";
...

<JoinStoriesView
    alias="widget-sdk-test-standalone"
    requestTimeoutInterval={15}
    ...
/>

Display max stories on widgets

If you want to limit the number of items to be displayed in the widget, you can add maxStories parameter :

<JoinStoriesView
    alias="<alias>"
    maxStories={4}
/>

Configuration

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

Show Label

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

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

Container dimension

The height of the thumbnails can be defined. The default is 150 dp

<JoinStoriesView
    ...
    containerDimension={150}
    ...
/>

Label Typeface

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

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

Label Color

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

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

Thumb View Spacing

Spacing between thumb views

<JoinStoriesView
    ...
    thumbViewSpacing={32}
    ...
/>

Thumb View Overlay Color

Color of the overlay displayed on the thumb view image when a story was selected by the user and is loading

<JoinStoriesView
    ...
    thumbViewOverlayColor="#4C4C4CBB"
    ...
/>

Loader Inner View Width

Spacing between the image and the loader in a thumb view

<JoinStoriesView
    ...
    loaderInnerViewWidth={2}
    ...
/>

Loader Inner View Color

Color between the image and the loader in a thumb view. By default, is TRANSPARANT

<JoinStoriesView
    ...
    loaderInnerViewColor={["#000000"]}
    ...
/>

Loader Colors

Colors of the thumb view loader. A sweep gradient will be applied on it. The default colours are RED and BLUE

<JoinStoriesView
    ...
    loaderColors={["#FF0000", "#0000FF"]}
    ...
/>

Loader Width

Width of the thumb view

<JoinStoriesView
    ...
    loaderWidth={3}
    ...
/>

Story Viewed Indicator Color

Color of the thumb view indicator displayed when a story has been viewed by the user

<JoinStoriesView
    ...
    storyViewedIndicatorColor="#808080"
    ...
/>

Story Viewed Indicator Alpha

Alpha of the thumb view indicator displayed when a story has been viewed by the user. Range [0..255]

<JoinStoriesView
    ...
    storyViewedIndicatorAlpha={0.8}
    ...
/>

Thumb Horizontal Margin

We can add horizontal margin to the thumb container :

<JoinStoriesView
    ...
    horizontalMargin={20}
    ...
/>

Thumb Horizontal Padding

We can add horizontal padding to the thumb container :

<JoinStoriesView
    ...
    horizontalPadding={20}
    ...
/>

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"
    ...
/>

Consider using topWithSafeArea to avoid conflict with top bar.

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 thumbView 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.