'dismiss react native modal cause ui freeze

My issue is about the react native modal. After the modal opens up and presses the button, it closes and the UI becomes unresponsive. Here's my code of the modal. Any help is appreciated.

<Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}
                >
                    <View style={styles.modalContainer}>
                        <TouchableOpacity style={{ height: '65%' }} onPressOut={() => setModalVisible(false)} >
                        </TouchableOpacity>
                        <View style={styles.centeredView}>
                            <View style={styles.modalView}>
                                <Picker
                                    style={styles.picker}
                                    selectedValue={timeRange}
                                    onValueChange={(itemValue, itemIndex) => setTimeRange(itemValue)}
                                >
                                    <Picker.Item label="15 minutes" value={15} />
                                    <Picker.Item label="30 minutes" value={30} />
                                    <Picker.Item label="45 minutes" value={45} />
                                    <Picker.Item label="60 minutes" value={60} />
                                </Picker>

                                <View style={styles.btn}>
                                    <Button
                                        text='Select'
                                        width='20%'
                                        height='100%'
                                        font={18}
                                        color='#3A97ED'
                                        onPress={() => setModalVisible(false)}
                                    />
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>
react-nativemodal-dialog


Solution 1:[1]

I had a similar issue because I used onPress instead of onPressOut to close the Modal. Maybe replace Button with Pressable and use onPressOut, just like your TouchableOpacity element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rogerdean

Related Questions