
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@kadira/react-native-storybook
Advanced tools
A better way to develop React Native Components for your app
With React Native Storybook you can design and develop individual React Native components without running your app.
First, install the @kadira/react-native-storybook
into your project.
npm i -D @kadira/react-native-storybook
Then render our StorybookUI
component as the root component by editing your index.ios.js
or index.android.js
file as shown follow:
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@kadira/react-native-storybook';
// import your stories
configure(() => {
require('./src/stories');
}, module);
const StorybookUI = getStorybookUI({port: 9001, host: 'localhost'});
AppRegistry.registerComponent('RnHello', () => StorybookUI);
Then write your first story in the src/stories/
directory like this:
// index.js
import React from 'react';
import { storiesOf } from '@kadira/react-native-storybook';
import { View, Text } from 'react-native';
const style = {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
};
const CenteredView = (props) => (
<View style={style}>
{props.children}
</View>
);
storiesOf('CenteredView')
.add('default view', () => (
<CenteredView>
<Text>Hello Storybook</Text>
</CenteredView>
));
Then add following NPM script into your package.json
file:
{
"scripts": {
...
"storybook": "storybook start -p 9001"
...
}
}
After that run the storybook server like this:
npm run storybook
This will start the storybook server at port: 9001
Finally, you can run your app as usually.
react-native run-ios
# or
react-native run-android
Now, you can open http://localhost:9001 to access your stories.
There are a couple of drawbacks with the previous method.
index.__.js
files when switching between the app and the storybook.React Native Storybook can be run without making changes to your index.__.js
files. It has few more steps, but you can setup in few minutes.
In order to work with React Native Storybook, one or more devices should be connected. Stories will only show when devices are available.
react-native run-ios
emulator -list-avds
emulator -avd MY_AVD_NAME
adb reverse tcp:8081 tcp:8081
adb reverse tcp:9001 tcp:9001
react-native run-android
adb reverse tcp:8081 tcp:8081
adb reverse tcp:9001 tcp:9001
react-native run-android
v1.12.5
FAQs
A better way to develop React Native Components for your app
The npm package @kadira/react-native-storybook receives a total of 0 weekly downloads. As such, @kadira/react-native-storybook popularity was classified as not popular.
We found that @kadira/react-native-storybook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.