feat: use Pressable in TouchableRipple

[szymonrybczak]

This PR replaces Touchables with Pressable within TouchableRipple.

Related issues:

• Use Pressable component within TouchableRipple #3396

Summary

Test plan

[callstack-bot]

Hey @szymonrybczak, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[hurali97]

Thanks for raising this PR, much appreciated 🌟.

There are a couple changes that can be addressed.

[hurali97]

@szymonrybczak Additionally, there are some regressions that causes instability on web. I am attaching the screenshots of the relevant components that are affected by the PR changes. If you can take a look at these, it will be so helpful.

Platform(web):

• The back icon button mis aligns on web.

Bottom-Navigation

• layout of bottom-navigation shrinks on web.

Buttons

• Ripple doesn't respect the border-radius.

Icon-Buttons

• Doesn't center the icon correctly, and ripple only happens on icon, not the whole component.

Radio-Button-Group

• Ripple is not round, as compared to the baseline.

SearchBar

• Related to Icon Buttons.

Segmented-Buttons

• Ripple doesn't respect the border-radius.

Text-Input

• Related to Icon Buttons.

Toggle-Buttons

• Ripple doesn't fill the container, it only fills the inner view.

Touchable-Ripple-Difference

Touchable Ripple New:
Touchable Ripple Baseline:

[szymonrybczak]

@hurali97 Yes, sure. This was really the problem, I fixed it! 😅

[lukewalczak]

@szymonrybczak thanks for adjusting the comments and fixing the issue! @hurali97 could you please give another round of testing and checking the PR? 👌🏽

[hurali97]

@szymonrybczak Thanks for incorporating them real quick. 🌟

@lukewalczak I'll re-run the tests and re-review the PR tomorrow morning.

[lukewalczak]

Great work 🎉 Thanks @szymonrybczak for your effort and @hurali97 for reviewing and testing the PR!