react native - screen cut off at bottom

Question

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 View's height, but it doesn't change how far down I can scroll. I've also tried removing the styling, as well as changing View to ScrollView, but neither helped. Another strange thing is that I need to add paddingTop, otherwise, the first Text is displayed over the time in the simulator

Here's the 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 (
      <View style={styles.container}>
        <Text>Calculator</Text>
        <Text>1099 Calculator</Text>
        <Fields />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 50
  },
});

Here's the top of the screen without the padding

And here's how it looks cut off

Answer 1

This is an issue I also had. To fix it just wrap your container with another view without padding but with flex. So like this:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.main}>
        <View style={styles.container}>
          <Text>Calculator</Text>
          <Text>1099 Calculator</Text>
          <Fields />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 50
  },
  main: {
   flex: 1   
  }
});