@join-stories/react-native-widgets

Join Stories SDK implementation for React-Native

Add the package to your npm dependencies

npm install @join-stories/react-native-widgets

Documentation

A documentation complete is available : https://developers.join-stories.com/react-native/

Example with a standalone player

...
import { Text, TouchableOpacity } from 'react-native';
import { JoinStories } from "join-stories-sdk-react-native";

const Component = () => {
    const startStandAlonePlayer = () => {
        JoinStories.startStandAlonePlayer({
        alias: "widget-test-sdk",
        requestTimeoutInterval: 15,
        playerBackgroundColor: "#00000030",
        playerStandaloneAnimationOrigin: "default",
        playerVerticalAnchor: "center",
        playerShowShareButton: false,
        playerHorizontalMargins: 10,
        playerCornerRadius: 30,
        playerProgressBarDefaultColor: "#FFFFFF",
        playerProgressBarFillColor: "#026EDA",
        playerProgressBarThickness: 4,
        playerProgressBarRadius: 8,
        });
    };

    return (<TouchableOpacity onPress={startStandAlonePlayer} style={styles.button}>
        <Text>StandaloneView</Text>
    </TouchableOpacity>)
}

Example with a thumb view

...
import { View } from 'react-native';
import { JoinStoriesView } from "join-stories-sdk-react-native";

const Thumb() => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <JoinStoriesView
        alias="widget-test-sdk" // "demo-bulles",
        requestTimeoutInterval={15}
        fontName="HelveticaNeue-Bold"
        labelColor="#808080"
        thumbViewSpacing={32}
        withLabel
        loaderInnerViewWidth={2}
        loaderInnerViewColor={["#000000"]}
        loaderColors={["#FF0000", "#0000FF"]}
        loaderWidth={3}
        storyViewedIndicatorColor="#808080"
        storyViewedIndicatorAlpha={0.8}
        // thumbViewOverlayColor // UIColor(hex8: 0x4C4C4CBB)
        playerBackgroundColor="#00000030"
        playerVerticalAnchor="center"
        playerShowShareButton={false}
        playerHorizontalMargins={10}
        playerCornerRadius={30}
        playerProgressBarDefaultColor="#FFFFFF"
        playerProgressBarFillColor="#026EDA"
        playerProgressBarThickness={4}
        playerProgressBarRadius={8}
        containerDimension={150}
        style={styles.joinStoriesView}
      />
    </View>
  );
}

Running the example Expo project

At the moment, you will need to use [email protected]

npm install -g pnpm

To run the project, you will need to:

pnpm install
cd example
pnpm reload:ios
or
pnpm reload:android