# @join-stories/react-native-widgets

> Join Stories SDK implementation for React-Native

Latest version **2.9.0** (published 2026-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @join-stories/react-native-widgets
pnpm add @join-stories/react-native-widgets
yarn add @join-stories/react-native-widgets
bun add @join-stories/react-native-widgets
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.9.0 |
| Published | 2026-09-18 |
| First published | 2023-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Join Stories |
| Maintainers | edoudou, llccrr, maxime-join, dcombe |
| Keywords | react-native, story, JoinStories |

## Links

- npm: https://www.npmjs.com/package/@join-stories/react-native-widgets
- Repository: https://github.com/teamjoin/join-stories-sdk-react-native-demo
- Homepage: https://github.com/teamjoin/join-stories-sdk-react-native-demo#readme
- Issues: https://github.com/teamjoin/join-stories-sdk-react-native-demo/issues
- npm.io page: https://npm.io/package/@join-stories/react-native-widgets

## Alternatives

- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@regle/core](https://npm.io/package/@regle/core.md) — 47.0K weekly downloads
- [typeof-arguments](https://npm.io/package/typeof-arguments.md) — 12.5K weekly downloads
- [@lokalise/projects-engine-contracts](https://npm.io/package/@lokalise/projects-engine-contracts.md) — 978 weekly downloads
- [@osjwnpm/nam-laboriosam-quibusdam](https://npm.io/package/@osjwnpm/nam-laboriosam-quibusdam.md) — 70 weekly downloads

## Recent versions

- 2.9.0 (latest) — 2026-09-18
- 2.8.1 — 2026-08-27
- 2.8.0 — 2026-07-17
- 2.7.1 — 2026-06-12
- 2.7.0 — 2026-03-31
- 2.7.0-beta01 — 2026-03-06
- 2.6.8-beta01 — 2026-02-12
- 2.6.7 — 2025-12-18
- 2.6.6 — 2025-12-16
- 2.6.5 — 2025-12-16
- 2.6.4 — 2025-12-15
- 2.6.3 — 2025-11-13
- 2.6.2 — 2025-10-23
- 2.6.1 — 2025-10-22
- 2.6.0 — 2025-10-03
- … 31 more at https://npm.io/package/@join-stories/react-native-widgets/versions

## README

# @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 complete documentation is available at : https://docs.join-stories.com/docs/react-native-initial-sdk-setup

### 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 npm@9.5.0

To install the project dependencies, you will need to:

```bash
brew install cocoapods
npm install
cd example
npm install
```

To run the project, you will need to:

```bash
npm run ios
```

or 

```bash
npm run android
```

---
_Source: https://npm.io/package/@join-stories/react-native-widgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._