react native button does not fit on the screen - reactjs

Question

I have 7 buttons on the screen, but 1 button is half visible, one button does not fit at all.
my code:
render() {
return (
<ScrollView style={styles.container}>
<Header />
<View>
<Text style={styles.headerText}>
LC Teknoloji
</Text>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.Isgr}
title="İş Giriş"
color="#00B0FF"
/>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.Yapilicak}
title="Yapılacaklar"
color="#00B0FF"
/>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.gcms}
title="İş Geçmişi"
color="#00B0FF"
/>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.alnck}
title="Alınıcaklar"
color="#00B0FF"
/>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.ulist}
title="Ürün Listesi"
color="#00B0FF"
/>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.Stok}
title="Stoklar"
color="#00B0FF"
/>
</View>
<View style={styles.btnstyl}>
<Button
onPress={this.Musteri}
title="Müşteriler"
color="#00B0FF"
/>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'grey',
flex: 1,
backgroundColor: "#F5FCFF",
},
headerText: {
fontSize: 20,
textAlign: "center",
margin: 0,
fontWeight: "bold",
top: 45,
},
btnstyl: {
left: 120,
height: 60,
width: 160,
marginBottom: -20,
top: 55,
},
})
enter image description here
I changed the background color or something, when I pull it up, the buttons come up, it doesn't fit on the screen from the place in the picture
Why do you think the screenshot doesn't fit?

Answer 1

In your styles. Remove the marginBottom and top
const styles = {
.....
btnstyl: {
left: 120,
height: 60,
width: 160
},
}
And add height to the View component of the text above the buttons:
<View style={{ height: 100 }}>
<Text style={styles.headerText}>
LC Teknoloji
</Text>
</View>