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',