feat: extend Button props by adding onPressIn and onPressOut (#3277)

src/components/Button/Button.tsx

@@ -85,6 +85,16 @@ type Props = React.ComponentProps<typeof Surface> & {
    * Function to execute on press.
    */
   onPress?: () => void;
+  /**
+   * @supported Available in v5.x
+   * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
+   */
+  onPressIn?: () => void;
+  /**
+   * @supported Available in v5.x
+   * Function to execute as soon as the touch is released even before onPress.
+   */
+  onPressOut?: () => void;
   /**
    * Function to execute on long press.
    */
@@ -162,6 +172,8 @@ const Button = ({
   accessibilityLabel,
   accessibilityHint,
   onPress,
+  onPressIn,
+  onPressOut,
   onLongPress,
   style,
   theme,
@@ -194,7 +206,8 @@ const Button = ({
   }, [isElevationEntitled, elevation, initialElevation]);
 
   const handlePressIn = () => {
-    if (isMode('contained')) {
+    onPressIn?.();
+    if (isV3 ? isMode('elevated') : isMode('contained')) {
       const { scale } = animation;
       Animated.timing(elevation, {
         toValue: activeElevation,
@@ -205,7 +218,8 @@ const Button = ({
   };
 
   const handlePressOut = () => {
-    if (isMode('contained')) {
+    onPressOut?.();
+    if (isV3 ? isMode('elevated') : isMode('contained')) {
       const { scale } = animation;
       Animated.timing(elevation, {
         toValue: initialElevation,

src/components/__tests__/Button.test.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
+import { fireEvent, render } from 'react-native-testing-library';
 import color from 'color';
 import Button from '../Button/Button.tsx';
 import { pink500, black, white } from '../../styles/themes/v2/colors';
@@ -125,6 +126,26 @@ it('renders button with an accessibility hint', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('should execute onPressIn', () => {
+  const onPressInMock = jest.fn();
+
+  const { getByTestId } = render(
+    <Button onPressIn={onPressInMock} testID="button" />
+  );
+  fireEvent(getByTestId('button'), 'onPressIn');
+  expect(onPressInMock).toHaveBeenCalledTimes(1);
+});
+
+it('should execute onPressOut', () => {
+  const onPressOutMock = jest.fn();
+
+  const { getByTestId } = render(
+    <Button onPressOut={onPressOutMock} testID="button" />
+  );
+  fireEvent(getByTestId('button'), 'onPressOut');
+  expect(onPressOutMock).toHaveBeenCalledTimes(1);
+});
+
 describe('getButtonColors - background color', () => {
   const customButtonColor = '#111111';