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
A couple of things I'm noticing in your code.
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.
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.