Merge pull request #2331 from gluestack/fix/switch-select

fix: invalid state for switch and select

example/storybook-nativewind/src/core-components/nativewind/select/index.tsx

@@ -25,7 +25,11 @@ import {
 } from './select-actionsheet';
 import { Pressable, View, TextInput, Platform } from 'react-native';
 
-/** Select Components */
+const SelectTriggerWrapper = React.forwardRef(
+  ({ ...props }: any, ref?: any) => {
+    return <Pressable {...props} ref={ref} />;
+  }
+);
 
 const selectIconStyle = tva({
   base: 'text-background-500 fill-none',
@@ -137,8 +141,8 @@ const UISelect = createSelect(
     // @ts-ignore
     Trigger:
       Platform.OS === 'web'
-        ? withStyleContext(Pressable)
-        : withStyleContextAndStates(Pressable),
+        ? withStyleContext(SelectTriggerWrapper)
+        : withStyleContextAndStates(SelectTriggerWrapper),
     Input: TextInput,
     Icon: PrimitiveIcon,
   },
@@ -162,7 +166,7 @@ cssInterop(UISelect, { className: 'style' });
 cssInterop(UISelect.Input, {
   className: { target: 'style', nativeStyleToProp: { textAlign: true } },
 });
-cssInterop(UISelect.Trigger, { className: 'style' });
+cssInterop(SelectTriggerWrapper, { className: 'style' });
 // @ts-ignore
 cssInterop(UISelect.Icon, {
   className: {

example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx

@@ -8,14 +8,18 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
+const SwitchWrapper = React.forwardRef(({ ...props }: any, ref?: any) => {
+  return <RNSwitch {...props} ref={ref} />;
+});
+
 const UISwitch = createSwitch({
   Root:
     Platform.OS === 'web'
-      ? withStyleContext(RNSwitch)
-      : withStyleContextAndStates(RNSwitch),
+      ? withStyleContext(SwitchWrapper)
+      : withStyleContextAndStates(SwitchWrapper),
 });
 
-cssInterop(UISwitch, { className: 'style' });
+cssInterop(SwitchWrapper, { className: 'style' });
 
 const switchStyle = tva({
   base: 'data-[focus=true]:outline-0 data-[focus=true]:ring-2 data-[focus=true]:ring-indicator-primary web:cursor-pointer disabled:cursor-not-allowed data-[disabled=true]:opacity-40 data-[invalid=true]:border-error-700 data-[invalid=true]:rounded-xl data-[invalid=true]:border-2',

yarn.lock

@@ -2625,6 +2625,15 @@
     "@react-native-aria/focus" "^0.2.9"
     "@react-native-aria/interactions" "^0.2.11"
 
+"@gluestack-ui/[email protected]":
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.16.tgz#54739c87d50831ed248faa0ce4015384a8f5d238"
+  integrity sha512-voSV4J+Ec5u9oq0cCDvgrISrVf4ObYZpbyRDJvS3L/StJYk5lM5sEfLuI3w7stlyvit9pkwi4aQKKX0BN5wBuw==
+  dependencies:
+    "@gluestack-ui/utils" "^0.1.12"
+    "@react-native-aria/focus" "^0.2.9"
+    "@react-native-aria/interactions" "0.2.13"
+
 "@gluestack-ui/toast@^0.1.7":
   version "0.1.20"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320"