Touchable components doesn't work when nested.

[Tsudhishnair]

When the Touachable components are nested, the click on the component always triggers the onPress method of the outer Touchable component.

[sangameshsomawar]

@Tsudhishnair: This is a known issue, can you try Card component as outer component ?

[Tsudhishnair]

@sangameshsomawar Since Touchable components from neeto-ui-rn can't nested. We can either mark the same in the docs so that in case of nested requirement we will be directly using the Touchable component from RN or like we discussed lets add a prop based on with we can switch between the ripple and touchable component in neeto-ui-rn. This would be the simplest approach. The other option is a create a custom component using gesture handler then adding animation to it.

[sangameshsomawar]

@Tsudhishnair: Please check the linked pr and loom video, let me know your thoughts. https://user-images.githubusercontent.com/93119254/169659001-519b680a-8403-4544-adfe-d6871a3ff876.mp4

[Tsudhishnair]

@sangameshsomawar The approach is perfect but since pressable component from RN only provides ripple effect in android, I would say we can go with Touchable Opacity and ripple component only provides the hitRect prop apart from props from touchable component and as far as I know we don't have the requirement to use it any of the project , also providing user feedback is the most important thing when they press somewhere. So we can use Touchable opacity component.

[sangameshsomawar]

@Tsudhishnair: Replaced Pressable with TouchableOpacity. Please review and merge.

https://user-images.githubusercontent.com/93119254/169795977-fd8f9b36-60ab-4392-83e1-4498034edce6.mov

[sangameshsomawar]

@Tsudhishnair If onPress is not available then the opacity effect will not be shown https://user-images.githubusercontent.com/93119254/169798044-9225130e-03d1-4ff2-8615-615467584106.mp4