1

By the title I mean that when I click on the animation nothing happens. But when I click slightly to the left of it, it works.

Here is my code:

<View style={{flex: 1, alignItems:'center',  right: 0, left: 0, flexDirection:'row', position: 'absolute', alignSelf:'center', top: 10}}>
            {this.state.queryid.includes(item.id)  ?
              <TouchableOpacity
              ref="unlikeButton"
              onPress={() => this.anim_unlike(item)}
               style={{ zIndex: 1, }}
               hitSlop={{ top: 20, left: 20, bottom: 20, right: 100 }}>
               <Animation
               progress={item.unprogress}
               source={require('../Animations/favourite_app_icon.json')}
               style={{ height: 50, width: 50, alignSelf:'center', marginLeft: 0, left: 5}}

               resizeMode={`contain`}

               />
               </TouchableOpacity>
             :
             <TouchableOpacity
             ref="likeButton"
             onPress={() => this.anim_like(item)}
              style={{zIndex: 1, }}
              hitSlop={{ top: 20, left: 20, bottom: 20, right: 100 }}>
              <Animation
              progress={item.progress}
              source={require('../Animations/favourite_app_icon.json')}
              style={{ height: 50, width: 50, alignSelf:'center', marginLeft: 0, left: 5}}
              resizeMode={`contain`}

              />
              </TouchableOpacity>
            }
            <Text style={{alignSelf:'center', color: 'black', fontFamily: Fonts.QuoFont, fontSize: 15}}>{item.likes}</Text>
            </View>

Where you see hitSlop that is where I try to widen the touch box, but that's not working at all. And when I take away position: absolute from the View the touchable area correctly functions in it's proper area, in the star. I need it absolute so that the rest of my elements can stay in the right place. It would be great if there was something that can make view behave like absolute where it would not interfere with other elements.

Laney Williams
  • 573
  • 3
  • 13
  • 34
  • 1
    did you solve the problem,I also face the same – SaravInfern Dec 27 '18 at 15:41
  • Yes, It has something to do with zIndex for me on the iOS – Laney Williams Dec 29 '18 at 16:25
  • 1
    Post the solution it will be helpful to others – SaravInfern Dec 29 '18 at 16:28
  • Does this answer your question? [Touchablehighlight not clickable if position absolute](https://stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute) – MikeL Nov 03 '20 at 00:08
  • I believe it is actually the same as other questions where it is stated that the view is not clickable (such as [this](https://stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute)), but only part of the view is hidden behind the other views in the hierarchy. – MikeL Nov 03 '20 at 00:10

0 Answers0