Merge pull request #2232 from gluestack/feat/added-docs-utils-trouble…

…shooting

Feat/added docs utils troubleshooting

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

@@ -60,7 +60,7 @@ import { CollapsibleCode } from '@gluestack/design-system';
   npx gluestack-ui add bottomsheet
   ```
 
-> Note: you need to install specific versions of `@gorhom/bottom-sheet@alpha (v5)`, `react-native-reanimated` version `~3.6.2` and `react-native-gesture-handler` version `~2.14.0`.
+> Note: you need to install specific versions of `@gorhom/bottom-sheet@5.0.0-alpha.10 (v5)`, `react-native-reanimated` version `~3.6.2` and `react-native-gesture-handler` version `~2.14.0`.
 
 </>
     </Tabs.TabPanel>

example/storybook-nativewind/src/guides/more/Troubleshooting/index.stories.mdx

@@ -0,0 +1,66 @@
+---
+title: Changelog | gluestack-ui
+description: A quick look on gluestack-ui changelog.
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="common/Guides/More/Troubleshooting" />
+
+# Troubleshooting
+
+If you encounter any issues while using nativewind, please refer to the nativewind [troubleshooting guide](https://www.nativewind.dev/v4/guides/troubleshooting).
+
+## Common Issues
+
+### 1. "dark:" Variant Not Working as Expected
+
+If you are using `dark:` and experiencing unexpected behavior, ensure that you have followed the documentation for [dark mode configuration](/home/theme-configuration/dark-mode) correctly.
+
+### 2. Toast Inside Modal Not Functioning
+
+When using `Toast` inside a `Modal`, ensure that you have added the `OverlayProvider` from `@gluestack-ui/overlay` to the root of your application.
+
+```jsx
+import { OverlayProvider } from '@gluestack-ui/overlay';
+import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
+
+const App = () => {
+  return (
+    <GluestackUIProvider>
+      <OverlayProvider>
+        <YourApp />
+      </OverlayProvider>
+    </GluestackUIProvider>
+  );
+};
+```
+
+### 3. Flashing Issue in Next.js
+
+If encountering flashing issues in Next.js:
+
+- Refer to the [installation documentation](https://gluestack.io/ui/nativewind/docs/home/getting-started/installation), click on manual, and ensure that step 4 is correctly configured.
+
+### 4. TailwindCSS Classnames Not Overriding in react-native-web
+
+To ensure Tailwind styles override with higher specificity, add `important: 'html'` to your `tailwind.config.js`.
+
+```jsx
+// tailwind.config.js
+module.exports = {
+  ...
+  important: 'html',
+  ...
+}
+```
+
+## Known Issues
+
+- `placeholder` does not work with CSS tokens.
+- `dark:` does not function with "class" as a strategy in native devices.
+
+## Still Facing Issues?
+
+If you continue to experience issues, please create an issue on [GitHub](https://github.com/gluestack/gluestack-ui).
+

example/storybook-nativewind/src/home/getting-started/gluestack-ui-nativewind-utils/index.nw.stories.mdx

@@ -0,0 +1,43 @@
+---
+title: @gluestack-ui/nativewind-utils | gluestack-ui
+description: The @gluestack-ui/nativewind-utils provides a collection of utility function for your gluestack-ui components.
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="with-nativewind/Home/Getting Started/gluestack-ui-nativewind-utils" />
+
+# @gluestack-ui/nativewind-utils
+
+[@gluestack-ui/nativewind-utils](https://www.npmjs.com/package/@gluestack-ui/nativewind-utils) provides a collection of utility functions for seamless integration of gluestack-ui and nativewind.
+
+### tva (Tailwind Variant Authority)
+
+The `tva` function serves as a wrapper around [Tailwind Variant](https://www.tailwind-variants.org/), extending its functionality.
+
+In addition to the default Tailwind variant, it introduces support for `parentVariant` and `parentCompoundVariant`.
+
+### VariantProps Utility
+
+The `VariantProps` utility allows for easy extraction of variants from a component.
+
+### flush
+
+This function facilitates server-side rendering (SSR) by flushing out any styles generated during the process. This ensures that these styles are properly added to the HTML document.
+
+### withStates
+
+`withStates` is a Higher Order Component (HOC) designed to incorporate state-based styling into gluestack-ui components on native devices.
+
+### withStyleContext
+
+`withStyleContext` is a HOC that creates a React context with a defined scope.
+
+### withStyleContextAndStates
+
+This single HOC combines the functionality of both `withStyleContext` and `withStates`.
+
+### useStyleContext
+
+`useStyleContext` is a hook used to consume the context created by `withStyleContext` and `withStyleContextAndStates`.
+