Merge pull request #1975 from gluestack/fix/copy-paste-pressable

fix: copy paste pressble
gluestack · Mar 19, 2024 · bab7f67 · bab7f67
2 parents cc37f72 + b9dc35c
commit bab7f67
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -52,8 +52,15 @@ This is an illustration of **Pressable** component.
 
 ## Installation
 
+### Step 1: Install the following dependencies:
 
-### Step 1: Copy and paste the following code into your project.
+```bash
+
+npm i @gluestack-ui/pressable
+
+```
+
+### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -63,7 +70,7 @@ This is an illustration of **Pressable** component.
 
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+### Step 3: Update the import paths to match your project setup.
 
 ## API Reference
 

diff --git a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
@@ -51,8 +51,15 @@ This is an illustration of **Pressable** component.
 
 ## Installation
 
+### Step 1: Install the following dependencies:
 
-### Step 1: Copy and paste the following code into your project.
+```bash
+
+npm i @gluestack-ui/pressable
+
+```
+
+### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -62,7 +69,7 @@ This is an illustration of **Pressable** component.
 
 </CollapsibleCode>
 
-### Step 2: Update the import paths to match your project setup.
+### Step 3: Update the import paths to match your project setup.
 
 ## API Reference
 

diff --git a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
@@ -1,15 +1,21 @@
 import { Pressable as RNPressable } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
 import React from 'react';
+import { createPressable } from '@gluestack-ui/pressable';
+
+export const UIPressable = createPressable({ Root: RNPressable });
 
 const pressableStyle = tva({
-  base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-primary-700 data-[focus-visible=true]:ring-2',
+  base: 'data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-primary-700 data-[focus-visible=true]:web:ring-2',
 });
 
+cssInterop(UIPressable, { className: 'style' });
+
 export const Pressable = React.forwardRef(
   ({ className, ...props }: any, ref?: any) => {
     return (
-      <RNPressable
+      <UIPressable
         {...props}
         ref={ref}
         className={pressableStyle({

diff --git a/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx b/example/storybook-nativewind/src/core-components/themed/pressable/index.tsx
@@ -1,7 +1,10 @@
 import { styled } from '@gluestack-style/react';
 import { Pressable as RNPressable } from 'react-native';
+import { createPressable } from '@gluestack-ui/pressable';
 
-export const Pressable = styled(RNPressable, {
+export const UIPressable = createPressable({ Root: RNPressable });
+
+export const Pressable = styled(UIPressable, {
   _web: {
     ':focusVisible': {
       outlineWidth: '2px',