diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index 6e6b24f..84ed1ce 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -9,7 +9,7 @@ import React, { useLayoutEffect, useEffect, } from 'react'; -import { ViewStyle } from 'react-native'; +import { ViewStyle, AccessibilityInfo } from 'react-native'; import isEqual from 'lodash.isequal'; import invariant from 'invariant'; import Animated, { @@ -486,6 +486,28 @@ const BottomSheetComponent = forwardRef( ) { return; } + + /** + * Here we announce the bottom sheet position + * for accessibility service. + */ + AccessibilityInfo.isScreenReaderEnabled().then(isEnabled => { + if (!isEnabled) { + return; + } + const positionInScreen = Math.max( + Math.floor( + ((WINDOW_HEIGHT - snapPoints[currentPositionIndex] || 1) / + WINDOW_HEIGHT) * + 100 + ), + 0 + ).toFixed(0); + AccessibilityInfo.announceForAccessibility( + `Bottom sheet snapped to ${positionInScreen}% of the screen` + ); + }); + currentIndexRef.current = currentPositionIndex; refreshUIElements(); handleOnChange(currentPositionIndex); @@ -536,7 +558,12 @@ const BottomSheetComponent = forwardRef( ref={containerTapGestureRef} {...containerTapGestureHandler} > - + [ + style, + { + top: cond(eq(animatedIndex, disappearsOnIndex), WINDOW_HEIGHT, 0), + }, + ], + [disappearsOnIndex, style, animatedIndex] + ); const containerStyle = useMemo( () => [ style, @@ -81,20 +95,22 @@ const BottomSheetBackdropComponent = ({ [style, animatedOpacity] ); //#endregion - - //#region effects - - //#endregion - return closeOnPress ? ( <> - + - + {() => cond( - and(eq(animatedPosition, 0), isTouchable), + and(eq(animatedPosition, disappearsOnIndex), isTouchable), [ set(isTouchable, 0), call([], () => { @@ -104,15 +120,18 @@ const BottomSheetBackdropComponent = ({ }); }), ], - cond(and(neq(animatedPosition, 0), not(isTouchable)), [ - set(isTouchable, 1), - call([], () => { - // @ts-ignore - containerRef.current.setNativeProps({ - pointerEvents: 'auto', - }); - }), - ]) + cond( + and(neq(animatedPosition, disappearsOnIndex), not(isTouchable)), + [ + set(isTouchable, 1), + call([], () => { + // @ts-ignore + containerRef.current.setNativeProps({ + pointerEvents: 'auto', + }); + }), + ] + ) ) } diff --git a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx index 2943d02..3aa46e8 100644 --- a/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx +++ b/src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx @@ -68,6 +68,10 @@ const BottomSheetHandleContainerComponent = ({ onHandlerStateChange={onHandlerStateChange} > {renderHandle()}