0

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
DEV
  • 65
  • 9
  • It seems like a normal codebase. But, how can you check the `console` to confirm `onPress` did not work? – Dinh Huynh Apr 19 '21 at 02:58
  • I tried to check the condole first to avoid future errors and the console didn't work with me, is it a good idea to do that or I shouldn't check the console first? – DEV Apr 19 '21 at 03:17
  • for me, some time it happens when i select auto import after starting to type when my code editor suggest, and it accidently imported from other place instead of 'react-native', can you please check if TouchableOpacity is imported from 'react-native' and not from other place, in my case it was imported from 'react-native-gesture-....something' – Nikhil bhatia Apr 19 '21 at 08:25
  • yes I checked and it's imported from 'react-native', should i change it to 'react-native-gesture'? @Nikhilbhatia – DEV Apr 19 '21 at 18:14

1 Answers1

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.

Martin Dimitrov
  • 375
  • 4
  • 9