Add rounded Pressable example in PressableExample (#58938)

Summary:

Add a new RNTester example in PressableExample that reproduces the issue where ripple effects don't clip to the Pressable's border radius.

Changelog: [Internal]

Reviewed By: vzaidman

Differential Revision: D123816852

Author: jasozh

packages/rn-tester/js/examples/Pressable/PressableExample.js

@@ -316,6 +316,23 @@ function PressableDisabled() {
   );
 }
 
+function RoundedPressableExample() {
+  return (
+    <View>
+      <Pressable
+        android_ripple={{color: 'red', borderless: false}}
+        style={styles.roundedPressable}>
+        <Text style={{alignSelf: 'center'}}>Background Ripple</Text>
+      </Pressable>
+      <Pressable
+        android_ripple={{color: 'red', borderless: false, foreground: true}}
+        style={styles.roundedPressable}>
+        <Text style={{alignSelf: 'center'}}>Foreground Ripple</Text>
+      </Pressable>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   row: {
     justifyContent: 'center',
@@ -401,6 +418,12 @@ const styles = StyleSheet.create({
     height: 100,
     width: 100,
   },
+  roundedPressable: {
+    backgroundColor: '#eee',
+    borderRadius: 100,
+    padding: 16,
+    marginTop: 10,
+  },
 });
 
 const examples = [
@@ -718,6 +741,15 @@ const examples = [
       );
     },
   },
+  {
+    title: 'Rounded Pressable with Ripple',
+    description:
+      'Ripple should clip to the border radius of the Pressable' as string,
+    platform: 'android',
+    render: function (): React.Node {
+      return <RoundedPressableExample />;
+    },
+  },
   ...PressableExampleFbInternal.examples,
 ];