Search code examples
androidimagereact-nativetouchableopacity

How to make the three images touchable


Please help me make the images touchable so I can call a function onPress

renderSideButtons = (isGift: boolean) => {
    return (
      <View style={{ bottom: 745 }}>     
        <View style={styles.threeButtonsCustom}>
          {isGift && 
          <TouchableOpacity style={styles.threeButtons}
            onPress={this.openAllergenList}>            
            <Image 
              style={[styles.threeButtons, { top: 545 }]} 
              source={require('../../assets/images/icons/gift_fbutton.png')} 
              />
          </TouchableOpacity>}
          <TouchableOpacity style={styles.threeButtons}>
            <Image
              source={require('../../assets/images/icons/star_white.png')}
              style={[styles.threeButtons, { top: 235 }]}
            />
          </TouchableOpacity>
          <TouchableOpacity style={styles.threeButtons}>
            <Image
              source={require('../../assets/images/icons/share_white.png')}
              style={[styles.threeButtons, { top: 195 }]}
            />
          </TouchableOpacity>
        </View>      
      </View>
    );
  };

Here is styles.threeButtons style

threeButtons: {
    position: 'absolute', 
    right: 175, 
    width: 50, 
    resizeMode: 'contain', 
    flexDirection: 'row-reverse'
  },

and the additional styling

threeButtonsCustom:{ 
flex: 1, 
flexDirection: 'row-reverse', 
position: 'absolute', 
marginTop: '20%', 
zIndex:1 }

[1]: https://i.sstatic.net/WrmO3.jpg for example the gift image


Solution

  • A couple of things I'm noticing in your code.

    1. You are opening a conditional section in your code, but don't seem to close it. Look at {isGift && and show me where you are closing your curly brackets.

    2. You only have an onPress defined for your topmost TouchableOpacity. You currently cant click on any of the other buttons because nothing will happen when you do.

    Fix both of these issues, and then let me know where you are.

    Also, for future reference, any styling that you are applying to components you have questions about is good to give in your initial question, and when supplying styling people ask for in comments, should go in an edit to your question so future visitors can easily see it.