NativeScript for Storybook v7 Beta Release

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): https://twitter.com/NativeScript/status/1544528977896755200

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:

• Angular
• Vue

Note: NativeScript for Storybook for all other flavors including React, Solid, and Svelte is scheduled with the final release in Q4. 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"
    }
  }
}

2. Create App_Resources/Android/src/main/res/xml/network_config.xml with the following:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="@string/clear_text_config">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

3. Update App_Resources/Android/src/main/AndroidManifest.xml to use it:

<application
    android:networkSecurityConfig="@xml/network_config"
    ...
    >

</application>

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!