TouchableRipple: use React Native Web styles and add support for hover

[RichardLindhout]

trafficstars

Summary

Fixes: https://github.com/callstack/react-native-paper/issues/2142

First step to supported focused, hover states on some platforms by using the new Pressable component. And rewrite of the web component to use compiled styles instead of inline styles https://reactnative.dev/blog/#pressable

If this PR get's merged I can add focus/hover support to the Button and Icon component and other components.

Further, as React Native has grown and our bar for high-quality applications has gone up, these components haven't grown with it. React Native now supports platforms like Web, Desktop, and TV, but support for additional input modalities has been lacking. React Native needs to support high-quality interaction experiences on all platforms.

  <TouchableRipple
    onPress={() => setPressed((prev) => prev + 1)}
    style={({ hovered }) => [
      styles.touchableInner,
      hovered && styles.touchableInnerHover
    ]}
  >
    {({ hovered }) => (
      <Text style={styles.touchableText} selectable={false}>
        times pressed {pressed} {hovered ? "yes" : "no"}
      </Text>
    )}
  </TouchableRipple>

Test plan

Test on iOS device: Done Test on Android device: Done Test on Safari, Firefox, Edge, Chrome: Done

Demo video of Android/iOS running the demo https://www.youtube.com/watch?v=KEbRU1DDSLA

Blocks

None

[RichardLindhout]

@brentvatne When is Expo 39 shipping and does it include the Pressable component? (React Native >=0.63.0)

[RichardLindhout]

Ok, I think expo supports it I'll see if I can upgrade expo in react-native-paper

[brentvatne]

hey @RichardLindhout - yeah we shipped SDK 39 with react-native 0.63.2 about a month ago, so hopefully you're not blocked on that here anymore!

[RichardLindhout]

I had to refactor to ColorValue from react-native to fix typescript errors as a result the color package of npm gave errors. That's why I did the 'as string' for now.

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46864

[RichardLindhout]

Thanks @brentvatne! I just thought react-native-paper was on the latest version but it wasn't yet ;). Should have looked it up :-)

[callstack-bot]

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

[RichardLindhout]

I really don't get why the unit tests won't go through but after removing:

afterEach(() => jest.resetModules());

in the RadioButton.test.js it works. Somehow the resetModules() copies the React instance or something like that which breaks the hooks rule?

[RichardLindhout]

@Trancever it would be super cool if this could get merged, we could change a lot of component afterwards to support hover/presses/focused on multiple platforms!

[RichardLindhout]

@unikvozm how did you get the expo QR code in you PR?

[Trancever]

@RichardLindhout Thanks for the PR! I will try to check it this week. And regarding the QR code, it only works if you are a core contributor and have write access to the repo.

[RichardLindhout]

Made the youtube video public as it was only visible for me

[RichardLindhout]

@Trancever I have some issues with the current TouchableRipple passing some props to it, would this PR be accepted after fixing any feedback or could I better fix this issue in the meantime?

Background information of issue: https://github.com/necolas/react-native-web/issues/1835

[github-actions[bot]]

Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.

[raajnadar]

@RichardLindhout is this PR live?

[RichardLindhout]

@raajnadar Hey I have too much going on right know to work on this, but I still like it but I think it needs heavy testing