Repository: codypearce/material-bread
Pull request #316 (2019-10-14 21:20:35)

Feature/sheetbottom landscape support
This PR adds in landscape support for the `SheetBottom` component. It passes an array of supported orientations (`['portrait', 'landscape']`) to `Modal` and wraps its children in a `SafeAreaView`. The SAV is necessary to prevent content from rendering within the iOS-specific safe areas. It also updates the `fullHeight` state value, enabling the component to listen to orientation changes.

![Oct-14-2019 17-13-54](https://user-images.githubusercontent.com/4458812/66783877-ec6c1980-eea6-11e9-8fd9-96a475fa4f64.gif)



Patch:
diff --git a/src/Components/SheetBottom/SheetBottom.native.js b/src/Components/SheetBottom/SheetBottom.native.js
index 84118d4..3e5c05a 100644
--- a/src/Components/SheetBottom/SheetBottom.native.js
+++ b/src/Components/SheetBottom/SheetBottom.native.js
@@ -7,6 +7,7 @@ import {
   PanResponder,
   Modal,
   Dimensions,
+  SafeAreaView,
 } from 'react-native';
 import styles from './SheetBottom.styles';
 
@@ -83,6 +84,7 @@ class SheetBottom extends Component {
       {
         initialWidth: width,
         initialHeight: height,
+        fullHeight: windowHeight,
       },
       () => {
         pan.setValue({ x: 0, y: windowHeight });
@@ -172,7 +174,8 @@ class SheetBottom extends Component {
         transparent
         animationType={'none'}
         visible={internalVisible}
-        onRequestClose={this._close}>
+        onRequestClose={this._close}
+        supportedOrientations={['portrait', 'landscape']}>
         {this._renderContent()}
       </Modal>
     );
@@ -208,7 +211,7 @@ class SheetBottom extends Component {
               transform: [{ translateY: pan.y }],
             },
           ]}>
-          <View onLayout={this.onMenuLayout}>{children}</View>
+          <SafeAreaView onLayout={this.onMenuLayout}>{children}</SafeAreaView>
         </Animated.View>
       </View>
     );


Test patch:
diff --git a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
index cfdb56a..0cfa8d3 100644
--- a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
+++ b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
@@ -5,6 +5,12 @@ exports[`DrawerBottom Renders 1`] = `
   animationType="none"
   hardwareAccelerated={false}
   onRequestClose={[Function]}
+  supportedOrientations={
+    Array [
+      "portrait",
+      "landscape",
+    ]
+  }
   transparent={true}
   visible={false}
 >
@@ -70,7 +76,8 @@ exports[`DrawerBottom Renders 1`] = `
         }
       }
     >
-      <View
+      <RCTSafeAreaView
+        emulateUnlessSupported={true}
         onLayout={[Function]}
       />
     </View>
diff --git a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
index 4a37531..9c690cc 100644
--- a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
+++ b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
@@ -5,6 +5,12 @@ exports[`SheetBottom Renders 1`] = `
   animationType="none"
   hardwareAccelerated={false}
   onRequestClose={[Function]}
+  supportedOrientations={
+    Array [
+      "portrait",
+      "landscape",
+    ]
+  }
   transparent={true}
   visible={false}
 >
@@ -69,7 +75,7 @@ exports[`SheetBottom Renders 1`] = `
         ]
       }
     >
-      <View
+      <SafeAreaView
         onLayout={[Function]}
       />
     </AnimatedComponent>