TouchableArea does not fill entire screen

[morenoh149]

Why doesn't the touchable area grow to fill the entire screen? https://github.com/reapp/reapp-ui/blob/3d8b988c6f1096fe9c4a523a0355ed3ad6ee6dad/src/helpers/TouchableArea.jsx I'm currently trying to display a small message in the middle of the screen and I'm orienting myself with reapp conventions.

Here's what I tried

//Home.jsx
      <NestedViewList {...this.props.viewListProps} >
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          flexGrow: '1'}}>
          <h1>Temp</h1>
        </div>
        {this.props.child()}
      </NestedViewList>

My div grows to fill it's parent.

//output
<div class="TouchableArea" data-reactid=".0"><div class="TitleBar" width="375" style="background:#f8f8f8;background-image:;background-position:;background-repeat:;background-color:;border-color:#ddd;border-style:solid;border-width:0;border-bottom-width:1px;height:NaN;font-size:16px;padding:0;text-align:center;top:0;left:0;width:100%;font-weight:500;z-index:1;flex-flow:row;justify-content:space-between;padding-top:20px;" data-reactid=".0.0"><div class="TitleBar--mid" style="color: rgb(0, 0, 0); margin: auto 0px; position: relative; font-weight: 500; left: 187.5px;" data-reactid=".0.0.1"></div></div><div style="display:flex;flex-direction:column;justify-content:center;flex-grow: 1;align-items:center;" data-reactid=".0.1:$=10:$0"><h1 data-reactid=".0.1:$=10:$0.0">Temp</h1></div></div>

But div.TouchableArea isn't growing to fill the screen. Anyone else think it should behave differently?