CODEWITHSUNDEEP
reactjsreact-nativetouchableopacity
lwisi
lwisi

Reputation: 303

Adding touchableOpacity to an Image component

Simple question: How do I add a TouchableOpacity component to an image? This is the way I'm doing it:

<View style = { styles.categoryContainer }>
                        <TouchableOpacity
                            onPress = {() => navigation.navigate('xScreen')}
                        >
                            <Image 
                                style = {styles.categoriesImages}
                                source = {require('./img/xImage.png')}
                            />
                        </TouchableOpacity>

These are the styles that are mapped to the components:

categoryContainer: {
        flex: 1,
        flexDirection: 'column',
        margin: 10,
        
    },
    categoriesImages: {
       display: 'flex',
       height: 70,
       width: 70
    },

When I run the app on expo, the image simply disappears. Removing the TouchableOpacity component brings the image back.

Maybe someone can provide an explanation as to why this doesn't work? Thanks a lot!

Upvotes: 1

Views: 1417

Answers (1)

Lu&#237;s Mestre
Lu&#237;s Mestre

Reputation: 1938

I'm just assuming this is the problem, but without the styles it's a bit hard to really know.

Basically your Image must have a width and height in percentage, and you wrapped the image with TouchableOpacity, which doesn't have "size". So you have two ways to solve your issue:

  • You map a style to TouchableOpacity with the width and height of your styles.categoriesImages and the Image will simply have 100% on both width and height
  • Define a width and height for the image that's not a percentage but an actual value, and the TouchableOpacity will simply adapt to it's content size

Upvotes: 1

Related Questions