CODEWITHSUNDEEP
react-native
Rahul Syal
Rahul Syal

Reputation: 625

React-Native Modal hangs up

import React from 'react';
import { View, Text, Modal, Image, Button, StyleSheet } from 'react-native';

const ModalBox = props => {
    let ModalContent = null;
    if (props.selectedPlace) {
        ModalContent = (
            <View>
                <Image source={props.selectedPlace.image} style={styles.image} ></Image>
                <Text style= {styles.text}>{props.selectedPlace.value}</Text>
            </View>
        )
    }
    return (
        <Modal onRequestClose={props.close} visible={props.selectedPlace !== null} animationType="slide">
            <View style={styles.ModalContainer}>
                {ModalContent} 
                <Button title="Delete" color="red" onPress={props.itemDelete}></Button>
                <Button title="Close" onPress={props.close}></Button>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    ModalContainer: {
        marginTop: 10
    },
    image: {
        height:200,
        width: "100%"
    },
    text:{
        textAlign:"center",
        fontWeight:"bold",
        fontSize: 28
    }
})

export default ModalBox;

I have above code for Modal. When i open my modal and then do some changes in my code and then reloads it. Modal hangs up, not able to even click on my buttons and reload the app too. i have to close my app then start again.

Upvotes: 0

Views: 1838

Answers (1)

abadalyan
abadalyan

Reputation: 1235

The issue is not with your code but with React Native Modal itself. It has been there across several releases. The best known workaround is using a library like react-native-navigation that has its own modal implementation.

Upvotes: 1

Related Questions