Patch

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: 'Bug Report'
 description: 'File a bug report'
-labels: ['v3', 'bug', 'triage']
+labels: ['bug', 'triage']
 body:
   - type: 'markdown'
     attributes:
@@ -26,10 +26,10 @@ body:
     attributes:
       label: 'CodeSandbox/Snack link'
       description: |
-        It would be easier for us to debug if you can reproduce the error in a codesandbox link or a snack link. You can use the [codesandbox](https://codesandbox.io/)/[snack](https://snack.expo.dev/).
+        It's Mandotory to provide minimal reproduction of the bug. You can use the [snack](https://snack.expo.dev/) or provide github repo which can be cloned.
       placeholder: 'https://codesandbox.io/  or   https://snack.expo.dev/'
     validations:
-      required: false
+      required: true
   - type: 'textarea'
     id: 'steps'
     attributes:
@@ -61,7 +61,7 @@ body:
         - label: 'Web'
         - label: 'Android'
         - label: 'iOS'
-        
+
   - type: 'input'
     id: 'other-platform'
     attributes:

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+patches
 .pnp
 .pnp.js
 .env

example/storybook-nativewind/.storybook/preview.js

@@ -72,8 +72,10 @@ export const parameters = {
           'Media And Icons',
           ['Avatar', 'Image', 'Icon'],
           'Others',
-          ['Fab'],
+          ['Fab', 'Skeleton'],
         ],
+        'Apps',
+        ['Dashboard App'],
         'Guides',
         ['Recipes', ['Linear Gradient'], 'More', ['Changelog']],
       ],
@@ -88,6 +90,11 @@ export const parameters = {
           name: 'Component',
           headerTitle: 'Components',
         },
+        {
+          source: 'lucide-react-native',
+          name: 'Layers',
+          headerTitle: 'Apps',
+        },
         {
           source: 'lucide-react-native',
           name: 'BookOpen',

example/storybook-nativewind/package.json

@@ -27,6 +27,7 @@
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
+    "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.56",
     "@gluestack-ui/config": "^1.1.18",
     "@gluestack-ui/themed": "^1.1.26",
@@ -51,8 +52,8 @@
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
-    "lucide-react-native": "^0.236.0",
-    "nativewind": "^4.0.1",
+    "lucide-react-native": "^0.378.0",
+    "nativewind": "^4.0.36",
     "next": "^13.5.3",
     "prism-react-renderer": "^1.3.5",
     "re-resizable": "^6.9.11",

example/storybook-nativewind/src/apps/dashboard-app/Expand.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Expand = () => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="black" />
+      <path
+        d="M27.235 21.234H12.765V24.728L8 19.964L12.765 15.199V18.693H27.235V15.199L32 19.964L27.235 24.729V21.234Z"
+        fill="#FAFAFA"
+      />
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#525252" />
+    </svg>
+  );
+};

example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx

@@ -0,0 +1,19 @@
+---
+title: Dashboard App | gluestack-ui
+description: A dashboard app created using all the components of gluestack-ui styled with NativeWind
+toc: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Responsiveness from '../../extra-components/nativewind/Responsive';
+
+
+<Meta title="with-nativewind/Apps/Dashboard App" />
+
+# Dashboard App
+
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `@gluestack-ui` components styled with `NativeWind`.
+
+<Responsiveness />
+
+GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind)

example/storybook-nativewind/src/apps/starter-kit/Expand.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Expand = () => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="black" />
+      <path
+        d="M27.235 21.234H12.765V24.728L8 19.964L12.765 15.199V18.693H27.235V15.199L32 19.964L27.235 24.729V21.234Z"
+        fill="#FAFAFA"
+      />
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#525252" />
+    </svg>
+  );
+};

example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx

@@ -0,0 +1,19 @@
+---
+title: Starter Kit | gluestack-ui
+description: A dashboard app created using all the components of gluestack-ui styled with NativeWind
+toc: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Responsiveness from '../../extra-components/nativewind/Responsive';
+
+
+<Meta title="with-nativewind/Apps/Starter Kit" />
+
+# Dashboard App
+
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `@gluestack-ui` components styled with `NativeWind`.
+
+<Responsiveness />
+
+GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind)

example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx

@@ -1103,7 +1103,7 @@ Default styling of the component can be found in the `components/actionsheet` fi
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 ### Examples
 

example/storybook-nativewind/src/components/Card/index.stories.mdx

@@ -40,7 +40,7 @@ import {
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-import { transformedCode } from '../../../utils';
+import { transformedCode } from '../../utils';
 
 import { config } from '@gluestack-ui/config';
 import Wrapper from '../../core-components/nativewind/Wrapper';

example/storybook-nativewind/src/components/Icon/Icon.tsx

@@ -68,7 +68,7 @@ import {
   Camera,
 } from 'lucide-react-native';
 const IconBasic = ({ size, ...props }: any) => {
-  return <Icon as={AddIcon} size={size} {...props} />;
+  return <Icon as={SearchIcon} size={size} {...props} />;
 };
 
 IconBasic.description =

example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx

@@ -105,7 +105,7 @@ This is an illustration of **Icon** component.
     showArgsController={true}
     metaData={{
       code: `
-        <Icon as={CalendarDaysIcon}  {...props}/>
+        <Icon as={CalendarDaysIcon}  {...props} className="text-typography-500"/>
       `,
       transformCode: (code) => {
         return transformedCode(code);
@@ -260,61 +260,61 @@ Below is a list of all of the icons in the library.
       code: `
       <Center>
   <HStack className="w-[70%] flex flex-wrap">
-        <Icon as={AddIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowLeftIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowRightIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowUpIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowDownIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronsLeftIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronsRightIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronsUpDownIcon} className="m-2 w-4 h-4" />
-        <Icon as={AtSignIcon} className="m-2 w-4 h-4" />
-        <Icon as={PaperclipIcon} className="m-2 w-4 h-4" />
-        <Icon as={BellIcon} className="m-2 w-4 h-4" />
-        <Icon as={CalendarDaysIcon} className="m-2 w-4 h-4" />
-        <Icon as={MessageCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={CheckIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronDownIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronUpIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronLeftIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronRightIcon} className="m-2 w-4 h-4" />
-        <Icon as={CloseIcon} className="m-2 w-4 h-4" />
-        <Icon as={CopyIcon} className="m-2 w-4 h-4" />
-        <Icon as={TrashIcon} className="m-2 w-4 h-4" />
-        <Icon as={DownloadIcon} className="m-2 w-4 h-4" />
-        <Icon as={GripVerticalIcon} className="m-2 w-4 h-4" />
-        <Icon as={EditIcon} className="m-2 w-4 h-4" />
-        <Icon as={MailIcon} className="m-2 w-4 h-4" />
-        <Icon as={ExternalLinkIcon} className="m-2 w-4 h-4" />
-        <Icon as={MenuIcon} className="m-2 w-4 h-4" />
-        <Icon as={InfoIcon} className="m-2 w-4 h-4" />
-        <Icon as={LinkIcon} className="m-2 w-4 h-4" />
-        <Icon as={LockIcon} className="m-2 w-4 h-4" />
-        <Icon as={RemoveIcon} className="m-2 w-4 h-4" />
-        <Icon as={MoonIcon} className="m-2 w-4 h-4" />
-        <Icon as={SlashIcon} className="m-2 w-4 h-4" />
-        <Icon as={CheckCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={PhoneIcon} className="m-2 w-4 h-4" />
-        <Icon as={HelpCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={RepeatIcon} className="m-2 w-4 h-4" />
-        <Icon as={Repeat1Icon} className="m-2 w-4 h-4" />
-        <Icon as={SearchIcon} className="m-2 w-4 h-4" />
-        <Icon as={SettingsIcon} className="m-2 w-4 h-4" />
-        <Icon as={LoaderIcon} className="m-2 w-4 h-4" />
-        <Icon as={StarIcon} className="m-2 w-4 h-4" />
-        <Icon as={SunIcon} className="m-2 w-4 h-4" />
-        <Icon as={ClockIcon} className="m-2 w-4 h-4" />
-        <Icon as={UnlockIcon} className="m-2 w-4 h-4" />
-        <Icon as={EyeIcon} className="m-2 w-4 h-4" />
-        <Icon as={EyeOffIcon} className="m-2 w-4 h-4" />
-        <Icon as={AlertCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={CloseCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={ShareIcon} className="m-2 w-4 h-4" />
-        <Icon as={CircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={FavouriteIcon} className="m-2 w-4 h-4" />
-        <Icon as={GlobeIcon} className="m-2 w-4 h-4" />
-        <Icon as={ThreeDotsIcon} className="m-2 w-4 h-4" />
-        <Icon as={PlayIcon} className="m-2 w-4 h-4" />
+        <Icon as={AddIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowRightIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowUpIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowDownIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronsLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronsRightIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronsUpDownIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={AtSignIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={PaperclipIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={BellIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CalendarDaysIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MessageCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CheckIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronDownIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronUpIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronRightIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CloseIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CopyIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={TrashIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={DownloadIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={GripVerticalIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={EditIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MailIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ExternalLinkIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MenuIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={InfoIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={LinkIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={LockIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={RemoveIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MoonIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SlashIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CheckCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={PhoneIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={HelpCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={RepeatIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={Repeat1Icon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SearchIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SettingsIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={LoaderIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={StarIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SunIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ClockIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={UnlockIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={EyeIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={EyeOffIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={AlertCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CloseCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ShareIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={FavouriteIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={GlobeIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ThreeDotsIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={PlayIcon} className="text-typography-500 m-2 w-4 h-4" />
   </HStack>
   </Center>
 `,
@@ -398,10 +398,10 @@ Below is a list of all of the icons in the library.
     metaData={{
       code: `
       <VStack space="md" className="items-center">
-        <Icon as={Camera} />
-        <Icon as={ChromeIcon}  />
-        <Icon as={InstagramIcon} />
-        <Icon as={FacebookIcon} />
+        <Icon className="text-typography-500" as={Camera} />
+        <Icon className="text-typography-500" as={ChromeIcon}  />
+        <Icon className="text-typography-500" as={InstagramIcon} />
+        <Icon className="text-typography-500" as={FacebookIcon} />
       </VStack>
 `,
       transformCode: (code) => {

example/storybook-nativewind/src/components/Pressable/index.stories.mdx

@@ -112,7 +112,7 @@ component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 ### Customizing the Pressable