JoinStories SDK offers different ways to display your widget. There are currently two available triggers:

Bubbles
Cards

Bubble Component

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

Example

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

export default function Home() {
  return (
  	<SafeAreaView>
    	<Text>Welcome !</Text>
      <JoinStoriesView 
        alias="<your_join_alias>" 
        fontName="EBGaramond-ExtraBold"
        labelColor="#FFFF80"
        spacing={16}
        withLabel
        loaderColors={['#FF0000AA', '#FF0033FF']}
        loaderWidth={3}
        customParameters={{
          Food: 'burgers,vegetables',
          Age: '21',
        }}
        storyViewedIndicatorColor="#808080"
        playerBackgroundColor="#330000AA"
        playerVerticalAnchor="top"
        playerHorizontalMargins={10}
        playerCornerRadius={30}
        horizontalPadding={10}
        playerProgressBarDefaultColor="#FFFFFF33"
        playerProgressBarFillColor="#FFFFFF"
        playerProgressBarThickness={4}
        playerProgressBarRadius={8}
        horizontalMargin={12}
        hasPlayButton={true}
        labelSize={18}
        bubbleSize={80}
        maxStories={6}
        playerStandaloneAnimationOrigin="top"
      />
    </SafeAreaView>)
}

List of props

Here is the list of available props:

Name	Type	Default	Description
alias	string	`""`	Your widget alias, see Initial SDK Setup for explanations on how to find it.
maxStories	number	`-1`	max number of stories to display. If value is `-1`, it will display all stories.
customParameters	Record<string,string>	`{}`	A dictionary of key,values to filter stories based on your audiences. See Targeting: Audiences for more info.
bubbleSize	number	`74`	Bubble's height.
withLabel	boolean	`true`	show / hide stories labels.
labelColor	string	`#000000`	label's color in hexadecimal
fontName	string	`Avenir`	label's font
labelSize	number	`12`	label's size
hasPlayButton	boolean	`true`	show / hide play button
spacing	number	`12`	Space between bubbles.
storyViewedIndicatorColor		`#808080`	border's color when the story is read.
loaderColors	string[]	`[]`	a list of colors to display around the bubble.
loaderWidth	number	`2`	border's thickness.
horizontalMargin	number	`0`	internal component's margin.
horizontalPadding	number	`0`	internal component's padding.
style	ViewStyle	`undefined`	Custom React native style.

Component has also access to player's props. See Standalone Player.

Card Component

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

Example

import { JoinStoriesCardView } from '@join-stories/react-native-widgets';

export default function Home() {
  return (
  	<SafeAreaView>
    	<Text>Welcome !</Text>
      <JoinStoriesCardView 
        alias="<your_join_alias>" 
        format="list"
        hasOverlay={false}
        labelColor="#FF0000"
        playerBackgroundColor="#FFFFFF33"
        playerVerticalAnchor="top"
        playerHorizontalMargins={10}
        playerCornerRadius={30}
        playerProgressBarDefaultColor="#FFFFFF"
        playerProgressBarFillColor="#026EDA"
        playerProgressBarThickness={4}
        playerProgressBarRadius={8}
        horizontalPadding={20}
        cardRadius={35}
        cardElevation={5}
        spacing={15}
        maxStories={4}
        labelSize={18}
        customParameters={{
          Food: 'burgers,vegetables',
          Age: '21',
        }}
        withLabel={true}
        hasPlayButton={false}
        cardSize={25}
        horizontalMargin={20}
        column={4}
        playerStandaloneAnimationOrigin="top"
        fontName="EBGaramond-ExtraBold"
      />
    </SafeAreaView>)
}

List of props

Here is a list of available props:

Name	Type	Default	Description
alias	string	`""`	Your widget alias, see Initial SDK Setup for explanations on how to find it.
maxStories	number	`-1`	max number of stories to display. If value is `-1`, it will display all stories.
customParameters	Record<string,string>	`{}`	A dictionary of key,values to filter stories based on your audiences. See Targeting: Audiences for more info.
format	`grid`\|`list`	`list`	How to display the cards. Either on one single line (`list`) or in a grid (`grid`)
column	number	`2`	Only works with `grid` format. Number of columns on the grid
cardSize	number	`undefined`	Card's height. By default a card is in 9:16 format and its height depends on the device's width and the number of columns.
withLabel	boolean	`true`	show / hide stories labels.
labelColor	string	`#FFFFFF`	label's color in hexadecimal
fontName	string	`Avenir`	label's font
labelSize	number	`12` (list) `19` (grid)	label's size
hasPlayButton	boolean	`true`	show / hide play button
cardElevation	number	`2`	card's shadow. Only works on Android.
cardRadius	number	`8` (list) `10` (grid)	card's border radius.
hasOverlay	boolean	`true`	show / hide overlay present at the bottom of each card (below the label).
spacing	number	`6` (list) `16` (grid)	Space between cards.
horizontalMargin	number	`0`	internal component's margin.
horizontalPadding	number	`0`	internal component's padding.
style	ViewStyle	`undefined`	Custom React native style.

Component has also access to player's props. See Standalone Player.

Standalone Player

This section shows supported customizations on the Standalone player.

Example

export default function Home() {
  const openPlayer = () => {
  	JoinStories.startStandalonePlayer({ 
      alias: '<your_join_alias>',
      playerBackgroundColor: '#000133',
      playerStandaloneAnimationOrigin: 'top',
      playerVerticalAnchor: 'center',
      playerHorizontalMargins: 30,
      playerCornerRadius: 10,
      playerProgressBarDefaultColor: '#002244',
      playerProgressBarFillColor: '#99AA00',
      playerProgressBarThickness: 4,
      playerProgressBarRadius: 8,
      customParameters: {
        Food: 'burgers,vegetables',
        Age: '21',
      },
    });
  }
  return (
  	<SafeAreaView>
    	<Button title="Open player" onPress={openPlayer} />
    </SafeAreaView>)
}

List of parameters

Here is a list of available props:

Name	Type	Default	Description
alias	string	`""`	Your widget alias, see Initial SDK Setup for explanations on how to find it.
customParameters	Record<string,string>	`{}`	A dictionary of key,values to filter stories based on your audiences. See Targeting: Audiences for more info.
playerBackgroundColor	string	`#000000`	player background's color in hexadecimal
playerStandaloneAnimationOrigin	`top` \| `topLeft`\| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottom`	origin of the player's open animation.
playerVerticalAnchor	`top`\|`bottom` \|`center`	`top`	changes the player anchor when the player's height is smaller than screen height.
playerCornerRadius	number	`0`	player borders' radius
playerHorizontalMargins	number	`0`	player's horizontal margin
playerProgressBarDefaultColor	string	`#FFFFFF7F`	progress bar's default color
playerProgressBarFillColor	string	`#FFFFFF`	progress bar's fill color
playerProgressBarThickness	number	`2`	progress bar thickness
playerProgressBarRadius	number	`6`	progress bar radius