Replace all touchable elements with Pressable to support hover/focus in the future

[RichardLindhout]

Is your feature request related to a problem? Please describe.

I would like it to make the Pressable status part of react-native-paper since it's an important part of moving forward and following the specifications on the web (focus/hover) and provide more and better styling when an elements is focused / pressed.

https://material.io/design/interaction/states.html#hover
https://material.io/design/interaction/states.html#focus

e.g.

<Pressable
        onPress={() => {
          setTimesPressed((current) => current + 1);
        }}
        style={({ pressed, hovered, focused }) => [
          {
            backgroundColor: pressed
              ? 'rgb(210, 230, 255)'
              : 'white'
          },
          styles.wrapperCustom
        ]}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Press Me'}
          </Text>
        )}
      </Pressable>

Describe a solution you'd like

To address these problems, we are shipping a new core component called Pressable. This component can be used to detect various types of interactions. The API was designed to provide direct access to the current state of interaction without having to maintain state manually in a parent component. It was also designed to enable platforms to extend it's capabilities to include hover, blur, focus, and more. We expect that most people will build and share components utilizing Pressable under the hood instead of relying on the default experience of something like TouchableOpacity.

https://reactnative.dev/blog/2020/07/06/version-0.63

Additional context
We will need to have support in React Native Web to support focus/hover which is where is also an issue about this subject
necolas/react-native-web#1708

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[RichardLindhout]

@Trancever Are you open for this change?

[weirdzardz]

@RichardLindhout nice job making react-native-web move forward with this on the Pressables.

I would also love to see react-native-paper integrate this feature as well.

Note that it is both useful for cross-platform react native apps for web, but also for supporting mouse better on mobile.

[RichardLindhout]

Thanks! It would also integrate better with React Native on desktop Mac/Windows if they add the Pressable with hover. I see that Necolas pushed a lot of changes for hover support so I think it will be available in the next major release of react-native-web <3

[RichardLindhout]

Hover support is now available in React Native Web 0.14.0!

I'll look if I have time in the future to rewrite the TouchableRipple component to use the Pressable component so we'll have hover support there and in can add hover support to other components after that PR is merged

[RichardLindhout]

I'm working on a PR to add support for hover styles to the TouchableRipple!

[RichardLindhout]

#2281

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.