Change OnDevice layout to have absolute positioning

app/react-native/src/preview/components/OnDeviceUI/index.js

@@ -1,13 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  Animated,
-  TouchableOpacity,
-} from 'react-native';
+import { Keyboard, KeyboardAvoidingView, Platform, Animated, TouchableOpacity } from 'react-native';
 import Events from '@storybook/core-events';
 
 import StoryListView from '../StoryListView';
@@ -150,49 +143,48 @@ export default class OnDeviceUI extends PureComponent {
     ];
 
     return (
-      <SafeAreaView style={style.flex}>
-        <KeyboardAvoidingView
-          enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
-          behavior={IS_IOS ? 'padding' : null}
-          keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
-          style={style.flex}
+      <KeyboardAvoidingView
+        enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
+        behavior={IS_IOS ? 'padding' : null}
+        keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
+        style={style.flex}
+      >
+        <AbsolutePositionedKeyboardAwareView
+          onLayout={this.onLayout}
+          previewHeight={previewHeight}
+          previewWidth={previewWidth}
         >
-          <AbsolutePositionedKeyboardAwareView
-            onLayout={this.onLayout}
-            previewHeight={previewHeight}
-            previewWidth={previewWidth}
-          >
-            <Animated.View style={previewWrapperStyles}>
-              <Animated.View style={previewStyles}>
-                <TouchableOpacity
-                  accessible={false}
-                  style={style.flex}
-                  disabled={tabOpen === PREVIEW}
-                  onPress={this.handleOpenPreview}
-                >
-                  <StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
-                </TouchableOpacity>
-              </Animated.View>
+          <Animated.View style={previewWrapperStyles}>
+            <Animated.View style={previewStyles}>
+              <TouchableOpacity
+                accessible={false}
+                style={style.flex}
+                disabled={tabOpen === PREVIEW}
+                onPress={this.handleOpenPreview}
+              >
+                <StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
+              </TouchableOpacity>
             </Animated.View>
-            <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-              <StoryListView
-                stories={stories}
-                events={events}
-                selectedKind={selection.kind}
-                selectedStory={selection.story}
-              />
-            </Panel>
-            <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
-              <Addons />
-            </Panel>
-          </AbsolutePositionedKeyboardAwareView>
-          <Navigation
-            tabOpen={tabOpen}
-            onChangeTab={this.handleToggleTab}
-            initialUiVisible={!isUIHidden}
-          />
-        </KeyboardAvoidingView>
-      </SafeAreaView>
+          </Animated.View>
+          <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
+            <StoryListView
+              stories={stories}
+              events={events}
+              selectedKind={selection.kind}
+              selectedStory={selection.story}
+            />
+          </Panel>
+          <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
+            <Addons />
+          </Panel>
+        </AbsolutePositionedKeyboardAwareView>
+
+        <Navigation
+          tabOpen={tabOpen}
+          onChangeTab={this.handleToggleTab}
+          initialUiVisible={!isUIHidden}
+        />
+      </KeyboardAvoidingView>
     );
   }
 }

app/react-native/src/preview/components/OnDeviceUI/navigation/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import { View, SafeAreaView, StyleSheet } from 'react-native';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import PropTypes from 'prop-types';
 
@@ -11,6 +11,15 @@ const SWIPE_CONFIG = {
   directionalOffsetThreshold: 80,
 };
 
+const style = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
 export default class Navigation extends PureComponent {
   constructor(props) {
     super(props);
@@ -44,17 +53,21 @@ export default class Navigation extends PureComponent {
     const { isUIVisible } = this.state;
 
     return (
-      <View>
-        {isUIVisible && (
-          <GestureRecognizer
-            onSwipeLeft={this.handleSwipeLeft}
-            onSwipeRight={this.handleSwipeRight}
-            config={SWIPE_CONFIG}
-          >
-            <Bar index={tabOpen} onPress={onChangeTab} />
-          </GestureRecognizer>
-        )}
-        <VisibilityButton onPress={this.handleToggleUI} />
+      <View style={style.wrapper}>
+        <SafeAreaView>
+          {isUIVisible && (
+            <GestureRecognizer
+              onSwipeLeft={this.handleSwipeLeft}
+              onSwipeRight={this.handleSwipeRight}
+              config={SWIPE_CONFIG}
+            >
+              <Bar index={tabOpen} onPress={onChangeTab} />
+            </GestureRecognizer>
+          )}
+          <View>
+            <VisibilityButton onPress={this.handleToggleUI} />
+          </View>
+        </SafeAreaView>
       </View>
     );
   }

app/react-native/src/preview/components/OnDeviceUI/navigation/visibility-button.js

@@ -14,7 +14,7 @@ export default class VisibilityButton extends PureComponent {
         style={style.hideButton}
         hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
       >
-        <Text style={[style.hideButtonText]}>□</Text>
+        <Text style={style.hideButtonText}>□</Text>
       </TouchableOpacity>
     );
   }

app/react-native/src/preview/components/OnDeviceUI/style.js

@@ -23,6 +23,7 @@ export default {
     position: 'absolute',
     right: 8,
     bottom: 12,
+    zIndex: 100,
   },
   previewMinimized: {
     borderWidth: 1,

app/react-native/src/preview/components/StoryListView/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { SectionList, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { SectionList, Text, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
 import Events from '@storybook/core-events';
 import style from './style';
 
@@ -116,7 +116,7 @@ export default class StoryListView extends Component {
     const { data } = this.state;
 
     return (
-      <View style={style.flex}>
+      <SafeAreaView style={style.flex}>
         <TextInput
           clearButtonMode="while-editing"
           disableFullscreenUI
@@ -127,7 +127,7 @@ export default class StoryListView extends Component {
         />
         <SectionList
           testID="Storybook.ListView"
-          style={style.flex}
+          style={style.sectionList}
           renderItem={({ item }) => (
             <ListItem
               title={item.name}
@@ -143,7 +143,7 @@ export default class StoryListView extends Component {
           sections={data}
           stickySectionHeadersEnabled={false}
         />
-      </View>
+      </SafeAreaView>
     );
   }
 }

app/react-native/src/preview/components/StoryListView/style.js

@@ -10,6 +10,10 @@ export default {
   flex: {
     flex: 1,
   },
+  sectionList: {
+    flex: 1,
+    marginBottom: 40,
+  },
   header: {
     paddingVertical: 5,
   },