npx create-expo-app --template expo-template-storybook AwesomeStorybookor
yarn create expo-app --template expo-template-storybook AwesomeStorybookyarn startIn this template you can now run yarn storybook to start ondevice storybook or yarn start to start your expo app.
This works via env variables and expo constants.
# either
yarn storybook
# ios
yarn storybook:ios
# android
yarn storybook:androidIf you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
To update the stories one time
yarn storybook-generateTo watch the stories files
yarn storybook-watchNote that this is only necessary for when you add or remove a story file.
Start react native web storybook:
yarn storybook:web
build react native web storybook:
yarn build-storybookHere is a list of the components available in this library:
| Component | Description |
|---|---|
button |
A customizable button component. |
button-group |
A component to group multiple buttons. |
camera |
A camera component to take pictures. |
checkbox |
A checkbox component. |
chips |
A chips component for input, attributes, or actions. |
date-time-picker |
A date and time picker component. |
flat-list |
A component for rendering simple, flat lists. |
float-icon-button |
A floating icon button. |
floating-list |
A floating list component. |
form |
A form component to handle user input. |
gradient |
A component to create gradient backgrounds. |
hardware-button-back |
A component to handle the hardware back button. |
header |
A header component for screens. |
header-step-bar |
A step bar component for headers. |
icon |
A component to display icons. |
icon-button |
An icon button component. |
image |
A component for displaying images. |
input |
A text input component. |
keyboard-toolbar |
A toolbar that appears above the keyboard. |
left-right |
A component to align content to the left and right. |
loading |
A loading indicator component. |
lottie |
A component for rendering Lottie animations. |
modal |
A modal component. |
multi-text-ellipsis |
A component for displaying text with an ellipsis. |
multi-text-select-buttons |
A component for selecting multiple text options. |
number-field |
A number input field component. |
pdf-preview |
A component to preview PDF files. |
picker |
A picker component. |
progress-bar |
A progress bar component. |
radio |
A radio button component. |
radio-icon |
A radio button with an icon. |
ratio-number |
A component to display a ratio number. |
search-bar |
A search bar component. |
select |
A select component. |
select-group-button |
A group of select buttons. |
send-otp |
A component for sending one-time passwords. |
slider |
A slider component. |
sortable-list |
A sortable list component. |
switch |
A switch component. |
text |
A text component. |
text-list |
A list of text items. |
toast |
A toast message component. |
webview |
A webview component. |