From 4cfcdef264d95569f61552cb043c012691dd4089 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 20 Jun 2017 10:17:55 -0700
Subject: [PATCH] [fix] AppRegistry container layout

Absolute fill positioning provides better default layout for full-screen
apps.

Fix #528
---
 docs/apis/AppRegistry.md                   | 3 +++
 src/apis/AppRegistry/AppContainer.js       | 2 +-
 src/apis/StyleSheet/createReactDOMStyle.js | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/apis/AppRegistry.md b/docs/apis/AppRegistry.md
index af66e87d..e2ba875d 100644
--- a/docs/apis/AppRegistry.md
+++ b/docs/apis/AppRegistry.md
@@ -40,6 +40,9 @@ Runs the application that was registered under `appKey`. The `appParameters`
 must include the `rootTag` into which the application is rendered, and
 optionally any `initialProps`.
 
+On web, if the `rootTag` is a sub-section of your application it should be
+styled as `position:relative` and given an explicit height.
+
 static **unmountApplicationComponentAtRootTag**(rootTag: HTMLElement)
 
 To "stop" an application when a view should be destroyed, call
diff --git a/src/apis/AppRegistry/AppContainer.js b/src/apis/AppRegistry/AppContainer.js
index 8cd1c449..f896ce2a 100644
--- a/src/apis/AppRegistry/AppContainer.js
+++ b/src/apis/AppRegistry/AppContainer.js
@@ -48,7 +48,7 @@ export default class AppContainer extends Component {
 
   render() {
     return (
-      <View pointerEvents="box-none" style={styles.appContainer}>
+      <View pointerEvents="box-none" style={[styles.appContainer, StyleSheet.absoluteFill]}>
         <View
           children={this.props.children}
           key={this.state.mainKey}
diff --git a/src/apis/StyleSheet/createReactDOMStyle.js b/src/apis/StyleSheet/createReactDOMStyle.js
index 7f1c7f86..9fcd0790 100644
--- a/src/apis/StyleSheet/createReactDOMStyle.js
+++ b/src/apis/StyleSheet/createReactDOMStyle.js
@@ -152,7 +152,7 @@ const createReducer = (style, styleProps) => {
             resolvedStyle.flexShrink = 0;
           }
           if (style.flexBasis == null) {
-            resolvedStyle.flexBasis = 'auto'
+            resolvedStyle.flexBasis = 'auto';
           }
         }
         break;