Add SafeAreaView wrapper

Add the SafeAreaView wrapper to the OnDeviceUI addons panel
storybookjs · Aug 19, 2019 · 553db0d · 553db0d
1 parent c3b0538
commit 553db0d
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/addons/index.tsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { SafeAreaView } from 'react-native';
 import styled from '@emotion/native';
 import addons from '@storybook/addons';
 import AddonsList from './list';
@@ -37,20 +38,24 @@ export default class Addons extends PureComponent<{}, { addonSelected: string }>
 
     if (Object.keys(this.panels).length === 0) {
       return (
-        <NoAddonContainer>
-          <Label>No addons loaded.</Label>
-        </NoAddonContainer>
+        <SafeAreaView style={{ flex: 1 }}>
+          <NoAddonContainer>
+            <Label>No addons loaded.</Label>
+          </NoAddonContainer>
+        </SafeAreaView>
       );
     }
 
     return (
       <Container>
-        <AddonsList
-          onPressAddon={this.onPressAddon}
-          panels={this.panels}
-          addonSelected={addonSelected}
-        />
-        <AddonWrapper addonSelected={addonSelected} panels={this.panels} />
+        <SafeAreaView style={{ flex: 1 }}>
+          <AddonsList
+            onPressAddon={this.onPressAddon}
+            panels={this.panels}
+            addonSelected={addonSelected}
+          />
+          <AddonWrapper addonSelected={addonSelected} panels={this.panels} />
+        </SafeAreaView>
       </Container>
     );
   }