child component overflow from parent component - react-native

Question

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';
export default class AlertModal extends Component {
constructor(props){
super(props)
this.state={
check:'234',
primaryColor:'#dcdcdc',
secondaryColor:'#ff1493',
fontFamily:'sans-serif',
one:'Alert',
two:'sample text'
}
}
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View
style={{
top:'39%',
backgroundColor:this.state.primaryColor,
height:'25%',
width:'70%',
alignSelf:'center'
}}>
<Text
style={{
fontWeight:'500',
fontFamily:this.state.fontFamily,
alignSelf:'center',
fontSize:30,
color:this.state.secondaryColor
}}>
{this.state.one}
</Text>
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
top:'3%'
}}
/>
<Text
style={{
fontFamily:this.state.fontFamily,
alignSelf:'center',
color:this.state.secondaryColor,
top:'100%'
}}>
{this.state.two}
</Text>
</View>
</Modal>
);
}
}
I am trying to create a new Modal, when I try position last text element 'sample two' in modal component within View, I am failing. 'sample two' is displayed outside of view. I will post the screenshot of what I am getting
but I the need the sample text to be within the end of the box, I don't know why it is displayed outside of the box.

Answer 1

Just wrap it inside another view as shown below.
render() {
return (
<Modal
animationType="slide"
transparent={false}
visible={!this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View
style={{
top: '39%',
backgroundColor: this.state.primaryColor,
height: '25%',
width: '70%',
alignSelf: 'center',
borderWidth: 1,
borderColor: 'red',
}}>
<Text
style={{
fontWeight: '500',
fontFamily: this.state.fontFamily,
alignSelf: 'center',
fontSize: 30,
color: this.state.secondaryColor,
}}>
{this.state.one}
</Text>
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
top: '3%',
}}
/>
<View>
<Text
style={{
fontFamily: this.state.fontFamily,
alignSelf: 'center',
color: this.state.secondaryColor,
top: '100%',
}}>
{this.state.two}
</Text>
</View>
</View>
</Modal>
);
}

Answer 2

top: '100%', is moving the Text out, change it to 50%
<Text
style={{
fontFamily: this.state.fontFamily,
alignSelf: 'center',
color: this.state.secondaryColor,
top: '50%',
}}>
{this.state.two}
</Text>