react native scrollview showing up on down part of the emulator - reactjs

Question

I am trying to create a scroll view in react native.
I gave full-device-width and height for the scroll-view.
width is working but height is not working so the app is showing only on down part of the emulator,
I would like to know how can I make this showing up in fullscreen and also why this error occurring.
this is how it's loading on emulator.
you can find my react-native code below
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

remove flex: 1 from marginfromtop
marginfromtop: {
paddingTop: 50,
},