From 51bb2f8e8265d3f3b7275e3ef583e3655552932f Mon Sep 17 00:00:00 2001
From: Danny Williams <danny.h.williams@hotmail.com>
Date: Fri, 7 Aug 2020 02:31:21 +0100
Subject: [PATCH 1/2] fix: potential fix for status bar covering stories on
 android+expo

---
 app/react-native/src/preview/components/OnDeviceUI/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
index 2d33bac60b..44fb7850a8 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
@@ -8,6 +8,7 @@ import {
   SafeAreaView,
   Dimensions,
   TouchableOpacity,
+  StatusBar,
 } from 'react-native';
 import styled from '@emotion/native';
 import addons from '@storybook/addons';
@@ -126,7 +127,9 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     const previewStyles = [flex, getPreviewScale(this.animatedValue, slideBetweenAnimation)];
 
     return (
-      <SafeAreaView style={flex}>
+      <SafeAreaView
+        style={[flex, { paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }]}
+      >
         <KeyboardAvoidingView
           enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
           behavior={IS_IOS ? 'padding' : null}

From 7b2e28b6b8475e606bfcf298d10be0b7307b62d1 Mon Sep 17 00:00:00 2001
From: Danny Williams <danny.h.williams@hotmail.com>
Date: Fri, 25 Sep 2020 22:31:00 +0100
Subject: [PATCH 2/2] fix: padding only on android expo

---
 .../src/preview/components/OnDeviceUI/index.tsx           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
index 44fb7850a8..295801dcd9 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
@@ -32,6 +32,12 @@ import {
 const ANIMATION_DURATION = 300;
 const IS_IOS = Platform.OS === 'ios';
 
+// @ts-ignore: Property 'Expo' does not exist on type 'Global'
+// eslint-disable-next-line no-underscore-dangle
+const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
+export const IS_EXPO = getExpoRoot() !== undefined;
+const IS_ANDROID = Platform.OS === 'android';
+
 interface OnDeviceUIProps {
   stories: any;
   url?: string;
@@ -128,7 +134,7 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
 
     return (
       <SafeAreaView
-        style={[flex, { paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }]}
+        style={[flex, { paddingTop: IS_ANDROID && IS_EXPO ? StatusBar.currentHeight : 0 }]}
       >
         <KeyboardAvoidingView
           enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}