Search code examples
iosreact-nativescrollviewtouchableopacity

TouchableOpacity onPress doesn't work inside ScrollView


(iOS Only) <TouchableOpacity> doesn't respond if it is inside of a <ScrollView> :

  1. It works properly in the simulator but not in a real device,
  2. keyboardShouldPersistTaps="always" doesn't make any difference
  3. Partial code:<ScrollView style={styles.scrollView}> <TouchableOpacity style={styles.xButton} onPress={() => this._onClose()}>

any suggestions?

--- Code update -----

<ScrollView style={styles.scrollView}>
   <TouchableOpacity style={styles.xButton} onPress={() => this._onClose()}>
    <Image style = {styles.xImg} source = {require('../../images/xbtn.png')}/>
   </TouchableOpacity>
     {this._renderPricing()}
     {this._renderServices()}
 </ScrollView>

and the Styling looks like this:

scrollView:{ 
    width: width,
    height: height,
}, xButton: {
    position: 'absolute',
    zIndex: 1,
    marginTop: '1%',
    marginRight: '3%',
    alignSelf: 'flex-end',

},xImg: {
    resizeMode: 'contain',
    aspectRatio: .6,
    opacity: 0.5,
},

Solution

  • The issue was solved. It was caused because in my separate rendering methods the this._renderPricing etc I was changing the state too many times 👎 therefore the JS thread was occupied so the TouchableOpacity couldn't respond to touch events see RN documentation for a more detailed explanation if needed. Thank you very much for your answers.