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