Merge pull request #476 from ammarahm-ed/develop

ammarahm-ed · web-flow · commit 9ab3769882b2 · 2025-12-01T00:57:48.000+05:00
v10.1.0
diff --git a/app/sheets.tsx b/app/sheets.tsx
@@ -1,27 +1,27 @@
 import {
   RouteDefinition,
   SheetDefinition,
-  registerSheet,
   SheetRegister,
+  SheetRegisterProps
 } from 'react-native-actions-sheet';
-import Hello from './examples/hello';
+import AlwaysOpen from './examples/always-open';
+import BackgroundInteraction from './examples/background-interaction';
+import CustomScrollHandlers from './examples/custom-scroll-handlers';
+import DrawUnderStatusBar from './examples/draw-under-statusbar';
+import FlashListSheet from './examples/flashlist';
+import FlatListSheet from './examples/flatlist';
+import FloatingSheet from './examples/floating-sheet';
 import Gestures from './examples/gestures';
-import SnapMe from './examples/snap-me';
+import Hello from './examples/hello';
 import Input from './examples/input';
+import LegendListExample from './examples/legend-list';
+import NestedSheet from './examples/nested';
 import Payload from './examples/payload';
-import BackgroundInteraction from './examples/background-interaction';
-import AlwaysOpen from './examples/always-open';
+import ReturnData from './examples/return-data';
+import RouterSheet from './examples/router';
 import ScrollViewSheet from './examples/scrollview';
-import FlatListSheet from './examples/flatlist';
-import FlashListSheet from './examples/flashlist';
 import ResizeSheet from './examples/scrollview-resize';
-import NestedSheet from './examples/nested';
-import RouterSheet from './examples/router';
-import DrawUnderStatusBar from './examples/draw-under-statusbar';
-import ReturnData from './examples/return-data';
-import FloatingSheet from './examples/floating-sheet';
-import LegendListExample from './examples/legend-list';
-import CustomScrollHandlers from './examples/custom-scroll-handlers';
+import SnapMe from './examples/snap-me';
 
 /**
  * We extend some of the types here to give us great intellisense
@@ -66,29 +66,27 @@ declare module 'react-native-actions-sheet' {
   }
 }
 
-export const Sheets = () => {
-  return (
-    <SheetRegister
-      sheets={{
-        hello: Hello,
-        gestures: Gestures,
-        'snap-me': SnapMe,
-        input: Input,
-        payload: Payload,
-        'background-interaction': BackgroundInteraction,
-        'always-open': AlwaysOpen,
-        scrollview: ScrollViewSheet,
-        flashlist: FlashListSheet,
-        flatlist: FlatListSheet,
-        'scrollview-resize': ResizeSheet,
-        'nested-sheets': NestedSheet,
-        'sheet-router': RouterSheet,
-        'draw-under-statusbar': DrawUnderStatusBar,
-        'return-data': ReturnData,
-        'floating-sheet': FloatingSheet,
-        'legend-list': LegendListExample,
-        'custom-scroll-handlers': CustomScrollHandlers,
-      }}
-    />
-  );
+const sheets: SheetRegisterProps['sheets'] = {
+  hello: Hello,
+  gestures: Gestures,
+  'snap-me': SnapMe,
+  input: Input,
+  payload: Payload,
+  'background-interaction': BackgroundInteraction,
+  'always-open': AlwaysOpen,
+  scrollview: ScrollViewSheet,
+  flashlist: FlashListSheet,
+  flatlist: FlatListSheet,
+  'scrollview-resize': ResizeSheet,
+  'nested-sheets': NestedSheet,
+  'sheet-router': RouterSheet,
+  'draw-under-statusbar': DrawUnderStatusBar,
+  'return-data': ReturnData,
+  'floating-sheet': FloatingSheet,
+  'legend-list': LegendListExample,
+  'custom-scroll-handlers': CustomScrollHandlers,
+};
+
+export const AppSheets = () => {
+  return <SheetRegister sheets={sheets} />;
 };
diff --git a/docs/pages/guides/migrate.mdx b/docs/pages/guides/migrate.mdx
@@ -61,7 +61,7 @@ The following props have been changed in `ActionSheet` component:
 
 The following new props have been added to `ActionSheet` component:
 
-1. `enableElevation`: Now you can disable default elevation/shadow of the action sheet by setting this prop to false.
+1. `disableElevation`: Now you can disable default elevation/shadow of the action sheet by setting this prop to `true`.
 2. `initialTranslateFactor`: This prop allows you to set the initial translate factor of the action sheet when it opens. Default is `1` which means the action sheet will open from bottom of the screen. You can set it to `0.5` to have it open from half way of the screen.
 3. `returnValue`: The prop replaces `payload` prop to return data when the sheet is closed.
 
diff --git a/docs/pages/reference/actionsheet.mdx b/docs/pages/reference/actionsheet.mdx
@@ -94,6 +94,8 @@ Default: `false`
 
 Provide snap points ranging from 0 to 100. ActionSheet will snap between these points. If no snap points are provided, the default is a single snap point set to `100` which means that the sheet will be opened 100% on becoming visible.
 
+Note. `snapPoints` are relative to the height of the content inside ActionSheet. 100 = All content visible and 50 = half of the content is visible.
+
 | Type       | Required |
 | ---------- | -------- |
 | `number[]` | no       |
@@ -114,17 +116,29 @@ Default: `0`
 
 The top indicator bar on the action sheet is a regular `View` component and can be styles as such.
 
-| Type        | Required |
-| ----------- | -------- |
-| `ViewStyle` | no       |
+| Type                    | Required |
+| ----------------------- | -------- |
+| `StyleProp<ViewStyle> ` | no       |
 
 ## `containerStyle`
 
 Style the main container in the action sheet that wraps your content.
 
-| Type   | Required |
-| ------ | -------- |
-| Object | no       |
+Note: You can set most styles here except `maxHeight`, `marginBottom` and `paddingBottom`. These are used internally. You can do this instead:
+
+```tsx
+<ActionSheet>
+  <View
+    style={{
+      paddingBottom: 50,
+    }}
+  />
+</ActionSheet>
+```
+
+| Type                   | Required |
+| ---------------------- | -------- |
+| `StyleProp<ViewStyle>` | no       |
 
 ## `openAnimationConfig`
 
@@ -444,18 +458,33 @@ Callback invoked when the snap position of the sheet changes.
 | -------- | -------- |
 | function | no       |
 
-
 ## `initialTranslateFactor`
+
 Set the initial translate factor of the action sheet when it opens. Default is `1` which means the action sheet will open from bottom of the screen. You can set it to `0.5` to have it open from half way of the screen.
 
-| Type     | Required |
-| -------- | -------- |
-| number   | no       |
+| Type   | Required |
+| ------ | -------- |
+| number | no       |
 
 Default: `1`
 
 ## `disableElevation`
+
 Disable elevation/shadow of the action sheet.
-| Type      | Required |
+| Type | Required |
 | --------- | -------- |
-| `boolean` | no       |
+| `boolean` | no |
+
+## `onRequestClose`
+
+Called when the ActionSheet is closing based on some user actions:
+
+Touching backdrop
+System back navigation
+Swiping down to close the ActionSheet
+
+Return `false` to cancel closing the ActionSheet.
+
+| Type                                  | Required |
+| ------------------------------------- | -------- |
+| `(type: CloseRequestType) => boolean` | no       |
diff --git a/docs/pages/reference/showoptions.mdx b/docs/pages/reference/showoptions.mdx
@@ -49,3 +49,11 @@ Any data that is sent from the `hide` function of `SheetManager` can be recieved
 | Type       | Required |
 | ---------- | -------- |
 | `function` | false    |
+
+`snapIndex`
+
+Set the snap point for the action sheet on open
+
+| Type     | Required |
+| -------- | -------- |
+| `number` | false    |
diff --git a/example/App.tsx b/example/App.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { SheetProvider } from 'react-native-actions-sheet';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import changeNavigationBarColor from 'react-native-navigation-bar-color';
-import MainScreen from '../app/examples';
-import { Sheets } from '../app/sheets';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import MainScreen from '../app/examples';
+import { AppSheets } from '../app/sheets';
 
 const App = () => {
   // To match the style of action sheet navigation bar, we use react-native-navigation-bar-color on android and the app.
@@ -15,7 +15,7 @@ const App = () => {
   return (
     <>
       <SafeAreaProvider>
-        <Sheets />
+        <AppSheets />
         <GestureHandlerRootView
           style={{
             flex: 1,
diff --git a/expo-example/App.js b/expo-example/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Sheets} from '../app/sheets';
+import {AppSheets} from '../app/sheets';
 import {SheetProvider} from 'react-native-actions-sheet';
 import MainScreen from '../app/examples';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
@@ -9,7 +9,7 @@ const App = () => {
   return (
     <>
       <SafeAreaProvider>
-        <Sheets />
+        <AppSheets />
         <GestureHandlerRootView
           style={{
             flex: 1,
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-actions-sheet",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/src/hooks/use-accessibility.ts b/src/hooks/use-accessibility.ts
@@ -0,0 +1,50 @@
+import {AccessibilityInfo, Platform} from 'react-native';
+import {useEffect, useRef} from 'react';
+
+let accessibilityInfo = {
+  prefersCrossFadeTransitions: false,
+  isReduceMotionEnabled: false,
+};
+
+export async function getAccessibilityInfo() {
+  if (Platform.OS !== "ios") return accessibilityInfo;
+  try {
+    accessibilityInfo.isReduceMotionEnabled =
+      await AccessibilityInfo.isReduceMotionEnabled();
+    if (!accessibilityInfo.isReduceMotionEnabled) {
+      accessibilityInfo.prefersCrossFadeTransitions = false;
+      return accessibilityInfo;
+    }
+    accessibilityInfo.prefersCrossFadeTransitions =
+      await AccessibilityInfo.prefersCrossFadeTransitions();
+    return accessibilityInfo;
+  } catch (e) {
+    return accessibilityInfo;
+  }
+}
+
+getAccessibilityInfo();
+
+export function useAccessibility() {
+  const accessibilityRef = useRef(accessibilityInfo);
+
+  useEffect(() => {
+    let subscription: {remove: () => void};
+    if (Platform.OS === 'ios') {
+      const handler = () => {
+        getAccessibilityInfo().then(
+          result => (accessibilityRef.current = result),
+        );
+      };
+
+      subscription = AccessibilityInfo.addEventListener?.('change', handler);
+      handler();
+    }
+
+    return () => {
+      subscription?.remove?.();
+    };
+  }, []);
+
+  return accessibilityRef;
+}
diff --git a/src/hooks/use-sheet-manager.ts b/src/hooks/use-sheet-manager.ts
@@ -1,5 +1,5 @@
 /* eslint-disable curly */
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {actionSheetEventManager} from '../eventmanager';
 import {useProviderContext} from '../provider';
 
@@ -11,23 +11,26 @@ const useSheetManager = ({
 }: {
   id?: string;
   onHide: (data?: any) => void;
-  onBeforeShow?: (data?: any) => void;
+  onBeforeShow?: (data?: any, snapIndex?: number) => void;
   onContextUpdate: () => void;
 }) => {
   const [visible, setVisible] = useState(false);
   const currentContext = useProviderContext();
-
+  const visibleRef = useRef({
+    value: visible,
+  });
+  visibleRef.current.value = visible;
   useEffect(() => {
     if (!id) return undefined;
 
     const subscriptions = [
       actionSheetEventManager.subscribe(
         `show_${id}`,
-        (data: any, context?: string) => {
+        (data: any, context?: string, snapIndex?: number) => {
           if (currentContext !== context) return;
           if (visible) return;
           onContextUpdate?.();
-          onBeforeShow?.(data);
+          onBeforeShow?.(data, snapIndex);
           setVisible(true);
         },
       ),
@@ -44,6 +47,7 @@ const useSheetManager = ({
   return {
     visible,
     setVisible,
+    visibleRef: visibleRef,
   };
 };
 
diff --git a/src/index.tsx b/src/index.tsx
diff --git a/src/provider.tsx b/src/provider.tsx
diff --git a/src/sheetmanager.tsx b/src/sheetmanager.tsx
diff --git a/src/types.ts b/src/types.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-actions-sheet",`
`3`		`- "version": "10.0.1",`
	`3`	`+ "version": "10.1.0",`
`4`	`4`	`"description": "A Cross Platform(Android & iOS) ActionSheet with a robust and flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"types": "./dist/index.d.ts",`