social-app icon indicating copy to clipboard operation
social-app copied to clipboard

`TouchableNoFeedback` on link embeds looks/feels odd on all platforms

Open llllvvuu opened this issue 1 year ago • 2 comments

Describe the bug It's particularly strange on desktop as it also removes the <a> element (which on web provides ctrl+click, URL preview in bottom left corner, etc) and thus the cursor: pointer. But it feels weird on mobile as well. I actually thought it was an image and didn't realize I could click it.

To Reproduce

Steps to reproduce the behavior:

  1. Sample post: https://bsky.app/profile/bnewbold.bsky.team/post/3jw2p3xhdks2j (in this particular example you can also see with the white image that a divider is missing)

Expected behavior

Something to happen when I press (Twitter mobile uses an effect like TouchableHighlight - our Links use TouchableOpacity which looks fine as well)

Screenshots

Desktop: https://github.com/bluesky-social/social-app/assets/5601392/75680741-4500-4cfb-9036-4603e9d005a6

Android: https://github.com/bluesky-social/social-app/assets/5601392/bd190b6c-2b30-438b-8dd3-cf4040496fb6

Details

  • Platform: all platforms
  • App version: main 15c1b6e

Additional context

This draft PR demonstrates the difference with the proposed behavior: https://github.com/bluesky-social/social-app/pull/750

It's ready to go if desired.

llllvvuu avatar May 19 '23 09:05 llllvvuu

The reason it's used is because of an issue with scrolling where visual feedback triggers due to the scroll touch. I'm told there's another solution to that which I just need the time to invest in.

pfrazee avatar May 19 '23 16:05 pfrazee

visual feedback triggers due to the scroll touch

Seems like different apps behave differently here, Discord removes the feedback entirely, Twitter/IG/FB keep it on. It's cleaner with delayPressIn={130} which is what React Native uses by default in most of their components (not sure why not in TouchableOpacity). This will ensure that if you're scrolling at a reasonable speed, you won't get the feedback flicker. Demo updated: #750

If we do end up keeping no feedback, we can add cursor: pointer to make it look better on web.

If we want a darkening effect instead of a lightening effect, that's slightly more work.

llllvvuu avatar May 19 '23 20:05 llllvvuu

Thanks again for opening this! I think we've solved core intent of this issue and the PR, and we have more link/pressable improvements on the todo list, so gonna close for now. If you feel differently please let us know! 🙂

estrattonbailey avatar Aug 25 '23 15:08 estrattonbailey