Chore: Migrate containers/Button to Typescript and Hooks (#4071)

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

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();
+	});
+});

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!\\"]}]}"`;

app/containers/Button/index.tsx

@@ -1,25 +1,20 @@
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
-import Touchable from 'react-native-platform-touchable';
+import Touchable, { PlatformTouchableProps } from 'react-native-platform-touchable';
 
-import { TSupportedThemes } from '../../theme';
+import { useTheme } from '../../theme';
-import { themes } from '../../lib/constants';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 
-interface IButtonProps {
+interface IButtonProps extends PlatformTouchableProps {
 	title: string;
-	type: string;
+	onPress: () => void;
-	onPress(): void;
+	type?: string;
-	disabled: boolean;
+	backgroundColor?: string;
-	backgroundColor: string;
+	loading?: boolean;
-	loading: boolean;
+	color?: string;
-	theme: TSupportedThemes;
+	fontSize?: number;
-	color: string;
+	styleText?: StyleProp<TextStyle>[];
-	fontSize: any;
-	style: any;
-	styleText?: any;
-	testID: string;
 }
 
 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> {
+const Button = ({
-	static defaultProps = {
+	type = 'primary',
-		title: 'Press me!',
+	disabled = false,
-		type: 'primary',
+	loading = false,
-		onPress: () => alert('It works!'),
+	fontSize = 16,
-		disabled: false,
+	title,
-		loading: false
+	onPress,
-	};
+	backgroundColor,
+	color,
+	style,
+	styleText,
+	...otherProps
+}: IButtonProps): React.ReactElement => {
+	const { colors } = useTheme();
+	const isPrimary = type === 'primary';
 
-	render() {
+	let textColor = isPrimary ? colors.buttonText : colors.bodyText;
-		const { title, type, onPress, disabled, backgroundColor, color, loading, style, theme, fontSize, styleText, ...otherProps } =
+	if (color) {
-			this.props;
+		textColor = color;
-		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>
-		);
 	}
-}
+
+	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;

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

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>

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

app/containers/UIKit/DatePicker.tsx

@@ -56,9 +56,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 		}
 	};
 
-	let button = placeholder ? (
+	let button = placeholder ? <Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} /> : null;
-		<Button title={textParser([placeholder])} onPress={() => onShow(!show)} loading={loading} theme={theme} />
-	) : null;
 
 	if (context === BLOCK_CONTEXT.FORM) {
 		button = (

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}

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

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;

app/views/CannedResponseDetail.tsx

@@ -159,13 +159,7 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 						</View>
 					</View>
 				</View>
-				<Button
+				<Button title={I18n.t('Use')} style={styles.button} type='primary' onPress={() => navigateToRoom(cannedResponse)} />
-					title={I18n.t('Use')}
-					theme={theme}
-					style={styles.button}
-					type='primary'
-					onPress={() => navigateToRoom(cannedResponse)}
-				/>
 			</ScrollView>
 		</SafeAreaView>
 	);

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>

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'

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>

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>

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>

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>

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('Share_Link')} type='primary' onPress={share} />
-					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} theme={theme} />
+					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} />
 				</View>
 			</ScrollView>
 		</SafeAreaView>

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>

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

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>

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>

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

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

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}

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>

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>

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'
 						/>
 					) : (

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