Skip to main content
Version: 1.7.x

Standalone player

This option allows you to trigger at will our stories player, from a button click for example.

Layout​

You can display your player using an action like a button, for example

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

const startStandAlonePlayer = () => {
    JoinStories.startStandAlonePlayer({
      alias: "widget-sdk-test-standalone",
      requestTimeoutInterval: 15,
      ...
    });
}
...
<View>
    <TouchableOpacity onPress={startStandAlonePlayer}>
        <Text>StandaloneView</Text>
    </TouchableOpacity>
</View>

Visibility is hidden by default, and will be handled by the SDK whenever triggered and stories are loaded.

Timeout used for the stories fetching network requests (call and read)

Custom Player​

The player can have many option to custom view and behavior

Origin Animation​

The animation used to show and hide the player. By default, the value is bottom

Animation origin available
JoinStories.startStandAlonePlayer({
    ...
    playerStandaloneAnimationOrigin: "bottom"
    ...
});

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.

JoinStories.startStandAlonePlayer({
    ...
    playerBackgroundColor: "#000000"
    ...
});

Player Vertical Anchor​

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

Player vertical anchor available
JoinStories.startStandAlonePlayer({
    ...
    playerVerticalAnchor: "bottom"
    ...
});

Player Share Button​

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

JoinStories.startStandAlonePlayer({
    ...
    playerShowShareButton: "true|false"
    ...
});

Player Closing Button​

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

JoinStories.startStandAlonePlayer({
    ...
    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

JoinStories.startStandAlonePlayer({
    ...
    playerHorizontalMargin: 8
    ...
});

Player Corner Radius​

Apply radius to the 4 corners of the player view

JoinStories.startStandAlonePlayer({
    ...
    playerCornerRadius: 10
    ...
});

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

JoinStories.startStandAlonePlayer({
    ...
    playerProgressBarDefaultColor = "#FFFFFF66"
    ...
});

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

JoinStories.startStandAlonePlayer({
    ...
    playerProgressBarFillColor = "#FFFFFF66"
    ...
});

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.

JoinStories.startStandAlonePlayer({
    ...
    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.

JoinStories.startStandAlonePlayer({
    ...
    playerProgressBarRadius = 8
    ...
});