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
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.
npx @nativescript/storybook init
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 Q4. Reach out on Discord for more information.
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.
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.
App_Resources/Android/app.gradle
:android {
// ...
defaultConfig {
// ...
}
buildTypes {
debug {
resValue "string", "clear_text_config", "true"
}
release {
resValue "string", "clear_text_config", "false"
}
}
}
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>
App_Resources/Android/src/main/AndroidManifest.xml
to use it:<application
android:networkSecurityConfig="@xml/network_config"
...
>
</application>
What took us so long?
We are excited to see Storybooks of all shapes and colors out there so please feel free to mention @NativeScript when sharing your story!