Make sure you have setup your gluestack-ui development environment. if not please follow following guide to setup your environment.

Setup gluestack-ui project

Core Component

• create a folder with component name inside example/storybook-nativewind/src/core-components/nativewind/ (lowercase).
• create a index.tsx inside that folder and create a composable component.
• export all the composable components from this file. Make sure the components are exported as named-exports.

Create Examples

• Create a file with your component-name inside example/storybook-nativewind/src/components/<component-name>
• Import your components from @/components/ui/<component_name> and create example.
• create a <component-name>.stories.tsx file inside a example/storybook-nativewind/src/components/<component-name> .
• Copy and paste content from other component if needed.
  • Make the necessary changes.

Note: You would need to run yarn build at the root before running the Storybook.

Run you Example

• Web
  • go to root run yarn storybook:nativewind
• Native
  • IOS :- go to root run yarn storybook:nativewind-ios
  • Android:- go to root run yarn storybook:nativewind-android