diff --git a/.maestro/tests/uikit/button-kit.yaml b/.maestro/tests/uikit/button-kit.yaml
new file mode 100644
index 00000000000..409d12f6153
--- /dev/null
+++ b/.maestro/tests/uikit/button-kit.yaml
@@ -0,0 +1,42 @@
+appId: ${APP_ID}
+name: UIKit Button Kit
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+onFlowComplete:
+  - evalScript: ${output.utils.deleteCreatedUsers()}
+tags:
+  - test-14
+
+---
+- evalScript: ${output.user = output.utils.createUser()}
+- evalScript: ${output.room = output.utils.createRandomRoom(output.user.username, output.user.password)}
+
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.user.username}
+      PASSWORD: ${output.user.password}
+
+- runFlow:
+    file: '../../helpers/navigate-to-room.yaml'
+    env:
+      ROOM: ${output.room.name}
+
+# here send /uikit-test command
+- tapOn:
+    id: message-composer-input
+- inputText:
+    text: '/uikit-test'
+- extendedWaitUntil:
+    visible:
+      id: autocomplete-item-uikit-test
+    timeout: 10000
+- tapOn:
+    id: autocomplete-item-uikit-test
+- tapOn:
+    id: 'message-composer-send'
+- tapOn: Tap Me
+- extendedWaitUntil:
+    visible:
+      text: '.*Button tap received! This reply is private to you*.'
+    timeout: 10000
diff --git a/.sniffler/test-map.json b/.sniffler/test-map.json
index f7575879a9c..714a65fb01b 100644
--- a/.sniffler/test-map.json
+++ b/.sniffler/test-map.json
@@ -341,5 +341,9 @@
 			"app/sagas/room.js",
 			"app/sagas/createChannel.js"
 		]
+	},
+	{
+		"test": ".maestro/tests/uikit/button-kit.yaml",
+		"dependsOn": ["app/containers/UIKit/**"]
 	}
 ]
diff --git a/app/containers/UIKit/Actions.tsx b/app/containers/UIKit/Actions.tsx
index 40f328ce812..aef47b96106 100644
--- a/app/containers/UIKit/Actions.tsx
+++ b/app/containers/UIKit/Actions.tsx
@@ -14,6 +14,8 @@ const styles = StyleSheet.create({
 });
 
 export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
+	'use no memo';
+
 	const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
 
 	const shouldShowMore = elements && elements.length > 5;
diff --git a/app/containers/UIKit/Button.stories.tsx b/app/containers/UIKit/Button.stories.tsx
new file mode 100644
index 00000000000..b4b51d5bb74
--- /dev/null
+++ b/app/containers/UIKit/Button.stories.tsx
@@ -0,0 +1,20 @@
+import UIKitButton from './Button';
+
+const buttonProps = {
+	title: 'Press me!',
+	type: 'primary' as const,
+	onPress: () => {}
+};
+
+export default {
+	title: 'UIKit/Button',
+	component: UIKitButton
+};
+
+export const PrimaryButton = () => <UIKitButton {...buttonProps} />;
+
+export const SecondaryButton = () => <UIKitButton {...buttonProps} type='secondary' />;
+
+export const LoadingButton = () => <UIKitButton loading {...buttonProps} />;
+
+export const CustomStyleButton = () => <UIKitButton {...buttonProps} style={{ marginTop: 16 }} />;
diff --git a/app/containers/UIKit/Button.test.tsx b/app/containers/UIKit/Button.test.tsx
new file mode 100644
index 00000000000..fcb296234d0
--- /dev/null
+++ b/app/containers/UIKit/Button.test.tsx
@@ -0,0 +1,59 @@
+import { fireEvent, render } from '@testing-library/react-native';
+
+import UIKitButton from './Button';
+import * as stories from './Button.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+const onPressMock = jest.fn();
+
+const testProps = {
+	title: 'Press me!',
+	onPress: onPressMock
+};
+
+describe('UIKitButtonTests', () => {
+	beforeEach(() => {
+		onPressMock.mockClear();
+	});
+
+	test('rendered with correct title', async () => {
+		const { findByText } = render(<UIKitButton {...testProps} />);
+		const buttonTitle = await findByText(testProps.title);
+		expect(buttonTitle).toBeTruthy();
+		expect(buttonTitle.props.children).toEqual(testProps.title);
+	});
+
+	test('find button using accessibilityLabel', () => {
+		const { getByLabelText } = render(<UIKitButton {...testProps} />);
+		const button = getByLabelText(testProps.title);
+		expect(button).toBeTruthy();
+	});
+
+	test('renders secondary variant with the same title', async () => {
+		const { findByText } = render(<UIKitButton {...testProps} type='secondary' />);
+		const buttonTitle = await findByText(testProps.title);
+		expect(buttonTitle).toBeTruthy();
+	});
+
+	test('title not visible while loading', () => {
+		const { queryByText } = render(<UIKitButton {...testProps} loading />);
+		const buttonTitle = queryByText(testProps.title);
+		expect(buttonTitle).toBeNull();
+	});
+
+	test('onPress is not triggered while loading', () => {
+		const { getByLabelText } = render(<UIKitButton {...testProps} loading />);
+		const button = getByLabelText(testProps.title);
+		fireEvent.press(button);
+		expect(onPressMock).not.toHaveBeenCalled();
+	});
+
+	test('should trigger onPress function on button press', () => {
+		const { getByLabelText } = render(<UIKitButton {...testProps} />);
+		const button = getByLabelText(testProps.title);
+		fireEvent.press(button);
+		expect(onPressMock).toHaveBeenCalled();
+	});
+});
+
+generateSnapshots(stories);
diff --git a/app/containers/UIKit/Button.tsx b/app/containers/UIKit/Button.tsx
new file mode 100644
index 00000000000..e16a7d13d95
--- /dev/null
+++ b/app/containers/UIKit/Button.tsx
@@ -0,0 +1,50 @@
+import { type FC } from 'react';
+import { Pressable, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import sharedStyles from '../../views/Styles';
+import ActivityIndicator from '../ActivityIndicator';
+
+const styles = StyleSheet.create({
+	container: {
+		borderRadius: 4,
+		paddingVertical: 14,
+		paddingHorizontal: 16,
+		justifyContent: 'center'
+	},
+	text: {
+		...sharedStyles.textMedium,
+		...sharedStyles.textAlignCenter
+	},
+	pressed: {
+		opacity: 0.7
+	}
+});
+
+interface IUIKitButtonProps {
+	title: string;
+	onPress: () => void;
+	type?: 'primary' | 'secondary';
+	loading?: boolean;
+	style?: StyleProp<ViewStyle>;
+}
+
+const UIKitButton: FC<IUIKitButtonProps> = ({ title, onPress, type = 'primary', loading, style }) => {
+	const { colors } = useTheme();
+	const isPrimary = type === 'primary';
+	const backgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundSecondaryDefault;
+	const color = isPrimary ? colors.fontWhite : colors.fontDefault;
+
+	return (
+		<Pressable
+			onPress={onPress}
+			disabled={loading}
+			accessibilityLabel={title}
+			accessibilityRole='button'
+			style={({ pressed }) => [styles.container, { backgroundColor }, style, pressed && styles.pressed]}>
+			{loading ? <ActivityIndicator color={color} style={{ padding: 0 }} /> : <Text style={[styles.text, { color }]}>{title}</Text>}
+		</Pressable>
+	);
+};
+
+export default UIKitButton;
diff --git a/app/containers/UIKit/__snapshots__/Button.test.tsx.snap b/app/containers/UIKit/__snapshots__/Button.test.tsx.snap
new file mode 100644
index 00000000000..30b67aed945
--- /dev/null
+++ b/app/containers/UIKit/__snapshots__/Button.test.tsx.snap
@@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: CustomStyleButton should match snapshot 1`] = `
+<View
+  accessibilityLabel="Press me!"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 14,
+      },
+      {
+        "backgroundColor": "#156FF5",
+      },
+      {
+        "marginTop": 16,
+      },
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "500",
+          "textAlign": "center",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    Press me!
+  </Text>
+</View>
+`;
+
+exports[`Story Snapshots: LoadingButton should match snapshot 1`] = `
+<View
+  accessibilityLabel="Press me!"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 14,
+      },
+      {
+        "backgroundColor": "#156FF5",
+      },
+      undefined,
+      false,
+    ]
+  }
+>
+  <ActivityIndicator
+    color="#FFFFFF"
+    style={
+      {
+        "padding": 0,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`Story Snapshots: PrimaryButton should match snapshot 1`] = `
+<View
+  accessibilityLabel="Press me!"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 14,
+      },
+      {
+        "backgroundColor": "#156FF5",
+      },
+      undefined,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "500",
+          "textAlign": "center",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    Press me!
+  </Text>
+</View>
+`;
+
+exports[`Story Snapshots: SecondaryButton should match snapshot 1`] = `
+<View
+  accessibilityLabel="Press me!"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 14,
+      },
+      {
+        "backgroundColor": "#E4E7EA",
+      },
+      undefined,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "500",
+          "textAlign": "center",
+        },
+        {
+          "color": "#2F343D",
+        },
+      ]
+    }
+  >
+    Press me!
+  </Text>
+</View>
+`;
diff --git a/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap b/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
index a8678d2bfb4..db9fecd1947 100644
--- a/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
@@ -3,63 +3,59 @@
 exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
 [
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Approve"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -69,72 +65,70 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Approve
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -144,72 +138,70 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Deny
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -219,72 +211,70 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Deny
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -294,72 +284,70 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Deny
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      activeOpacity={0.105}
-      collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -369,13 +357,15 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Deny
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
@@ -385,63 +375,59 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -451,13 +437,15 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Deny
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
@@ -467,63 +455,59 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Deny"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -533,13 +517,15 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Deny
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <RNGestureHandlerButton
     accessibilityLabel="Show more"
@@ -5259,63 +5245,59 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
       </Text>
     </View>
   </View>
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="button"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#156FF5",
           "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 16,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "backgroundColor": "#156FF5",
+        },
+        {
+          "marginBottom": 16,
         },
+        false,
       ]
     }
-    underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
       style={
         [
-          {
-            "color": "#FFFFFF",
-            "fontSize": 16,
-          },
           {
             "backgroundColor": "transparent",
             "fontFamily": "Inter",
@@ -5325,13 +5307,15 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
             "fontWeight": "500",
             "textAlign": "center",
           },
-          undefined,
+          {
+            "color": "#FFFFFF",
+          },
         ]
       }
     >
       button
     </Text>
-  </RNGestureHandlerButton>
+  </View>
 </View>
 `;
 
diff --git a/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap b/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
index 491ab67ca3b..9972a5823ea 100644
--- a/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
@@ -1056,63 +1056,59 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
     }
   />,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Primary Action"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1122,72 +1118,70 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Primary Action
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Secondary"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1197,72 +1191,70 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Secondary
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Danger Action"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#E4E7EA",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#E4E7EA",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#2F343D",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1272,72 +1264,70 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#2F343D",
+            },
           ]
         }
       >
         Danger Action
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Button 4"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1347,72 +1337,70 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Button 4
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Button 5"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1422,13 +1410,15 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Button 5
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
@@ -1438,63 +1428,59 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Button 6 - Hidden"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
           },
+          {
+            "marginBottom": 16,
+          },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1504,13 +1490,15 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Button 6 - Hidden
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
@@ -1520,63 +1508,59 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Button 7 - Hidden"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1586,13 +1570,15 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Button 7 - Hidden
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
@@ -1602,63 +1588,59 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Button 8 - Hidden"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -1668,13 +1650,15 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Button 8 - Hidden
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <RNGestureHandlerButton
     accessibilityLabel="Show more"
@@ -3345,63 +3329,59 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Change"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
             "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 16,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "backgroundColor": "#156FF5",
+          },
+          {
+            "marginBottom": 16,
           },
+          false,
         ]
       }
-      underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
         style={
           [
-            {
-              "color": "#FFFFFF",
-              "fontSize": 16,
-            },
             {
               "backgroundColor": "transparent",
               "fontFamily": "Inter",
@@ -3411,13 +3391,15 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
               "fontWeight": "500",
               "textAlign": "center",
             },
-            undefined,
+            {
+              "color": "#FFFFFF",
+            },
           ]
         }
       >
         Change
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index 6af8de8fd3d..d85cd522a0a 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -12,7 +12,7 @@ import {
 } from '@rocket.chat/ui-kit';
 
 import Markdown, { MarkdownPreview } from '../markdown';
-import Button from '../Button';
+import Button from './Button';
 import { FormTextInput } from '../TextInput';
 import { textParser, useBlockContext } from './utils';
 import { themes } from '../../lib/constants/colors';