CODEWITHSUNDEEP
react-native
Alia Hassan
Alia Hassan

Reputation: 137

React Native Touchable Area too large

I'm trying to create a custom button with an image. But the image is originally extremely large so I have to resize it to fit the screen. However I can't seem to resize the TouchableHighlight that is supposed to make it a button.

As you can see in the picture, the black area is touchable around the image, whereas I only want the image to be touchable.

Picture of the issue, touchable area larger than image

So I need to find a way to shrink the touchable to the same size as the image.

This is the code I'm using currently: 

<TouchableHighlight
            style={styles.button}
            onPress={() =>
              navigate('SplashScreen')
            }>
            <Image
              style={styles.button}
              source={require('./Slices/home1/Home102.png')}
            />
          </TouchableHighlight>

touch: {
    // height: 50,
    // width: Dimensions.get('window').width,
    // padding: 0,
    // flex: -1,
  },
  button: {
    // flex: 1,
    // padding:0,
    width: Dimensions.get('window').width,
    resizeMode: 'contain',
  },

I've tried lots of styling options, nothing seems to work.

Upvotes: 2

Views: 3013

Answers (3)

Alia Hassan
Alia Hassan

Reputation: 137

So this isn't the most elegant solution, but I tried the suggestions and they didn't work. So I just figured out the exact aspect ratio of the image and did this:

touch: {
    // height: 50,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width/2.7,
    // padding: 0,
    // flex: -1,
  },
  button: {
    // flex: 1,
    // padding:0,
    // aspectRatio: 3,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width/2.7,
    resizeMode: 'contain',
  },

And that worked :)

Upvotes: 1

Convict Moody
Convict Moody

Reputation: 833

Remove resizeMode from styling, and if the image's height is 1/3 the width as far as I've seen from the image you provided, add aspectRatio={3} to the Image props.

Upvotes: 0

Arbnor
Arbnor

Reputation: 2352

Remove all the stylings for the TouchableHighlight. Also resizeMode style is only for the Image component and not valid for TouchableHighlight. You have to know that everything is touchable whats inside a Touchable component. You don't need to style any touchable highlight.

Upvotes: 0

Related Questions