Back to Blog Home
← all posts

NativeScript for Storybook v7 Beta Release

June 2, 2023 — by NativeScript TSC

NativeScript for Storybook (using their latest v7 release!) will allow you to build UIs in isolation. It can help you develop hard-to-reach states and edge cases without needing to run the whole app.

A preview was first shared last year (July 2022):

Creating your Storybook

Installing the plugin makes using Storybook with NativeScript easy as 1, 2, 3.

npm install @nativescript/storybook@beta @valor/nativescript-websockets

Note: You can use any WebSocket polyfill however we preconfigure usage with @valor/nativescript-websockets for ease of use and should ensure it's added to your package.json dependencies.

1. Init config

npx @nativescript/storybook init

2. Create stories

You can create a {component}.stories.ts|js next to any component. Refer to storybook docs on writing stories:

Note: NativeScript for Storybook for all other flavors including React, Solid, and Svelte is scheduled with the final release in ~60 days. Reach out on Discord for more information.

3. Run Storybook

Launch Storybook:

npm run storybook

# or
npm run storybook android
npm run storybook ios

Once your app is booted, you can select a story in the Storybook web manager.

Note: Android Network Config

Ensure Android is configured to use cleartextTrafficPermitted option. The following will describe how you can setup debug/release configurations to make this setting remain secure upon any Android release.

  1. Add the following to your App_Resources/Android/app.gradle:
android {
  // ...

  defaultConfig {
    // ...

  buildTypes {
    debug {
      resValue "string", "clear_text_config", "true"
    release {
      resValue "string", "clear_text_config", "false"
  1. Create App_Resources/Android/src/main/res/xml/network_config.xml with the following:
<?xml version="1.0" encoding="utf-8"?>
    <base-config cleartextTrafficPermitted="@string/clear_text_config">
            <certificates src="system" />
  1. Update App_Resources/Android/src/main/AndroidManifest.xml to use it:


July 2022 to June 2023?

What took us so long?

  • We knew in the summer of last year that a lot of changes were occurring between v6 -> v7. Rather than release preliminary support for Storybook 6.5, we wanted to release with official Storybook v7 to start and we are loving the changes!
  • Mobile app integration with Storybook has traditionally used deep linking (like with React Native integrations), but we wanted to reenvision an approach with a completely socket driven toolchain which provides opportunities for an even nicer experience.

💚 Share your Stories 📚

We are excited to see Storybooks of all shapes and colors out there so please feel free to mention @NativeScript when sharing your story!