Модальный не открывается при нажатии на TouchableOpacity - React Native

Question

Я пытаюсь реализовать модальный компонент в этом приложении, и по некоторым причинам я не могу заставить его работать. Я сделал это в другом приложении, и хотя в этом все выглядит так, как должно, все равно не работает, просто не переключается!

Вот мой код (здесь я звоню toogleModal())):

    <TouchableOpacity
                activeOpacity={1}
                style={styles.slideInnerContainer}
                //onPress={() => { alert(`You've clicked '${rest_name}'`); }}
                onPress={() => this.toggleModal(rest_name)}
            >
                <View style={styles.shadow} />
                <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                    {this.image}
                    <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
                </View>
                <View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
                    <View style={{ flexDirection: 'row' }}>
                        {uppercaseTitle}
                        {ratings}
                    </View>


                    <Text
                        style={[styles.subtitle, even ? styles.subtitleEven : {}]}
                        numberOfLines={2}
                    >
                        {rest_location}
                    </Text>

                </View>
            </TouchableOpacity>

Теперь вот toggleModal(), который должен установить состояние и затем вызвать onPressItem():

        toggleModal = (item) => {
        this.setState({ isModalVisible: !this.state.isModalVisible });
        this.onPressItem(item);
    };

и onPressItem ():

    onPressItem = (item) => {
        return (
            <ThemeProvider theme={theme}>
                <Modal animationIn="rubberBand" animationOut={"bounceOut"}

                    isVisible={this.state.isModalVisible}
                    onBackdropPress={() => this.setState({ isModalVisible: false })}
                >
                    <View style={{ flex: 1 }}>
                        {item}
                    </View>
                    <View style={{ flex: 1 }}>
                        <Button title="Hide modal" onPress={this.toggleModal} />
                    </View>
                </Modal>
            </ThemeProvider>
        )
    };

Теперь запомните, этот код взят из другого приложения, в котором модал работает отлично!

Answer 1

измените эту строку onPress = {() => this.toggleModal (rest_name)} на this: onPress = {() => {this.toggleModal (rest_name)}}, вам нужно только поместить вызов функции в скобки

Answer 2

Скорее всего, ваша проблема с опцией щелчка связана с неправильным импортом TouchableOpacity из правильного модуля. Проверьте, импортируете ли вы из act-native :

import { TouchableOpacity } from 'react-native';