Content hidden behind TabBarIOS with React Native
<p>I'm building an iOS app with React Native and am implementing a <code>TabBarIOS</code>. The content on the tabs seems to flow behind and be obscured by the bar. In xcode I would have just unchecked the "extend edges" boxes but am not sure how to do this with React Native.</p>

<p>Here's an abbreviated version of what I'm trying to do. The <code>&lt;View&gt;</code> from <code>CreateUser</code> flows behind the tab bar. Is there an easy way to make sure content doesn't get obscured by the tab bar?</p>

<pre><code>import React from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
} from 'react-native'

export default class TabBar extends React.Component {
  state = {
    selectedTab: 'list'
  }

  render() {
    return (
      &lt;TabBarIOS selectedTab={this.state.selectedTab}
        unselectedTintColor="#ffffff"
        tintColor="#ffe429"
        barTintColor="#294163"&gt;

        &lt;TabBarIOS.Item 
          title="My List"
          systemIcon="bookmarks"
          selected={this.state.selectedTab==='list'}
          onPress={() =&gt; {
              this.setState({
                  selectedTab: 'list',
              });
          }}
          &gt;
          &lt;CreateUser /&gt;
        &lt;/TabBarIOS.Item&gt;
      &lt;/TabBarIOS&gt;
    );
  }
}


var styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'darkslategrey',
    margin: 50,
  },
});



export default class CreateUser extends React.Component{

    render(){
        return (
                &lt;View style={styles.container}&gt;
                    &lt;TouchableHighlight style={styles.button}&gt;
                        &lt;Text style={styles.buttonText}&gt;LOG IN&lt;/Text&gt;
                    &lt;/TouchableHighlight&gt;
                &lt;/View&gt;
            )
    }

}



var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "flex-end",
        alignItems: 'center',
    },
    button: {
        backgroundColor: "#ffe429",
        borderRadius: 3,
        height: 60,
        width: 200,
        margin: 7,
        //flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    buttonText: {
        color: "#294163",
    }

})
</code></pre>