Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
@storybook/native-dev-middleware
Advanced tools
Middleware for using storybook with emulators open on a local machine
This package allows you to control an emulator open on your local device by interacting with storybook. It only supports stories that use deep linking.
To use this package, you must have an emulator open on your local machine through adb
(for Android apps), or through xcrun
(for iOS apps). You can also open your app from either Android Studio or XCode directly.
npm install @storybook/native-dev-middleware
or
yarn add @storybook/native-dev-middleware
Create a file called middleware.js
inside of your .storybook
folder. It should have contents like the below:
const { middleware } = require("@storybook/native-dev-middleware");
module.exports = middleware();
The middleware
function optionally takes in an object argument that lets you configure how to interact with emulators. Supported keys in that object are:
adb
. Defaults to adb
xcrun
. Defaults to xcrun
10000
msAn example of this file can be found here
To actually tell storybook to interact with a local emulator, the STORYBOOK_NATIVE_LOCAL_EMULATOR
environment variable must be set to a non-empty string.
Example:
export STORYBOOK_NATIVE_LOCAL_EMULATOR="true"
If you want to clear this value to go back to testing with your application with appetize.io
, you can run:
export STORYBOOK_NATIVE_LOCAL_EMULATOR=
The Storybook docs discuss additional ways to declare this environment variable.
IMPORTANT NOTE: You should not have this environment variable set when you run the build-storybook
command, as that will prevent your static storybook from working in production.
Now, you can start your storybook like how you normally would. As you interact with storybook, the emulator open on your local machine will be sent information such as what deep links to open.
On Android, there may be instances where your emulator will not start an activity because an existing instance of that activity was already active.
To work around this, you can add android:launchMode="singleTask"
to your activity in your AndroidManifest.xml
file, and create a function called onNewIntent(intent: Intent?)
in your activity class to handle switching to a new deep link.
Example manifest file
Example activity class
v3.1.1 (Fri Apr 19 2024)
@storybook/native-android-material-deep-link-example
, @storybook/native-cross-platform-example
, @storybook/native-addon
, @storybook/native-components
, @storybook/native-types
FAQs
Middleware for using storybook with emulators open on a local machine
The npm package @storybook/native-dev-middleware receives a total of 33 weekly downloads. As such, @storybook/native-dev-middleware popularity was classified as not popular.
We found that @storybook/native-dev-middleware demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 27 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.