From 6384d60efc455f848e78c290d6e562befc47d112 Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <77742477+try-catch-stack@users.noreply.github.com>
Date: Fri, 20 May 2022 22:07:57 +0530
Subject: [PATCH] Chore: Migrate containers/Button to Typescript and Hooks
 (#4071)

---
 app/containers/Button/Button.stories.js       |  28 +++++
 app/containers/Button/Button.test.tsx         |  71 +++++++++++
 .../__snapshots__/Button.stories.storyshot    |  11 ++
 app/containers/Button/index.tsx               | 113 +++++++++---------
 app/containers/LoginServices.tsx              |   1 -
 app/containers/TwoFactor/index.tsx            |  10 +-
 app/containers/UIKit/Actions.tsx              |   4 +-
 app/containers/UIKit/DatePicker.tsx           |   4 +-
 app/containers/UIKit/MultiSelect/index.tsx    |   2 +-
 app/containers/UIKit/index.tsx                |   2 -
 app/containers/message/Attachments.tsx        |   2 +-
 app/views/CannedResponseDetail.tsx            |   8 +-
 .../CannedResponseItem.tsx                    |   1 -
 .../CannedResponseItem.stories.storyshot      |   2 +-
 app/views/E2EEncryptionSecurityView.tsx       |   2 -
 app/views/E2EEnterYourPasswordView.tsx        |   1 -
 app/views/E2ESaveYourPasswordView.tsx         |   3 -
 app/views/ForgotPasswordView.tsx              |   1 -
 app/views/InviteUsersEditView/index.tsx       |   3 +-
 app/views/InviteUsersView/index.tsx           |   4 +-
 app/views/LivechatEditView.tsx                |   2 +-
 app/views/LoginView.tsx                       |   2 -
 app/views/NewServerView/index.tsx             |   2 -
 app/views/ProfileView/index.tsx               |   2 -
 app/views/RegisterView.tsx                    |   1 -
 app/views/RoomView/JoinCode.tsx               |   2 -
 app/views/RoomsListView/ServerDropdown.tsx    |   1 -
 app/views/SendEmailConfirmationView.tsx       |   1 -
 app/views/SetUsernameView.tsx                 |   1 -
 app/views/WorkspaceView/index.tsx             |   3 +-
 .../stories/__snapshots__/Message.storyshot   |   2 +-
 storybook/stories/index.js                    |   1 +
 32 files changed, 178 insertions(+), 115 deletions(-)
 create mode 100644 app/containers/Button/Button.stories.js
 create mode 100644 app/containers/Button/Button.test.tsx
 create mode 100644 app/containers/Button/__snapshots__/Button.stories.storyshot

diff --git a/app/containers/Button/Button.stories.js b/app/containers/Button/Button.stories.js
new file mode 100644
index 000000000..165c8b49b
--- /dev/null
+++ b/app/containers/Button/Button.stories.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+
+import Button from '.';
+
+const buttonProps = {
+	title: 'Press me!',
+	type: 'primary',
+	onPress: () => {},
+	testID: 'testButton',
+	fontSize: 16,
+	style: {
+		padding: 10,
+		justifyContent: 'center'
+	}
+};
+
+const stories = storiesOf('Button', module);
+
+stories.add('primary button', () => <Button {...buttonProps} />);
+
+stories.add('secondary button', () => <Button {...buttonProps} type='secondary' />);
+
+stories.add('loading button', () => <Button loading {...buttonProps} />);
+
+stories.add('disabled button', () => <Button disabled {...buttonProps} />);
+
+stories.add('disabled loading button', () => <Button disabled loading {...buttonProps} />);
diff --git a/app/containers/Button/Button.test.tsx b/app/containers/Button/Button.test.tsx
new file mode 100644
index 000000000..adbe1fb11
--- /dev/null
+++ b/app/containers/Button/Button.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import Button from '.';
+
+const onPressMock = jest.fn();
+
+const testProps = {
+	title: 'Press me!',
+	type: 'primary',
+	onPress: onPressMock,
+	testID: 'testButton',
+	initialText: 'Initial text',
+	textAfterPress: 'Button pressed!'
+};
+
+const TestButton = ({ loading = false, disabled = false }) => (
+	<View>
+		<Button
+			title={testProps.title}
+			type={testProps.title}
+			onPress={testProps.onPress}
+			testID={testProps.testID}
+			accessibilityLabel={testProps.title}
+			disabled={disabled}
+			loading={loading}
+		/>
+	</View>
+);
+
+describe('ButtonTests', () => {
+	test('rendered', async () => {
+		const { findByTestId } = render(<TestButton />);
+		const Button = await findByTestId(testProps.testID);
+		expect(Button).toBeTruthy();
+	});
+
+	test('rendered with correct title', async () => {
+		const { findByText } = render(<TestButton />);
+		const ButtonTitle = await findByText(testProps.title);
+		expect(ButtonTitle).toBeTruthy();
+		expect(ButtonTitle.props.children).toEqual(testProps.title);
+	});
+
+	test('find button using accessibilityLabel', async () => {
+		const { findByA11yLabel } = render(<TestButton />);
+		const Button = await findByA11yLabel(testProps.title);
+		expect(Button).toBeTruthy();
+	});
+
+	test('title not visible while loading', async () => {
+		const { queryByText } = render(<TestButton loading={true} />);
+		const ButtonTitle = await queryByText(testProps.title);
+		expect(ButtonTitle).toBeNull();
+	});
+
+	test('should not trigger onPress on disabled button', async () => {
+		const { findByTestId } = render(<TestButton disabled={true} />);
+		const Button = await findByTestId(testProps.testID);
+		fireEvent.press(Button);
+		expect(onPressMock).not.toHaveBeenCalled();
+	});
+
+	test('should trigger onPress function on button press', async () => {
+		const { findByTestId } = render(<TestButton />);
+		const Button = await findByTestId(testProps.testID);
+		fireEvent.press(Button);
+		expect(onPressMock).toHaveBeenCalled();
+	});
+});
diff --git a/app/containers/Button/__snapshots__/Button.stories.storyshot b/app/containers/Button/__snapshots__/Button.stories.storyshot
new file mode 100644
index 000000000..dfeacc879
--- /dev/null
+++ b/app/containers/Button/__snapshots__/Button.stories.storyshot
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button disabled button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
+
+exports[`Storyshots Button disabled loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3,\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#ffffff\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null]},\\"children\\":null}]}"`;
+
+exports[`Storyshots Button loading button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"animating\\":true,\\"color\\":\\"#ffffff\\",\\"hidesWhenStopped\\":true,\\"size\\":\\"small\\",\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null]},\\"children\\":null}]}"`;
+
+exports[`Storyshots Button primary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
+
+exports[`Storyshots Button secondary button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Press me!\\"},\\"children\\":[\\"Press me!\\"]}]}"`;
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index e30b43859..de53afd6e 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -1,25 +1,20 @@
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+import Touchable, { PlatformTouchableProps } from 'react-native-platform-touchable';
 
-import { TSupportedThemes } from '../../theme';
-import { themes } from '../../lib/constants';
+import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 
-interface IButtonProps {
+interface IButtonProps extends PlatformTouchableProps {
 	title: string;
-	type: string;
-	onPress(): void;
-	disabled: boolean;
-	backgroundColor: string;
-	loading: boolean;
-	theme: TSupportedThemes;
-	color: string;
-	fontSize: any;
-	style: any;
-	styleText?: any;
-	testID: string;
+	onPress: () => void;
+	type?: string;
+	backgroundColor?: string;
+	loading?: boolean;
+	color?: string;
+	fontSize?: number;
+	styleText?: StyleProp<TextStyle>[];
 }
 
 const styles = StyleSheet.create({
@@ -31,7 +26,6 @@ const styles = StyleSheet.create({
 		marginBottom: 12
 	},
 	text: {
-		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textAlignCenter
 	},
@@ -40,47 +34,48 @@ const styles = StyleSheet.create({
 	}
 });
 
-export default class Button extends React.PureComponent<Partial<IButtonProps>, any> {
-	static defaultProps = {
-		title: 'Press me!',
-		type: 'primary',
-		onPress: () => alert('It works!'),
-		disabled: false,
-		loading: false
-	};
+const Button = ({
+	type = 'primary',
+	disabled = false,
+	loading = false,
+	fontSize = 16,
+	title,
+	onPress,
+	backgroundColor,
+	color,
+	style,
+	styleText,
+	...otherProps
+}: IButtonProps): React.ReactElement => {
+	const { colors } = useTheme();
+	const isPrimary = type === 'primary';
 
-	render() {
-		const { title, type, onPress, disabled, backgroundColor, color, loading, style, theme, fontSize, styleText, ...otherProps } =
-			this.props;
-		const isPrimary = type === 'primary';
-
-		let textColor = isPrimary ? themes[theme!].buttonText : themes[theme!].bodyText;
-		if (color) {
-			textColor = color;
-		}
-
-		return (
-			<Touchable
-				onPress={onPress}
-				disabled={disabled || loading}
-				style={[
-					styles.container,
-					backgroundColor
-						? { backgroundColor }
-						: { backgroundColor: isPrimary ? themes[theme!].actionTintColor : themes[theme!].backgroundColor },
-					disabled && styles.disabled,
-					style
-				]}
-				accessibilityLabel={title}
-				{...otherProps}>
-				{loading ? (
-					<ActivityIndicator color={textColor} />
-				) : (
-					<Text style={[styles.text, { color: textColor }, fontSize && { fontSize }, styleText]} accessibilityLabel={title}>
-						{title}
-					</Text>
-				)}
-			</Touchable>
-		);
+	let textColor = isPrimary ? colors.buttonText : colors.bodyText;
+	if (color) {
+		textColor = color;
 	}
-}
+
+	return (
+		<Touchable
+			onPress={onPress}
+			disabled={disabled || loading}
+			style={[
+				styles.container,
+				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
+				disabled && styles.disabled,
+				style
+			]}
+			accessibilityLabel={title}
+			{...otherProps}>
+			{loading ? (
+				<ActivityIndicator color={textColor} />
+			) : (
+				<Text style={[styles.text, { color: textColor, fontSize }, styleText]} accessibilityLabel={title}>
+					{title}
+				</Text>
+			)}
+		</Touchable>
+	);
+};
+
+export default Button;
diff --git a/app/containers/LoginServices.tsx b/app/containers/LoginServices.tsx
index e6feac63d..d596b3820 100644
--- a/app/containers/LoginServices.tsx
+++ b/app/containers/LoginServices.tsx
@@ -327,7 +327,6 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, ILoginServi
 						title={collapsed ? I18n.t('Onboarding_more_options') : I18n.t('Onboarding_less_options')}
 						type='secondary'
 						onPress={this.toggleServices}
-						theme={theme}
 						style={styles.options}
 						color={themes[theme].actionTintColor}
 					/>
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
index 31f68c2e5..8aa6a16dd 100644
--- a/app/containers/TwoFactor/index.tsx
+++ b/app/containers/TwoFactor/index.tsx
@@ -139,16 +139,8 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 							backgroundColor={themes[theme].chatComponentBackground}
 							style={styles.button}
 							onPress={onCancel}
-							theme={theme}
-						/>
-						<Button
-							title={I18n.t('Send')}
-							type='primary'
-							style={styles.button}
-							onPress={onSubmit}
-							theme={theme}
-							testID='two-factor-send'
 						/>
+						<Button title={I18n.t('Send')} type='primary' style={styles.button} onPress={onSubmit} testID='two-factor-send' />
 					</View>
 				</View>
 			</View>
diff --git a/app/containers/UIKit/Actions.tsx b/app/containers/UIKit/Actions.tsx
index ad267013d..c8bf9ff54 100644
--- a/app/containers/UIKit/Actions.tsx
+++ b/app/containers/UIKit/Actions.tsx
@@ -4,10 +4,8 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
 import Button from '../Button';
 import I18n from '../../i18n';
 import { IActions } from './interfaces';
-import { useTheme } from '../../theme';
 
 export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
-	const { theme } = useTheme();
 	const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
 	const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
 
@@ -18,7 +16,7 @@ export const Actions = ({ blockId, appId, elements, parser }: IActions) => {
 	return (
 		<>
 			<Elements />
-			{showMoreVisible && <Button theme={theme} title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
+			{showMoreVisible && <Button title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
 		</>
 	);
 };
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index 8e674996f..0b8bff209 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -56,9 +56,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 		}
 	};
 
-	let button = placeholder ? (
-		<Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} theme={theme} />
-	) : null;
+	let button = placeholder ? <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} /> : null;
 
 	if (context === BLOCK_CONTEXT.FORM) {
 		button = (
diff --git a/app/containers/UIKit/MultiSelect/index.tsx b/app/containers/UIKit/MultiSelect/index.tsx
index 61f917349..f669e7ba6 100644
--- a/app/containers/UIKit/MultiSelect/index.tsx
+++ b/app/containers/UIKit/MultiSelect/index.tsx
@@ -157,7 +157,7 @@ export const MultiSelect = React.memo(
 		});
 
 		let button = multiselect ? (
-			<Button title={`${selected.length} selecteds`} onPress={onShow} loading={loading} theme={theme} />
+			<Button title={`${selected.length} selecteds`} onPress={onShow} loading={loading} />
 		) : (
 			<Input
 				onPress={onShow}
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index 70a3a532e..4026afa49 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -63,7 +63,6 @@ class MessageParser extends UiKitParserMessage {
 	button(element: IButton, context: BlockContext) {
 		const { text, value, actionId, style } = element;
 		const [{ loading }, action] = useBlockContext(element, context);
-		const { theme } = useContext(ThemeContext);
 		return (
 			<Button
 				key={actionId}
@@ -72,7 +71,6 @@ class MessageParser extends UiKitParserMessage {
 				loading={loading}
 				onPress={() => action({ value })}
 				style={styles.button}
-				theme={theme}
 			/>
 		);
 	}
diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx
index 1f99e2336..3eebfbb79 100644
--- a/app/containers/message/Attachments.tsx
+++ b/app/containers/message/Attachments.tsx
@@ -43,7 +43,7 @@ const AttachedActions = ({ attachment }: { attachment: IAttachment }) => {
 		};
 
 		if (element.type === 'button') {
-			return <Button theme={theme} onPress={onPress} title={element.text} />;
+			return <Button onPress={onPress} title={element.text} />;
 		}
 
 		return null;
diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
index afd137bd9..e5b0c561b 100644
--- a/app/views/CannedResponseDetail.tsx
+++ b/app/views/CannedResponseDetail.tsx
@@ -159,13 +159,7 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 						</View>
 					</View>
 				</View>
-				<Button
-					title={I18n.t('Use')}
-					theme={theme}
-					style={styles.button}
-					type='primary'
-					onPress={() => navigateToRoom(cannedResponse)}
-				/>
+				<Button title={I18n.t('Use')} style={styles.button} type='primary' onPress={() => navigateToRoom(cannedResponse)} />
 			</ScrollView>
 		</SafeAreaView>
 	);
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index 04d957a60..5f46432a6 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -40,7 +40,6 @@ const CannedResponseItem = ({
 					fontSize={12}
 					color={themes[theme].titleText}
 					style={[styles.cannedUseButton, { backgroundColor: themes[theme].chatComponentBackground }]}
-					theme={theme}
 					onPress={onPressUse}
 				/>
 			</View>
diff --git a/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot b/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot
index 29c25024c..a1359dd4e 100644
--- a/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot
+++ b/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots CannedResponseItem Itens 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"minHeight\\":117,\\"maxHeight\\":141,\\"padding\\":16,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"height\\":36}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"!\\",\\"!FAQ4\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Private\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Use\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":28,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#f3f4f5\\",\\"width\\":56,\\"marginLeft\\":8,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"},{\\"fontSize\\":12},null],\\"accessibilityLabel\\":\\"Use\\"},\\"children\\":[\\"Use\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"ellipsizeMode\\":\\"tail\\",\\"numberOfLines\\":2,\\"style\\":[{\\"marginTop\\":8,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"“\\",\\"ZCVXZVXCZVZXVZXCVZXCVXZCVZX\\",\\"”\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"overflow\\":\\"hidden\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"minHeight\\":117,\\"maxHeight\\":141,\\"padding\\":16,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"height\\":36}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"!\\",\\"test4mobilePrivate\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Private\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Use\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":28,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#f3f4f5\\",\\"width\\":56,\\"marginLeft\\":8,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"},{\\"fontSize\\":12},null],\\"accessibilityLabel\\":\\"Use\\"},\\"children\\":[\\"Use\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"ellipsizeMode\\":\\"tail\\",\\"numberOfLines\\":2,\\"style\\":[{\\"marginTop\\":8,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"“\\",\\"test for mobile private\\",\\"”\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"overflow\\":\\"hidden\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"HQ\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Closed\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"HQ\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Problem in Product Y\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"HQ\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Closed\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Problem in Product Y\\"]}]}]}]}]"`;
+exports[`Storyshots CannedResponseItem Itens 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"minHeight\\":117,\\"maxHeight\\":141,\\"padding\\":16,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"height\\":36}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"!\\",\\"!FAQ4\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Private\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Use\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":28,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#f3f4f5\\",\\"width\\":56,\\"marginLeft\\":8,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\",\\"fontSize\\":12},null],\\"accessibilityLabel\\":\\"Use\\"},\\"children\\":[\\"Use\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"ellipsizeMode\\":\\"tail\\",\\"numberOfLines\\":2,\\"style\\":[{\\"marginTop\\":8,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"“\\",\\"ZCVXZVXCZVZXVZXCVZXCVXZCVZX\\",\\"”\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"overflow\\":\\"hidden\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"minHeight\\":117,\\"maxHeight\\":141,\\"padding\\":16,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"height\\":36}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"!\\",\\"test4mobilePrivate\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Private\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Use\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":28,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#f3f4f5\\",\\"width\\":56,\\"marginLeft\\":8,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\",\\"fontSize\\":12},null],\\"accessibilityLabel\\":\\"Use\\"},\\"children\\":[\\"Use\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"ellipsizeMode\\":\\"tail\\",\\"numberOfLines\\":2,\\"style\\":[{\\"marginTop\\":8,\\"fontSize\\":14,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"“\\",\\"test for mobile private\\",\\"”\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"overflow\\":\\"hidden\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"HQ\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Closed\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"HQ\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Problem in Product Y\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"HQ\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Closed\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":4,\\"marginRight\\":4,\\"marginTop\\":8,\\"height\\":16},{\\"backgroundColor\\":\\"#E6E6E7\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"paddingTop\\":0,\\"paddingBottom\\":0,\\"paddingHorizontal\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Problem in Product Y\\"]}]}]}]}]"`;
diff --git a/app/views/E2EEncryptionSecurityView.tsx b/app/views/E2EEncryptionSecurityView.tsx
index 3a3ef18e2..dd7267254 100644
--- a/app/views/E2EEncryptionSecurityView.tsx
+++ b/app/views/E2EEncryptionSecurityView.tsx
@@ -144,7 +144,6 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 					<Button
 						onPress={this.changePassword}
 						title={I18n.t('Save_Changes')}
-						theme={theme}
 						disabled={!newPassword.trim()}
 						style={styles.changePasswordButton}
 						testID='e2e-encryption-security-view-change-password'
@@ -175,7 +174,6 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 							<Button
 								onPress={this.resetOwnKey}
 								title={I18n.t('E2E_encryption_reset_button')}
-								theme={theme}
 								type='secondary'
 								backgroundColor={themes[theme].chatComponentBackground}
 								testID='e2e-encryption-security-view-reset-key'
diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx
index 8cc58e53f..5d3699bc1 100644
--- a/app/views/E2EEnterYourPasswordView.tsx
+++ b/app/views/E2EEnterYourPasswordView.tsx
@@ -93,7 +93,6 @@ class E2EEnterYourPasswordView extends React.Component<TE2EEnterYourPasswordView
 							onPress={this.submit}
 							title={I18n.t('Confirm')}
 							disabled={!password}
-							theme={theme}
 							testID='e2e-enter-your-password-view-confirm'
 						/>
 						<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx
index 878cd5029..85518eed7 100644
--- a/app/views/E2ESaveYourPasswordView.tsx
+++ b/app/views/E2ESaveYourPasswordView.tsx
@@ -146,7 +146,6 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
 								title={I18n.t('Copy')}
 								type='secondary'
 								fontSize={12}
-								theme={theme}
 							/>
 						</View>
 						<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
@@ -155,13 +154,11 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
 							style={{ backgroundColor: themes[theme].auxiliaryBackground }}
 							title={I18n.t('How_It_Works')}
 							type='secondary'
-							theme={theme}
 							testID='e2e-save-password-view-how-it-works'
 						/>
 						<Button
 							onPress={this.onSaved}
 							title={I18n.t('I_Saved_My_E2E_Password')}
-							theme={theme}
 							testID='e2e-save-password-view-saved-password'
 						/>
 					</View>
diff --git a/app/views/ForgotPasswordView.tsx b/app/views/ForgotPasswordView.tsx
index 6c99cd724..873ff23cc 100644
--- a/app/views/ForgotPasswordView.tsx
+++ b/app/views/ForgotPasswordView.tsx
@@ -110,7 +110,6 @@ class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForg
 						testID='forgot-password-view-submit'
 						loading={isFetching}
 						disabled={invalidEmail}
-						theme={theme}
 					/>
 				</FormContainerInner>
 			</FormContainer>
diff --git a/app/views/InviteUsersEditView/index.tsx b/app/views/InviteUsersEditView/index.tsx
index 7e984d60c..36fe41427 100644
--- a/app/views/InviteUsersEditView/index.tsx
+++ b/app/views/InviteUsersEditView/index.tsx
@@ -121,7 +121,6 @@ class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any
 	};
 
 	render() {
-		const { theme } = this.props;
 		return (
 			<SafeAreaView>
 				<List.Container>
@@ -134,7 +133,7 @@ class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any
 						<List.Separator />
 					</List.Section>
 					<View style={styles.innerContainer}>
-						<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={this.createInviteLink} theme={theme} />
+						<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={this.createInviteLink} />
 					</View>
 				</List.Container>
 			</SafeAreaView>
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
index 37fd6033b..9dedf2772 100644
--- a/app/views/InviteUsersView/index.tsx
+++ b/app/views/InviteUsersView/index.tsx
@@ -95,8 +95,8 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 					<FormTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} />
 					{renderExpiration()}
 					<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
-					<Button title={I18n.t('Share_Link')} type='primary' onPress={share} theme={theme} />
-					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} theme={theme} />
+					<Button title={I18n.t('Share_Link')} type='primary' onPress={share} />
+					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} />
 				</View>
 			</ScrollView>
 		</SafeAreaView>
diff --git a/app/views/LivechatEditView.tsx b/app/views/LivechatEditView.tsx
index 9356977c2..bbbcad591 100644
--- a/app/views/LivechatEditView.tsx
+++ b/app/views/LivechatEditView.tsx
@@ -298,7 +298,7 @@ const LivechatEditView = ({
 						/>
 					))}
 
-					<Button title={I18n.t('Save')} onPress={submit} theme={theme} />
+					<Button title={I18n.t('Save')} onPress={submit} />
 				</SafeAreaView>
 			</ScrollView>
 		</KeyboardView>
diff --git a/app/views/LoginView.tsx b/app/views/LoginView.tsx
index c38fde5a1..9c887c526 100644
--- a/app/views/LoginView.tsx
+++ b/app/views/LoginView.tsx
@@ -196,7 +196,6 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 					testID='login-view-submit'
 					loading={isFetching}
 					disabled={!this.valid()}
-					theme={theme}
 					style={styles.loginButton}
 				/>
 				{Accounts_PasswordReset && (
@@ -205,7 +204,6 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 						type='secondary'
 						onPress={this.forgotPassword}
 						testID='login-view-forgot-password'
-						theme={theme}
 						color={themes[theme].auxiliaryText}
 						fontSize={14}
 					/>
diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx
index 9ab2fa78d..a94bfd023 100644
--- a/app/views/NewServerView/index.tsx
+++ b/app/views/NewServerView/index.tsx
@@ -374,7 +374,6 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						disabled={!text || connecting}
 						loading={!connectingOpen && connecting}
 						style={[styles.connectButton, { marginTop: verticalScale({ size: 16, height }) }]}
-						theme={theme}
 						testID='new-server-view-button'
 					/>
 					<OrSeparator theme={theme} />
@@ -396,7 +395,6 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						onPress={this.connectOpen}
 						disabled={connecting}
 						loading={connectingOpen && connecting}
-						theme={theme}
 						testID='new-server-view-open'
 					/>
 				</FormContainerInner>
diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx
index d256f70e9..aa3d7b5fe 100644
--- a/app/views/ProfileView/index.tsx
+++ b/app/views/ProfileView/index.tsx
@@ -597,7 +597,6 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 							disabled={!this.formIsChanged()}
 							testID='profile-view-submit'
 							loading={saving}
-							theme={theme}
 						/>
 						<Button
 							title={I18n.t('Logout_from_other_logged_in_locations')}
@@ -605,7 +604,6 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 							backgroundColor={themes[theme].chatComponentBackground}
 							onPress={this.logoutOtherLocations}
 							testID='profile-view-logout-other-locations'
-							theme={theme}
 						/>
 					</ScrollView>
 				</SafeAreaView>
diff --git a/app/views/RegisterView.tsx b/app/views/RegisterView.tsx
index bd9e73ffd..d595efed4 100644
--- a/app/views/RegisterView.tsx
+++ b/app/views/RegisterView.tsx
@@ -310,7 +310,6 @@ class RegisterView extends React.Component<IProps, any> {
 						testID='register-view-submit'
 						disabled={!this.valid()}
 						loading={saving}
-						theme={theme}
 						style={styles.registerButton}
 					/>
 
diff --git a/app/views/RoomView/JoinCode.tsx b/app/views/RoomView/JoinCode.tsx
index dcbccae65..e0af52818 100644
--- a/app/views/RoomView/JoinCode.tsx
+++ b/app/views/RoomView/JoinCode.tsx
@@ -106,7 +106,6 @@ const JoinCode = React.memo(
 								type='secondary'
 								style={styles.button}
 								backgroundColor={themes[theme].chatComponentBackground}
-								theme={theme}
 								testID='join-code-cancel'
 								onPress={hide}
 							/>
@@ -114,7 +113,6 @@ const JoinCode = React.memo(
 								title={I18n.t('Join')}
 								type='primary'
 								style={styles.button}
-								theme={theme}
 								testID='join-code-submit'
 								onPress={handleJoinRoom}
 							/>
diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx
index b74b2016e..960240602 100644
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@@ -250,7 +250,6 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						title={I18n.t('Create_a_new_workspace')}
 						type='secondary'
 						onPress={this.createWorkspace}
-						theme={theme}
 						testID='rooms-list-header-create-workspace-button'
 						style={styles.buttonCreateWorkspace}
 						color={themes[theme].tintColor}
diff --git a/app/views/SendEmailConfirmationView.tsx b/app/views/SendEmailConfirmationView.tsx
index 90dc01d04..cdcbed9f2 100644
--- a/app/views/SendEmailConfirmationView.tsx
+++ b/app/views/SendEmailConfirmationView.tsx
@@ -78,7 +78,6 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation
 					testID='send-email-confirmation-view-submit'
 					loading={isFetching}
 					disabled={invalidEmail}
-					theme={theme}
 				/>
 			</FormContainerInner>
 		</FormContainer>
diff --git a/app/views/SetUsernameView.tsx b/app/views/SetUsernameView.tsx
index 7197d16bc..14c878d8c 100644
--- a/app/views/SetUsernameView.tsx
+++ b/app/views/SetUsernameView.tsx
@@ -137,7 +137,6 @@ class SetUsernameView extends React.Component<ISetUsernameViewProps, ISetUsernam
 							testID='set-username-view-submit'
 							disabled={!username}
 							loading={saving}
-							theme={theme}
 						/>
 					</SafeAreaView>
 				</ScrollView>
diff --git a/app/views/WorkspaceView/index.tsx b/app/views/WorkspaceView/index.tsx
index 17bea8725..799c6d747 100644
--- a/app/views/WorkspaceView/index.tsx
+++ b/app/views/WorkspaceView/index.tsx
@@ -81,7 +81,7 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 						<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{Site_Url}</Text>
 					</View>
 					{showLoginButton ? (
-						<Button title={I18n.t('Login')} type='primary' onPress={this.login} theme={theme} testID='workspace-view-login' />
+						<Button title={I18n.t('Login')} type='primary' onPress={this.login} testID='workspace-view-login' />
 					) : null}
 					{this.showRegistrationButton ? (
 						<Button
@@ -89,7 +89,6 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 							type='secondary'
 							backgroundColor={themes[theme].chatComponentBackground}
 							onPress={this.register}
-							theme={theme}
 							testID='workspace-view-register'
 						/>
 					) : (
diff --git a/storybook/stories/__snapshots__/Message.storyshot b/storybook/stories/__snapshots__/Message.storyshot
index 4c278483e..71d3b12de 100644
--- a/storybook/stories/__snapshots__/Message.storyshot
+++ b/storybook/stories/__snapshots__/Message.storyshot
@@ -50,7 +50,7 @@ exports[`Storyshots Message Sequential thread messages following thread button 1
 
 exports[`Storyshots Message Sequential thread messages following thread reply 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"marginBottom\\":12},\\"testID\\":\\"message-thread-replied-on-How are you?\\"},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#1d74f5\\"},{\\"marginRight\\":10,\\"marginLeft\\":16},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"How are you?\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"flex\\":1,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"How are you?\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginLeft\\":4,\\"marginRight\\":4,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2},{\\"marginLeft\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=20\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"I'm fine!\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"I'm fine!\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2},{\\"marginLeft\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=20\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Cool!\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Cool!\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2},{\\"marginLeft\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=20\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\"]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2},{\\"marginLeft\\":16}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":20,\\"height\\":20,\\"borderRadius\\":2}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=20\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}]}]}]}]}]}]}"`;
 
-exports[`Storyshots Message Show a button as attachment 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\",\\"lineHeight\\":22}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Test Button\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Text button\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\"},null,null],\\"accessibilityLabel\\":\\"Text button\\"},\\"children\\":[\\"Text button\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}]}]}]}]}]}]}"`;
+exports[`Storyshots Message Show a button as attachment 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/diego.mello?format=png&size=36\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\",\\"lineHeight\\":22}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Test Button\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Text button\\",\\"focusable\\":true,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Text button\\"},\\"children\\":[\\"Text button\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":null}]}]}]}]}]}]}]}"`;
 
 exports[`Storyshots Message Static avatar 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"paddingVertical\\":4,\\"width\\":\\"100%\\",\\"paddingHorizontal\\":14,\\"flexDirection\\":\\"column\\"},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4},{\\"marginTop\\":4}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://pbs.twimg.com/profile_images/1016397063649660929/14EIApTi_400x400.jpg\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"marginLeft\\":46},{\\"marginLeft\\":10}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"space-between\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"flexShrink\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"lineHeight\\":22,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"diego.mello\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":12,\\"marginLeft\\":8,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\",\\"lineHeight\\":22}]},\\"children\\":[\\"10:00 AM\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},null,{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Message\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},[{},{\\"marginTop\\":0,\\"marginBottom\\":0,\\"flexWrap\\":\\"wrap\\",\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"flex-start\\",\\"justifyContent\\":\\"flex-start\\"}]]},\\"children\\":[\\"Message\\"]}]}]}]}]}]}]}]}]}]}"`;
 
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 7e0e57cb7..55a1468e6 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -20,6 +20,7 @@ import '../../app/views/RoomView/LoadMore/LoadMore.stories';
 import '../../app/views/CannedResponsesListView/CannedResponseItem.stories';
 import '../../app/containers/TextInput/TextInput.stories';
 import '../../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories';
+import '../../app/containers/Button/Button.stories';
 
 // Change here to see themed storybook
 export const theme = 'light';