feat: adds support for supportedOrientations (#224)

fixes Landscape mode in BottomSheet fails accessibility test #223
FormidableLabs · Aug 8, 2024 · 92e5b51 · 92e5b51
1 parent 128f514
commit 92e5b51
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/extras/docs/BottomSheet.md b/packages/extras/docs/BottomSheet.md
@@ -243,6 +243,14 @@ A `ref` object used to call `close` and `isVisible` functions on the bottomSheet
 | ----------------------------------------------------------- |
 | `{ close: () => Promise<void>; isVisible: () => boolean; }` |
 
+### `supportedOrientations`
+
+iOS only. An array of strings that specify the orientations supported by the bottom sheet. Type is defined by [React Native Modal](https://reactnative.dev/docs/modal#supportedorientations-ios)
+
+| Type                                                                                     |
+| ---------------------------------------------------------------------------------------- |
+| `['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']` |
+
 ## Known issues
 
 If the app crashes with the following error:

diff --git a/packages/extras/src/components/BottomSheet.tsx b/packages/extras/src/components/BottomSheet.tsx
@@ -9,6 +9,7 @@ import {
   KeyboardAvoidingView,
   LayoutChangeEvent,
   Modal,
+  ModalProps,
   Platform,
   Pressable,
   ScrollViewProps,
@@ -61,6 +62,7 @@ export type BottomSheetProps = {
   visible: boolean;
   ref?: React.RefObject<BottomSheetActions>;
   shouldHandleKeyboardEvents?: boolean;
+  supportedOrientations?: ModalProps['supportedOrientations'];
 };
 
 export type BottomSheetActions = {
@@ -102,6 +104,7 @@ export const BottomSheet = React.forwardRef<
       topInset,
       onBottomSheetHidden,
       shouldHandleKeyboardEvents = true,
+      supportedOrientations,
     },
     ref,
   ) => {
@@ -272,6 +275,7 @@ export const BottomSheet = React.forwardRef<
         visible={isModalVisible}
         onRequestClose={() => onClose()}
         ref={ref as any}
+        supportedOrientations={supportedOrientations}
         testID={testID}>
         <Wrapper>
           {renderContent ? (