From 8536a2a14201fb0738b840752fde92004947b7d0 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Fri, 16 Feb 2024 17:59:55 +0530
Subject: [PATCH] fix: link and slider issue

---
 .../nativewind/Link/index.tsx                  | 18 ++++++++++++++----
 .../nativewind/Slider/index.tsx                |  7 +++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx
index affffb0e8e..10812670c3 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx
+++ b/example/storybook-nativewind/src/components-example/nativewind/Link/index.tsx
@@ -1,14 +1,24 @@
 import { createLink } from '@gluestack-ui/link';
-import { Pressable, Text } from 'react-native';
-import { tva, withStyleContextAndStates } from '@gluestack-ui/nativewind-utils';
+import { Pressable, Text, Platform } from 'react-native';
+import {
+  tva,
+  withStyleContextAndStates,
+  withStyleContext,
+} from '@gluestack-ui/nativewind-utils';
 import React from 'react';
-
+import { cssInterop } from 'nativewind';
 export const UILink = createLink({
   // @ts-ignore
-  Root: withStyleContextAndStates(Pressable),
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(Pressable)
+      : withStyleContextAndStates(Pressable),
   Text: Text,
 });
 
+cssInterop(UILink, { className: 'style' });
+cssInterop(UILink.Text, { className: 'style' });
+
 const linkStyle = tva({
   base: 'web:outline-0 web:disabled:cursor-not-allowed web:focus-visible:outline-2 web:focus-visible:outline-primary-700 web:focus-visible:outline',
 });
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Slider/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Slider/index.tsx
index 58017e1836..1049bdbb71 100644
--- a/example/storybook-nativewind/src/components-example/nativewind/Slider/index.tsx
+++ b/example/storybook-nativewind/src/components-example/nativewind/Slider/index.tsx
@@ -9,6 +9,7 @@ import {
   useStyleContext,
   withStates,
 } from '@gluestack-ui/nativewind-utils';
+import { cssInterop } from 'nativewind';
 
 export const UISlider = createSlider({
   // @ts-ignore
@@ -22,6 +23,12 @@ export const UISlider = createSlider({
   ThumbInteraction: View,
 });
 
+//@ts-ignore
+cssInterop(UISlider, { className: 'style' });
+cssInterop(UISlider.Thumb, { className: 'style' });
+cssInterop(UISlider.Track, { className: 'style' });
+cssInterop(UISlider.FilledTrack, { className: 'style' });
+
 const sliderStyle = tva({
   base: 'justify-center items-center data-[disabled=true]:web:cursor-not-allowed data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-auto',