@gorhom/bottom-sheet - npm Package Compare versions

Comparing version 4.5.1 to 4.6.0

lib/commonjs/components/bottomSheet/BottomSheet.js

@@ -115,3 +115,7 @@ "use strict";
     footerComponent,
-    children: Content
+    children: Content,
+    // accessibility
+    accessible: _providedAccessible = _constants2.DEFAULT_ACCESSIBLE,
+    accessibilityLabel: _providedAccessibilityLabel = _constants2.DEFAULT_ACCESSIBILITY_LABEL,
+    accessibilityRole: _providedAccessibilityRole = _constants2.DEFAULT_ACCESSIBILITY_ROLE
   } = props; //#endregion
@@ -1136,3 +1140,6 @@ //#region layout variables
     pointerEvents: "box-none",
-    style: contentMaskContainerStyle
+    style: contentMaskContainerStyle,
+    accessible: _providedAccessible !== null && _providedAccessible !== void 0 ? _providedAccessible : undefined,
+    accessibilityRole: _providedAccessibilityRole !== null && _providedAccessibilityRole !== void 0 ? _providedAccessibilityRole : undefined,
+    accessibilityLabel: _providedAccessibilityLabel !== null && _providedAccessibilityLabel !== void 0 ? _providedAccessibilityLabel : undefined
   }, /*#__PURE__*/_react.default.createElement(_bottomSheetDraggableView.default, {
@@ -1139,0 +1146,0 @@ key: "BottomSheetRootDraggableView",

lib/commonjs/components/bottomSheet/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.INITIAL_VALUE = exports.INITIAL_SNAP_POINT = exports.INITIAL_HANDLE_HEIGHT = exports.INITIAL_CONTAINER_OFFSET = exports.INITIAL_CONTAINER_HEIGHT = exports.INITIAL_POSITION = exports.DEFAULT_KEYBOARD_INPUT_MODE = exports.DEFAULT_KEYBOARD_BLUR_BEHAVIOR = exports.DEFAULT_KEYBOARD_BEHAVIOR = exports.DEFAULT_ANIMATE_ON_MOUNT = exports.DEFAULT_DYNAMIC_SIZING = exports.DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = exports.DEFAULT_ENABLE_OVER_DRAG = exports.DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = exports.DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = exports.DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = exports.DEFAULT_HANDLE_HEIGHT = void 0;
+exports.DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT = exports.DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = exports.DEFAULT_ACCESSIBILITY_ROLE = exports.DEFAULT_ACCESSIBILITY_LABEL = exports.DEFAULT_ACCESSIBLE = exports.INITIAL_VALUE = exports.INITIAL_SNAP_POINT = exports.INITIAL_HANDLE_HEIGHT = exports.INITIAL_CONTAINER_OFFSET = exports.INITIAL_CONTAINER_HEIGHT = exports.INITIAL_POSITION = exports.DEFAULT_KEYBOARD_INPUT_MODE = exports.DEFAULT_KEYBOARD_BLUR_BEHAVIOR = exports.DEFAULT_KEYBOARD_BEHAVIOR = exports.DEFAULT_ANIMATE_ON_MOUNT = exports.DEFAULT_DYNAMIC_SIZING = exports.DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = exports.DEFAULT_ENABLE_OVER_DRAG = exports.DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = exports.DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = exports.DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = exports.DEFAULT_HANDLE_HEIGHT = void 0;
 
@@ -51,4 +51,17 @@ var _constants = require("../../constants");
 exports.INITIAL_HANDLE_HEIGHT = INITIAL_HANDLE_HEIGHT;
-const INITIAL_POSITION = _constants.SCREEN_HEIGHT;
+const INITIAL_POSITION = _constants.SCREEN_HEIGHT; // accessibility
+
 exports.INITIAL_POSITION = INITIAL_POSITION;
+const DEFAULT_ACCESSIBLE = true;
+exports.DEFAULT_ACCESSIBLE = DEFAULT_ACCESSIBLE;
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
+exports.DEFAULT_ACCESSIBILITY_LABEL = DEFAULT_ACCESSIBILITY_LABEL;
+const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+exports.DEFAULT_ACCESSIBILITY_ROLE = DEFAULT_ACCESSIBILITY_ROLE;
+const DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = true;
+exports.DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT;
+
+const DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT = positionInScreen => `Bottom sheet snapped to ${positionInScreen}% of the screen`;
+
+exports.DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT = DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT;
 //# sourceMappingURL=constants.js.map

lib/commonjs/components/bottomSheetBackdrop/BottomSheetBackdrop.js

@@ -33,3 +33,7 @@ "use strict";
   style,
-  children
+  children,
+  accessible: _providedAccessible = _constants.DEFAULT_ACCESSIBLE,
+  accessibilityRole: _providedAccessibilityRole = _constants.DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel: _providedAccessibilityLabel = _constants.DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint: _providedAccessibilityHint = _constants.DEFAULT_ACCESSIBILITY_HINT
 }) => {
@@ -40,3 +44,4 @@ //#region hooks
     close
-  } = (0, _hooks.useBottomSheet)(); //#endregion
+  } = (0, _hooks.useBottomSheet)();
+  const isMounted = (0, _react.useRef)(false); //#endregion
   //#region defaults
@@ -65,3 +70,3 @@
   const handleContainerTouchability = (0, _react.useCallback)(shouldDisableTouchability => {
-    setPointerEvents(shouldDisableTouchability ? 'none' : 'auto');
+    isMounted.current && setPointerEvents(shouldDisableTouchability ? 'none' : 'auto');
   }, []); //#endregion
@@ -90,17 +95,24 @@ //#region tap gesture
     (0, _reactNativeReanimated.runOnJS)(handleContainerTouchability)(shouldDisableTouchability);
-  }, [disappearsOnIndex]); //#endregion
+  }, [disappearsOnIndex]); // addressing updating the state after unmounting.
+  // [link](https://github.com/gorhom/react-native-bottom-sheet/issues/1376)
 
-  return pressBehavior !== 'none' ? /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
-    onGestureEvent: gestureHandler
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+  (0, _react.useEffect)(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []); //#endregion
+
+  const AnimatedView = /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: containerStyle,
     pointerEvents: pointerEvents,
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityLabel: "Bottom Sheet backdrop",
-    accessibilityHint: `Tap to ${typeof pressBehavior === 'string' ? pressBehavior : 'move'} the Bottom Sheet`
-  }, children)) : /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    pointerEvents: pointerEvents,
-    style: containerStyle
+    accessible: _providedAccessible !== null && _providedAccessible !== void 0 ? _providedAccessible : undefined,
+    accessibilityRole: _providedAccessibilityRole !== null && _providedAccessibilityRole !== void 0 ? _providedAccessibilityRole : undefined,
+    accessibilityLabel: _providedAccessibilityLabel !== null && _providedAccessibilityLabel !== void 0 ? _providedAccessibilityLabel : undefined,
+    accessibilityHint: _providedAccessibilityHint ? _providedAccessibilityHint : `Tap to ${typeof pressBehavior === 'string' ? pressBehavior : 'move'} the Bottom Sheet`
   }, children);
+
+  return pressBehavior !== 'none' ? /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+    onGestureEvent: gestureHandler
+  }, AnimatedView) : AnimatedView;
 };
@@ -107,0 +119,0 @@

lib/commonjs/components/bottomSheetBackdrop/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.DEFAULT_PRESS_BEHAVIOR = exports.DEFAULT_ENABLE_TOUCH_THROUGH = exports.DEFAULT_DISAPPEARS_ON_INDEX = exports.DEFAULT_APPEARS_ON_INDEX = exports.DEFAULT_OPACITY = void 0;
+exports.DEFAULT_ACCESSIBILITY_HINT = exports.DEFAULT_ACCESSIBILITY_LABEL = exports.DEFAULT_ACCESSIBILITY_ROLE = exports.DEFAULT_ACCESSIBLE = exports.DEFAULT_PRESS_BEHAVIOR = exports.DEFAULT_ENABLE_TOUCH_THROUGH = exports.DEFAULT_DISAPPEARS_ON_INDEX = exports.DEFAULT_APPEARS_ON_INDEX = exports.DEFAULT_OPACITY = void 0;
 const DEFAULT_OPACITY = 0.5;
@@ -18,2 +18,10 @@ exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
 exports.DEFAULT_PRESS_BEHAVIOR = DEFAULT_PRESS_BEHAVIOR;
+const DEFAULT_ACCESSIBLE = true;
+exports.DEFAULT_ACCESSIBLE = DEFAULT_ACCESSIBLE;
+const DEFAULT_ACCESSIBILITY_ROLE = 'button';
+exports.DEFAULT_ACCESSIBILITY_ROLE = DEFAULT_ACCESSIBILITY_ROLE;
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet backdrop';
+exports.DEFAULT_ACCESSIBILITY_LABEL = DEFAULT_ACCESSIBILITY_LABEL;
+const DEFAULT_ACCESSIBILITY_HINT = 'Tap to close the bottom sheet';
+exports.DEFAULT_ACCESSIBILITY_HINT = DEFAULT_ACCESSIBILITY_HINT;
 //# sourceMappingURL=constants.js.map

lib/commonjs/components/bottomSheetHandle/BottomSheetHandle.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _constants = require("./constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,3 +26,7 @@
   indicatorStyle: _indicatorStyle,
-  children
+  children,
+  accessible = _constants.DEFAULT_ACCESSIBLE,
+  accessibilityRole = _constants.DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel = _constants.DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint = _constants.DEFAULT_ACCESSIBILITY_HINT
 }) => {
@@ -32,3 +38,7 @@ // styles
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: containerStyle
+    style: containerStyle,
+    accessible: accessible !== null && accessible !== void 0 ? accessible : undefined,
+    accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : undefined,
+    accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : undefined,
+    accessibilityHint: accessibilityHint !== null && accessibilityHint !== void 0 ? accessibilityHint : undefined
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
@@ -35,0 +45,0 @@ style: indicatorStyle

lib/commonjs/components/bottomSheetHandleContainer/BottomSheetHandleContainer.js

@@ -100,6 +100,2 @@ "use strict";
     key: "BottomSheetHandleContainer",
-    accessible: true,
-    accessibilityRole: "adjustable",
-    accessibilityLabel: "Bottom Sheet handle",
-    accessibilityHint: "Drag up or down to extend or minimize the Bottom Sheet",
     onLayout: handleContainerLayout
@@ -106,0 +102,0 @@ }, /*#__PURE__*/_react.default.createElement(HandleComponent, {

lib/module/components/bottomSheet/BottomSheet.js

@@ -18,3 +18,3 @@ import React, { useMemo, useCallback, forwardRef, useImperativeHandle, memo, useEffect } from 'react';
 import { animate, getKeyboardAnimationConfigs, normalizeSnapPoint, print } from '../../utilities';
-import { DEFAULT_OVER_DRAG_RESISTANCE_FACTOR, DEFAULT_ENABLE_CONTENT_PANNING_GESTURE, DEFAULT_ENABLE_HANDLE_PANNING_GESTURE, DEFAULT_ENABLE_OVER_DRAG, DEFAULT_ANIMATE_ON_MOUNT, DEFAULT_KEYBOARD_BEHAVIOR, DEFAULT_KEYBOARD_BLUR_BEHAVIOR, DEFAULT_KEYBOARD_INPUT_MODE, INITIAL_CONTAINER_HEIGHT, INITIAL_HANDLE_HEIGHT, INITIAL_POSITION, INITIAL_SNAP_POINT, DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE, INITIAL_CONTAINER_OFFSET, INITIAL_VALUE, DEFAULT_DYNAMIC_SIZING } from './constants';
+import { DEFAULT_OVER_DRAG_RESISTANCE_FACTOR, DEFAULT_ENABLE_CONTENT_PANNING_GESTURE, DEFAULT_ENABLE_HANDLE_PANNING_GESTURE, DEFAULT_ENABLE_OVER_DRAG, DEFAULT_ANIMATE_ON_MOUNT, DEFAULT_KEYBOARD_BEHAVIOR, DEFAULT_KEYBOARD_BLUR_BEHAVIOR, DEFAULT_KEYBOARD_INPUT_MODE, INITIAL_CONTAINER_HEIGHT, INITIAL_HANDLE_HEIGHT, INITIAL_POSITION, INITIAL_SNAP_POINT, DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE, INITIAL_CONTAINER_OFFSET, INITIAL_VALUE, DEFAULT_DYNAMIC_SIZING, DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_ROLE } from './constants';
 import { styles } from './styles';
@@ -84,3 +84,7 @@ Animated.addWhitelistedUIProps({
     footerComponent,
-    children: Content
+    children: Content,
+    // accessibility
+    accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
+    accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+    accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE
   } = props; //#endregion
@@ -1105,3 +1109,6 @@ //#region layout variables
     pointerEvents: "box-none",
-    style: contentMaskContainerStyle
+    style: contentMaskContainerStyle,
+    accessible: _providedAccessible !== null && _providedAccessible !== void 0 ? _providedAccessible : undefined,
+    accessibilityRole: _providedAccessibilityRole !== null && _providedAccessibilityRole !== void 0 ? _providedAccessibilityRole : undefined,
+    accessibilityLabel: _providedAccessibilityLabel !== null && _providedAccessibilityLabel !== void 0 ? _providedAccessibilityLabel : undefined
   }, /*#__PURE__*/React.createElement(BottomSheetDraggableView, {
@@ -1108,0 +1115,0 @@ key: "BottomSheetRootDraggableView",

lib/module/components/bottomSheet/constants.js

@@ -26,6 +26,15 @@ import { KEYBOARD_BEHAVIOR, KEYBOARD_BLUR_BEHAVIOR, KEYBOARD_INPUT_MODE, SCREEN_HEIGHT } from '../../constants'; // default values
 const INITIAL_HANDLE_HEIGHT = -999;
-const INITIAL_POSITION = SCREEN_HEIGHT;
+const INITIAL_POSITION = SCREEN_HEIGHT; // accessibility
+
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
+const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+const DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = true;
+
+const DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT = positionInScreen => `Bottom sheet snapped to ${positionInScreen}% of the screen`;
+
 export { DEFAULT_HANDLE_HEIGHT, DEFAULT_OVER_DRAG_RESISTANCE_FACTOR, DEFAULT_ENABLE_CONTENT_PANNING_GESTURE, DEFAULT_ENABLE_HANDLE_PANNING_GESTURE, DEFAULT_ENABLE_OVER_DRAG, DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE, DEFAULT_DYNAMIC_SIZING, DEFAULT_ANIMATE_ON_MOUNT, // keyboard
 DEFAULT_KEYBOARD_BEHAVIOR, DEFAULT_KEYBOARD_BLUR_BEHAVIOR, DEFAULT_KEYBOARD_INPUT_MODE, // layout
-INITIAL_POSITION, INITIAL_CONTAINER_HEIGHT, INITIAL_CONTAINER_OFFSET, INITIAL_HANDLE_HEIGHT, INITIAL_SNAP_POINT, INITIAL_VALUE };
+INITIAL_POSITION, INITIAL_CONTAINER_HEIGHT, INITIAL_CONTAINER_OFFSET, INITIAL_HANDLE_HEIGHT, INITIAL_SNAP_POINT, INITIAL_VALUE, // accessibility
+DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_ROLE, DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT, DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT };
 //# sourceMappingURL=constants.js.map

lib/module/components/bottomSheetBackdrop/BottomSheetBackdrop.js

@@ -1,6 +0,6 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Animated, { interpolate, Extrapolate, useAnimatedStyle, useAnimatedReaction, useAnimatedGestureHandler, runOnJS } from 'react-native-reanimated';
 import { TapGestureHandler } from 'react-native-gesture-handler';
 import { useBottomSheet } from '../../hooks';
-import { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR } from './constants';
+import { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR, DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_ROLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_HINT } from './constants';
 import { styles } from './styles';
@@ -17,3 +17,7 @@
   style,
-  children
+  children,
+  accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
+  accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint: _providedAccessibilityHint = DEFAULT_ACCESSIBILITY_HINT
 }) => {
@@ -24,3 +28,4 @@ //#region hooks
     close
-  } = useBottomSheet(); //#endregion
+  } = useBottomSheet();
+  const isMounted = useRef(false); //#endregion
   //#region defaults
@@ -49,3 +54,3 @@
   const handleContainerTouchability = useCallback(shouldDisableTouchability => {
-    setPointerEvents(shouldDisableTouchability ? 'none' : 'auto');
+    isMounted.current && setPointerEvents(shouldDisableTouchability ? 'none' : 'auto');
   }, []); //#endregion
@@ -74,17 +79,23 @@ //#region tap gesture
     runOnJS(handleContainerTouchability)(shouldDisableTouchability);
-  }, [disappearsOnIndex]); //#endregion
+  }, [disappearsOnIndex]); // addressing updating the state after unmounting.
+  // [link](https://github.com/gorhom/react-native-bottom-sheet/issues/1376)
 
-  return pressBehavior !== 'none' ? /*#__PURE__*/React.createElement(TapGestureHandler, {
-    onGestureEvent: gestureHandler
-  }, /*#__PURE__*/React.createElement(Animated.View, {
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []); //#endregion
+
+  const AnimatedView = /*#__PURE__*/React.createElement(Animated.View, {
     style: containerStyle,
     pointerEvents: pointerEvents,
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityLabel: "Bottom Sheet backdrop",
-    accessibilityHint: `Tap to ${typeof pressBehavior === 'string' ? pressBehavior : 'move'} the Bottom Sheet`
-  }, children)) : /*#__PURE__*/React.createElement(Animated.View, {
-    pointerEvents: pointerEvents,
-    style: containerStyle
+    accessible: _providedAccessible !== null && _providedAccessible !== void 0 ? _providedAccessible : undefined,
+    accessibilityRole: _providedAccessibilityRole !== null && _providedAccessibilityRole !== void 0 ? _providedAccessibilityRole : undefined,
+    accessibilityLabel: _providedAccessibilityLabel !== null && _providedAccessibilityLabel !== void 0 ? _providedAccessibilityLabel : undefined,
+    accessibilityHint: _providedAccessibilityHint ? _providedAccessibilityHint : `Tap to ${typeof pressBehavior === 'string' ? pressBehavior : 'move'} the Bottom Sheet`
   }, children);
+  return pressBehavior !== 'none' ? /*#__PURE__*/React.createElement(TapGestureHandler, {
+    onGestureEvent: gestureHandler
+  }, AnimatedView) : AnimatedView;
 };
@@ -91,0 +102,0 @@

lib/module/components/bottomSheetBackdrop/constants.js

@@ -6,3 +6,7 @@ const DEFAULT_OPACITY = 0.5;
 const DEFAULT_PRESS_BEHAVIOR = 'close';
-export { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR };
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_ROLE = 'button';
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet backdrop';
+const DEFAULT_ACCESSIBILITY_HINT = 'Tap to close the bottom sheet';
+export { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR, DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_ROLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_HINT };
 //# sourceMappingURL=constants.js.map

lib/module/components/bottomSheetHandle/BottomSheetHandle.js

 import React, { memo, useMemo } from 'react';
 import Animated from 'react-native-reanimated';
 import { styles } from './styles';
+import { DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_ROLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_HINT } from './constants';
 
@@ -8,3 +9,7 @@ const BottomSheetHandleComponent = ({
   indicatorStyle: _indicatorStyle,
-  children
+  children,
+  accessible = DEFAULT_ACCESSIBLE,
+  accessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint = DEFAULT_ACCESSIBILITY_HINT
 }) => {
@@ -16,3 +21,7 @@ // styles
   return /*#__PURE__*/React.createElement(Animated.View, {
-    style: containerStyle
+    style: containerStyle,
+    accessible: accessible !== null && accessible !== void 0 ? accessible : undefined,
+    accessibilityRole: accessibilityRole !== null && accessibilityRole !== void 0 ? accessibilityRole : undefined,
+    accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : undefined,
+    accessibilityHint: accessibilityHint !== null && accessibilityHint !== void 0 ? accessibilityHint : undefined
   }, /*#__PURE__*/React.createElement(Animated.View, {
@@ -19,0 +28,0 @@ style: indicatorStyle

lib/module/components/bottomSheetHandleContainer/BottomSheetHandleContainer.js

@@ -82,6 +82,2 @@ import React, { memo, useCallback, useMemo } from 'react';
     key: "BottomSheetHandleContainer",
-    accessible: true,
-    accessibilityRole: "adjustable",
-    accessibilityLabel: "Bottom Sheet handle",
-    accessibilityHint: "Drag up or down to extend or minimize the Bottom Sheet",
     onLayout: handleContainerLayout
@@ -88,0 +84,0 @@ }, /*#__PURE__*/React.createElement(HandleComponent, {

lib/typescript/components/bottomSheet/constants.d.ts

@@ -23,2 +23,7 @@ declare const DEFAULT_HANDLE_HEIGHT = 24;
 declare const INITIAL_POSITION: number;
-export { DEFAULT_HANDLE_HEIGHT, DEFAULT_OVER_DRAG_RESISTANCE_FACTOR, DEFAULT_ENABLE_CONTENT_PANNING_GESTURE, DEFAULT_ENABLE_HANDLE_PANNING_GESTURE, DEFAULT_ENABLE_OVER_DRAG, DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE, DEFAULT_DYNAMIC_SIZING, DEFAULT_ANIMATE_ON_MOUNT, DEFAULT_KEYBOARD_BEHAVIOR, DEFAULT_KEYBOARD_BLUR_BEHAVIOR, DEFAULT_KEYBOARD_INPUT_MODE, INITIAL_POSITION, INITIAL_CONTAINER_HEIGHT, INITIAL_CONTAINER_OFFSET, INITIAL_HANDLE_HEIGHT, INITIAL_SNAP_POINT, INITIAL_VALUE, };
+declare const DEFAULT_ACCESSIBLE = true;
+declare const DEFAULT_ACCESSIBILITY_LABEL = "Bottom Sheet";
+declare const DEFAULT_ACCESSIBILITY_ROLE = "adjustable";
+declare const DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = true;
+declare const DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT: (positionInScreen: string) => string;
+export { DEFAULT_HANDLE_HEIGHT, DEFAULT_OVER_DRAG_RESISTANCE_FACTOR, DEFAULT_ENABLE_CONTENT_PANNING_GESTURE, DEFAULT_ENABLE_HANDLE_PANNING_GESTURE, DEFAULT_ENABLE_OVER_DRAG, DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE, DEFAULT_DYNAMIC_SIZING, DEFAULT_ANIMATE_ON_MOUNT, DEFAULT_KEYBOARD_BEHAVIOR, DEFAULT_KEYBOARD_BLUR_BEHAVIOR, DEFAULT_KEYBOARD_INPUT_MODE, INITIAL_POSITION, INITIAL_CONTAINER_HEIGHT, INITIAL_CONTAINER_OFFSET, INITIAL_HANDLE_HEIGHT, INITIAL_SNAP_POINT, INITIAL_VALUE, DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_ROLE, DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT, DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT, };

lib/typescript/components/bottomSheet/types.d.ts

@@ -20,3 +20,6 @@ import type React from 'react';
 } from '../../constants';
-import type { GestureEventsHandlersHookType } from '../../types';
+import type {
+  GestureEventsHandlersHookType,
+  NullableAccessibilityProps,
+} from '../../types';
 
@@ -35,3 +38,4 @@ export interface BottomSheetProps
       >
-    > {
+    >,
+    Omit<NullableAccessibilityProps, 'accessibilityHint'> {
   //#region configuration
@@ -38,0 +42,0 @@ /**

lib/typescript/components/bottomSheetBackdrop/BottomSheetBackdrop.d.ts

 import React from 'react';
 import type { BottomSheetDefaultBackdropProps } from './types';
-declare const BottomSheetBackdrop: React.MemoExoticComponent<({ animatedIndex, opacity: _providedOpacity, appearsOnIndex: _providedAppearsOnIndex, disappearsOnIndex: _providedDisappearsOnIndex, enableTouchThrough: _providedEnableTouchThrough, pressBehavior, onPress, style, children, }: BottomSheetDefaultBackdropProps) => JSX.Element>;
+declare const BottomSheetBackdrop: React.MemoExoticComponent<({ animatedIndex, opacity: _providedOpacity, appearsOnIndex: _providedAppearsOnIndex, disappearsOnIndex: _providedDisappearsOnIndex, enableTouchThrough: _providedEnableTouchThrough, pressBehavior, onPress, style, children, accessible: _providedAccessible, accessibilityRole: _providedAccessibilityRole, accessibilityLabel: _providedAccessibilityLabel, accessibilityHint: _providedAccessibilityHint, }: BottomSheetDefaultBackdropProps) => JSX.Element>;
 export default BottomSheetBackdrop;

lib/typescript/components/bottomSheetBackdrop/constants.d.ts

@@ -6,2 +6,6 @@ declare const DEFAULT_OPACITY = 0.5;
 declare const DEFAULT_PRESS_BEHAVIOR: "close";
-export { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR, };
+declare const DEFAULT_ACCESSIBLE = true;
+declare const DEFAULT_ACCESSIBILITY_ROLE = "button";
+declare const DEFAULT_ACCESSIBILITY_LABEL = "Bottom sheet backdrop";
+declare const DEFAULT_ACCESSIBILITY_HINT = "Tap to close the bottom sheet";
+export { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, DEFAULT_PRESS_BEHAVIOR, DEFAULT_ACCESSIBLE, DEFAULT_ACCESSIBILITY_ROLE, DEFAULT_ACCESSIBILITY_LABEL, DEFAULT_ACCESSIBILITY_HINT, };

lib/typescript/components/bottomSheetBackdrop/types.d.ts

 import { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
@@ -12,3 +15,4 @@ export interface BottomSheetBackdropProps
 export interface BottomSheetDefaultBackdropProps
-  extends BottomSheetBackdropProps {
+  extends BottomSheetBackdropProps,
+    NullableAccessibilityProps {
   /**
@@ -15,0 +19,0 @@ * Backdrop opacity.

lib/typescript/components/bottomSheetHandle/BottomSheetHandle.d.ts

 import React from 'react';
 import type { BottomSheetDefaultHandleProps } from './types';
-declare const BottomSheetHandle: React.MemoExoticComponent<({ style, indicatorStyle: _indicatorStyle, children, }: BottomSheetDefaultHandleProps) => JSX.Element>;
+declare const BottomSheetHandle: React.MemoExoticComponent<({ style, indicatorStyle: _indicatorStyle, children, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, }: BottomSheetDefaultHandleProps) => JSX.Element>;
 export default BottomSheetHandle;

lib/typescript/components/bottomSheetHandle/types.d.ts

 import type React from 'react';
 import type { ViewProps } from 'react-native';
 import type { AnimateProps } from 'react-native-reanimated';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
 export interface BottomSheetHandleProps extends BottomSheetVariables {}
 
-export interface BottomSheetDefaultHandleProps extends BottomSheetHandleProps {
+export interface BottomSheetDefaultHandleProps
+  extends BottomSheetHandleProps,
+    NullableAccessibilityProps {
   /**
@@ -10,0 +15,0 @@ * View style to be applied to the handle container.

lib/typescript/types.d.ts

@@ -8,2 +8,3 @@ import type React from 'react';
   NativeSyntheticEvent,
+  AccessibilityProps,
 } from 'react-native';
@@ -167,1 +168,8 @@ import type {
 //#endregion
+
+export interface NullableAccessibilityProps extends AccessibilityProps {
+  accessible?: AccessibilityProps['accessible'] | null;
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel'] | null;
+  accessibilityHint?: AccessibilityProps['accessibilityHint'] | null;
+  accessibilityRole?: AccessibilityProps['accessibilityRole'] | null;
+}

package.json

 {
   "name": "@gorhom/bottom-sheet",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "A performant interactive bottom sheet with fully configurable options 🚀",
@@ -49,3 +49,3 @@ "main": "lib/commonjs/index",
     "@react-native-community/eslint-config": "^3.0.0",
-    "@release-it/conventional-changelog": "^7.0.1",
+    "@release-it/conventional-changelog": "^8.0.1",
     "@types/invariant": "^2.2.34",
@@ -67,3 +67,3 @@ "@types/react": "17.0.2",
     "react-native-reanimated": "^2.8.0",
-    "release-it": "^16.1.5",
+    "release-it": "^17.0.1",
     "typescript": "^4.2.4"
@@ -70,0 +70,0 @@ },

src/components/bottomSheet/constants.ts

@@ -36,2 +36,11 @@ import {
 
+// accessibility
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
+const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+const DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT = true;
+const DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT = (
+  positionInScreen: string
+) => `Bottom sheet snapped to ${positionInScreen}% of the screen`;
+
 export {
@@ -57,2 +66,8 @@ DEFAULT_HANDLE_HEIGHT,
   INITIAL_VALUE,
+  // accessibility
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ENABLE_ACCESSIBILITY_CHANGE_ANNOUNCEMENT,
+  DEFAULT_ACCESSIBILITY_POSITION_CHANGE_ANNOUNCEMENT,
 };

src/components/bottomSheet/types.d.ts

@@ -20,3 +20,6 @@ import type React from 'react';
 } from '../../constants';
-import type { GestureEventsHandlersHookType } from '../../types';
+import type {
+  GestureEventsHandlersHookType,
+  NullableAccessibilityProps,
+} from '../../types';
 
@@ -35,3 +38,4 @@ export interface BottomSheetProps
       >
-    > {
+    >,
+    Omit<NullableAccessibilityProps, 'accessibilityHint'> {
   //#region configuration
@@ -38,0 +42,0 @@ /**

src/components/bottomSheetBackdrop/constants.ts

@@ -7,2 +7,7 @@ const DEFAULT_OPACITY = 0.5;
 
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_ROLE = 'button';
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet backdrop';
+const DEFAULT_ACCESSIBILITY_HINT = 'Tap to close the bottom sheet';
+
 export {
@@ -14,2 +19,6 @@ DEFAULT_OPACITY,
   DEFAULT_PRESS_BEHAVIOR,
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
 };

src/components/bottomSheetBackdrop/types.d.ts

 import { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
@@ -12,3 +15,4 @@ export interface BottomSheetBackdropProps
 export interface BottomSheetDefaultBackdropProps
-  extends BottomSheetBackdropProps {
+  extends BottomSheetBackdropProps,
+    NullableAccessibilityProps {
   /**
@@ -15,0 +19,0 @@ * Backdrop opacity.

src/components/bottomSheetHandle/types.d.ts

 import type React from 'react';
 import type { ViewProps } from 'react-native';
 import type { AnimateProps } from 'react-native-reanimated';
-import type { BottomSheetVariables } from '../../types';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
 
 export interface BottomSheetHandleProps extends BottomSheetVariables {}
 
-export interface BottomSheetDefaultHandleProps extends BottomSheetHandleProps {
+export interface BottomSheetDefaultHandleProps
+  extends BottomSheetHandleProps,
+    NullableAccessibilityProps {
   /**
@@ -10,0 +15,0 @@ * View style to be applied to the handle container.

src/types.d.ts

@@ -8,2 +8,3 @@ import type React from 'react';
   NativeSyntheticEvent,
+  AccessibilityProps,
 } from 'react-native';
@@ -167,1 +168,8 @@ import type {
 //#endregion
+
+export interface NullableAccessibilityProps extends AccessibilityProps {
+  accessible?: AccessibilityProps['accessible'] | null;
+  accessibilityLabel?: AccessibilityProps['accessibilityLabel'] | null;
+  accessibilityHint?: AccessibilityProps['accessibilityHint'] | null;
+  accessibilityRole?: AccessibilityProps['accessibilityRole'] | null;
+}

No alert changes

Improved metrics

Total package byte prevSize

1334637

increased by1.99%

Number of package files

636

increased by0.95%

Lines of code

16854

increased by1.41%

No dependency changes