0

I'm trying to create custom buttons with assets that I've been sent by the designer. I want to use touchable highlight to create the buttons with the images in them. 

<TouchableHighlight style={styles.touch}
            onPress={() =>
              Alert.alert('You tapped Sign In!')
            }>
    <Image
     style={styles.button}
     source={require('./signin/SignInButton.png')}
    />
</TouchableHighlight>

touch: {
    backgroundColor: 'pink',
  },
button: {
    padding: 10,
    width: Dimensions.get('window').width*0.7,
    resizeMode: 'contain',
    // height: Dimensions.get('window').height/3,
  },

That's the code, the problem is the touchable area is too big, I want it to be just the button area. But I also want the button to be sized dynamically with the screen, for different screen sizes. So is there a way to fix the size of the Touchable based on the image size?

Alia Hassan
  • 137
  • 4
  • 10
  • I think you need to rephrase. It's not very clear (to me) what your desired outcome is. Do you want the touchable area to be exactly the size of the image, no larger? – Chris Geirman Jan 29 '18 at 17:18
  • @ChrisGeirman Hey Chris, yeah exactly. I want the touchable area to be only the area that the image covers. At the moment the image is touchable, but so is the area outside it that's within the touchable component. – Alia Hassan Jan 29 '18 at 19:38
  • Have you played with the hitSlop? Check this out https://stackoverflow.com/q/38955803/1349269 – Chris Geirman Jan 29 '18 at 20:04
  • That does the opposite of what I want, it makes the touchable area larger. I want to make it smaller – Alia Hassan Feb 01 '18 at 17:10
  • There's two things you can learn from the answer I linked to. First, padding is included in the hit target. So try removing the padding and that will probably do the trick. Second, have you thought to try negative numbers for hitSlop? – Chris Geirman Feb 01 '18 at 21:39

0 Answers0