fix: UIKit buttons not responding on some Android devices

.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

.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/**"]
 	}
 ]

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;

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 }} />;

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);

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;