From 18a13fa24a72789439fc8de3b5d2eb518c91856d Mon Sep 17 00:00:00 2001
From: rajat693 <rajatchaudhary.rc693@gmail.com>
Date: Thu, 22 Aug 2024 12:33:57 +0530
Subject: [PATCH] fix: button state based styling in native devices

---
 .../src/core-components/nativewind/button/index.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
index 0fc5aca2d..1cb78b368 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -2,6 +2,7 @@
 import React, { useMemo } from 'react';
 import { createButton } from '@gluestack-ui/button';
 import { Svg } from 'react-native-svg';
+import type { PressableProps } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
@@ -20,6 +21,12 @@ import {
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const SCOPE = 'BUTTON';
+const ButtonWrapper = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  PressableProps
+>(({ ...props }, ref) => {
+  return <Pressable {...props} ref={ref} />;
+});
 
 type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
   height?: number | string;
@@ -81,8 +88,8 @@ const PrimitiveIcon = React.forwardRef(
 
 const Root =
   Platform.OS === 'web'
-    ? withStyleContext(Pressable, SCOPE)
-    : withStyleContextAndStates(Pressable, SCOPE);
+    ? withStyleContext(ButtonWrapper, SCOPE)
+    : withStyleContextAndStates(ButtonWrapper, SCOPE);
 
 const UIButton = createButton({
   Root: Root,
@@ -92,7 +99,7 @@ const UIButton = createButton({
   Icon: withStates(PrimitiveIcon),
 });
 
-cssInterop(UIButton, { className: 'style' });
+cssInterop(Root, { className: 'style' });
 cssInterop(UIButton.Text, { className: 'style' });
 cssInterop(UIButton.Group, { className: 'style' });
 cssInterop(UIButton.Spinner, {