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 what i got

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.

2 Answers

0
sinan On

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>
    );
}
0
julekgwa On

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>