title: react native - screen cut off at bottom
body: <p>I'm building a React Native app for the first time using an iOS Simulator with XCode, and it seems that my elements on the bottom of the screen are being cut off, as if the screen can only scroll so far. I've tried changing the overall container <code>View</code>'s height, but it doesn't change how far down I can scroll. I've also tried removing the styling, as well as changing <code>View</code> to <code>ScrollView</code>, but neither helped. Another strange thing is that I need to add <code>paddingTop</code>, otherwise, the first <code>Text</code> is displayed over the time in the simulator</p>
  
  <p>Here's the code:</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import Fields from './components/Fields.js'
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text&gt;Calculator&lt;/Text&gt;
          &lt;Text&gt;1099 Calculator&lt;/Text&gt;
          &lt;Fields /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      paddingTop: 50
    },
  });
  </code></pre>
  
  <p>Here's the top of the screen without the padding
  <a href="https://i.stack.imgur.com/vGYA4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vGYA4.png" alt="enter image description here"></a></p>
  
  <p>And here's how it looks cut off
  <a href="https://i.stack.imgur.com/WR6Dz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WR6Dz.png" alt="enter image description here"></a></p>