CODEWITHSUNDEEP
javascriptreact-nativereact-native-ios
paoliff
paoliff

Reputation: 157

react native - screen cut off at bottom

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 enter image description here

And here's how it looks cut off enter image description here

Upvotes: 8

Views: 22384

Answers (2)

lucas emanuel himelfarb
lucas emanuel himelfarb

Reputation: 772

I was facing the same problem, it turned out to be the padding that I added to my ScrollView. Maybe it is not the solution, it is simply to discard ideas..

Upvotes: 1

ystal
ystal

Reputation: 688

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   
  }
});

Upvotes: 19

Related Questions