@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 pnpm@7.28.0
npm install -g pnpm
To run the project, you will need to:
pnpm install
cd example
pnpm reload:ios
or
pnpm reload:android