Merge pull request #3237 from nathan-hadley/fix/actionsheet-state-sync

fix: resolve stale state issue when closing Actionsheet via drag gesture

Author: Sanchitv3

packages/gluestack-core/src/actionsheet/creator/ActionsheetDragIndicatorWrapper.tsx

@@ -15,7 +15,12 @@ export function ActionsheetDragIndicatorWrapper<T>(
       contentSheetHeight,
     } = useActionsheetContent('ActionsheetContentContext');
 
-    const handleCloseRef = React.useRef(null);
+    // Keep handleClose ref updated to avoid capturing stale state
+    const handleCloseRef = React.useRef(handleClose);
+    React.useEffect(() => {
+      handleCloseRef.current = handleClose;
+    }, [handleClose]);
+
     const panResponder = React.useRef(
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
@@ -37,7 +42,7 @@ export function ActionsheetDragIndicatorWrapper<T>(
                 toValue: { x: 0, y: contentSheetHeight.current },
                 duration: 200,
                 useNativeDriver: true,
-              }).start(handleClose);
+              }).start(() => handleCloseRef.current());
             } else {
               Animated.spring(pan, {
                 toValue: { x: 0, y: 0 },
@@ -54,7 +59,7 @@ export function ActionsheetDragIndicatorWrapper<T>(
                 toValue: { x: 0, y: contentSheetHeightWithSnapPoint },
                 duration: 200,
                 useNativeDriver: true,
-              }).start(handleClose);
+              }).start(() => handleCloseRef.current());
             } else {
               Animated.spring(pan, {
                 toValue: { x: 0, y: 0 },

src/components/ui/actionsheet/docs/index.mdx

@@ -2,6 +2,7 @@
 title: gluestack-ui ActionSheet | Installation, Usage & API
 description: Discover gluestack-ui’s ActionSheet for Expo, React & React Native. Create smooth action sheets with ease. Check our docs to learn more
 ---
+
 import { Tabs, TabItem } from '@/docs-components/tabs';
 import ManualInstallationNote from '@/docs-components/manual-installation-note';
 import {
@@ -234,6 +235,12 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
 
 /// {Example:with-snappoints} ///
 
+### Selection with State Persistence
+
+This example demonstrates proper state handling when closing the actionsheet via drag gesture. Users can select a notification preference, and the selection is correctly saved whether they close by dragging or clicking the backdrop.
+
+/// {Example:state} ///
+
 /// {Example:icons} ///
 
 /// {Example:virtualized-list} ///

src/components/ui/actionsheet/examples/state/meta.json

@@ -0,0 +1,22 @@
+{
+  "title": "Selection with State Persistence",
+  "argTypes": {},
+  "reactLive": {
+    "Actionsheet": "@/components/ui/actionsheet",
+    "ActionsheetContent": "@/components/ui/actionsheet",
+    "ActionsheetDragIndicator": "@/components/ui/actionsheet",
+    "ActionsheetDragIndicatorWrapper": "@/components/ui/actionsheet",
+    "ActionsheetBackdrop": "@/components/ui/actionsheet",
+    "Button": "@/components/ui/button",
+    "ButtonText": "@/components/ui/button",
+    "Text": "@/components/ui/text",
+    "Heading": "@/components/ui/heading",
+    "VStack": "@/components/ui/vstack",
+    "Radio": "@/components/ui/radio",
+    "RadioGroup": "@/components/ui/radio",
+    "RadioLabel": "@/components/ui/radio",
+    "RadioIndicator": "@/components/ui/radio",
+    "RadioIcon": "@/components/ui/radio",
+    "CircleIcon": "@/components/ui/icon"
+  }
+}

src/components/ui/actionsheet/examples/state/template.handlebars

@@ -0,0 +1,51 @@
+function App() {
+  const [showActionsheet, setShowActionsheet] = React.useState(false);
+  const [preference, setPreference] = React.useState('all');
+  const [tempPreference, setTempPreference] = React.useState('all');
+  
+  const handleClose = () => {
+    setPreference(tempPreference);
+    setShowActionsheet(false);
+  };
+
+  const options = [
+    { value: 'all', label: 'All Notifications' },
+    { value: 'mentions', label: 'Mentions Only' },
+    { value: 'off', label: 'Off' },
+  ];
+
+  return (
+    <>
+      <VStack space="md">
+        <Text>Current: {options.find(o => o.value === preference)?.label}</Text>
+        <Button onPress={() => {
+          setTempPreference(preference);
+          setShowActionsheet(true);
+        }}>
+          <ButtonText>Change Preference</ButtonText>
+        </Button>
+      </VStack>
+      <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+        <ActionsheetBackdrop />
+        <ActionsheetContent>
+          <ActionsheetDragIndicatorWrapper>
+            <ActionsheetDragIndicator />
+          </ActionsheetDragIndicatorWrapper>
+          <VStack className="w-full p-4" space="xl">
+            <Heading size="lg">Preferences</Heading>
+            <RadioGroup value={tempPreference} onChange={setTempPreference} className="gap-4">
+              {options.map((option) => (
+                <Radio key={option.value} value={option.value} className="justify-between">
+                  <RadioLabel>{option.label}</RadioLabel>
+                  <RadioIndicator>
+                    <RadioIcon as={CircleIcon} />
+                  </RadioIndicator>
+                </Radio>
+              ))}
+            </RadioGroup>
+          </VStack>
+        </ActionsheetContent>
+      </Actionsheet>
+    </>
+  );
+}