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

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 https://github.com/necolas/react-native-web/issues/1708

[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.

[github-actions[bot]]

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.