From 553db0dfcef418c4bf67e5a078099169d271042d Mon Sep 17 00:00:00 2001
From: Brandon Richards <bqrichards@icloud.com>
Date: Mon, 19 Aug 2019 16:32:17 -0500
Subject: [PATCH] Add SafeAreaView wrapper

Add the SafeAreaView wrapper to the OnDeviceUI addons panel
---
 .../components/OnDeviceUI/addons/index.tsx    | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 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
index 366e73eb6bd2..304440423599 100644
--- 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>
     );
   }