реагировать на отображение нативной прокрутки в нижней части эмулятора

Question

Я пытаюсь создать вид прокрутки в реагировать на родной.

Я дал полную ширину устройства и высоту для вида прокрутки. ширина работает, но высота не работает, поэтому приложение показывает только в нижней части эмулятора,

Я хотел бы знать, как я могу сделать это отображается в полноэкранном режиме, а также, почему эта ошибка возникает. вот как он загружается в эмуляторе.

мой код реакции на нативе можно найти ниже

import React, { Component } from 'react';
// import Counterpart from './Counterpart'
import contacts from './contacts'
import {
  View,
  Button,
  ScrollView,
  Switch,
  Text,
  Input,
  StyleSheet,
  Dimensions,
} from 'react-native';

const widthfull = Dimensions.get('window').width; //full width
const heightfull = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
  mainwrap: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex:1,
  },
  countfont: {
    fontSize: 120,
  },
  marginfromtop: {
    display: 'flex',
    flex: 1,
    paddingTop: 50,
  },
  ScrollViewstles: {
    display: 'flex',
    flex: 1,
    margin:0,
    padding:0,
    zIndex:2,
    width:widthfull,
    height:heightfull,
    paddingLeft:30
  }
});

export default class App extends Component {
  state = {
    showCounter: true
  }
  toggglecounter = () => {
    this.setState(() => ({showCounter: !this.state.showCounter}))
  }
  render() {
    if (this.state.showCounter) {
      return (
        <View style={styles.mainwrap}>
          <View style={[styles.marginfromtop, styles.countfont]}>
            <Button
              style={{ marginTop: 50 }}
              onPress={this.toggglecounter}
              title="Toggle Contacts"
            />
          </View>
          <View style={styles.mainwrap}>
           <ScrollView style={styles.ScrollViewstles}>
              {contacts.map(c => (
                  <Text key={c.key}>{c.name}</Text>
              ))}
            </ScrollView>
          </View>
        </View>
      );
    } else {
      return (
        <View style={[styles.marginfromtop, styles.countfont]}>
          <Button
            style={{ marginTop: 50 }}
            onPress={this.toggglecounter}
            title="Toggle Contacts"
          />
        </View>
      );
    }
  }
}

Answer 1

удалить flex: 1 из marginfromtop

  marginfromtop: {
    paddingTop: 50,
  },