fix: link and slider issue

gluestack · Feb 16, 2024 · 8536a2a · 8536a2a
1 parent cf4fb2d
commit 8536a2a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 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
@@ -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
@@ -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',