onPress event is not working in react native expo

Question

I've been trying to add onPress event on buttons in my page but it's not responding and since I'm new to react native I couldn't figure it out.

This is the code of the page I want to put onPress event in:

const HomeMenu = () => {
    return (
        <View style={{ flex: 1 }}>
            <View style={styles.container}>

                <Tile
                    imageSrc={require('../../assets/images/homeMenu.jpg')}
                    title="Which property are you looking for?"
                    contentContainerStyle={{ height: '100%', backgroundColor: '#21534A', alignSelf: 'stretch', flex: 0.5 }}
                    titleStyle={styles.title}

                    containerStyle={{ height: '45%' }}

                >

                    <View style={styles.categoryContainer}>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/house.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Residential</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/store.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Commercial</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.categoryContainer}>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/real-estate.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>All</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.categoryContainer}>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/industry.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Industrial</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.categoryBtn} onPress={() => console.log('Pressed...')}>
                            <View style={styles.categoryIcon}>
                                <Image source={require('../../assets/icons/region.png')} style={styles.categoryImg}></Image>
                            </View>
                            <Text style={styles.categoryTitle}>Lands</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.categoryContainer}>
                        <TouchableOpacity onPress={() => console.log('Pressed...')}>
                            <Text style={{ color: "#FFFFFF", alignItems: 'center', textDecorationLine: 'underline' }}> Looking for an agency?</Text>
                        </TouchableOpacity>

                    </View>

                </Tile>
            </View>
        </View>
    );
};

I'm thinking that the reason why it's not responding to onPress event is because of the design but I'm not sure. If you needed any more information to post to help you solve my issue let me know please.

Answer 1

The problems comes form Tiles component. Tiles like Cards, are a convenient way to display related content about a single subject. You can't have pressable components inside Tile. Try to use Card component from same lib.