feat(a11y): dynamic text size with custom header

app/containers/Button/index.tsx

@@ -25,9 +25,9 @@ const styles = StyleSheet.create({
 		borderRadius: 4
 	},
 	normalButton: {
-		paddingHorizontal: 14,
-		justifyContent: 'center',
-		height: 48
+		paddingVertical: 14,
+		paddingHorizontal: 16,
+		justifyContent: 'center'
 	},
 	smallButton: {
 		paddingHorizontal: 12,
@@ -94,7 +94,7 @@ const Button: React.FC<IButtonProps> = ({
 			accessibilityLabel={title}
 			accessibilityRole='button'
 			{...otherProps}>
-			{loading ? <ActivityIndicator color={resolvedTextColor} /> : <Text style={textStyle}>{title}</Text>}
+			{loading ? <ActivityIndicator color={resolvedTextColor} style={{ padding: 0 }} /> : <Text style={textStyle}>{title}</Text>}
 		</Touchable>
 	);
 };

app/containers/CustomHeader/components/HeaderContainer/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useWindowDimensions, View, ViewProps, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../../../../theme';
+
+interface IHeaderContainer extends ViewProps {
+	addExtraNotchPadding?: boolean;
+	isMasterDetail?: boolean;
+	customLeftIcon?: boolean;
+	customRightIcon?: boolean;
+}
+
+const HeaderContainer = (props: IHeaderContainer) => {
+	const insets = useSafeAreaInsets();
+	const { colors } = useTheme();
+	const { height, width } = useWindowDimensions();
+	const isPortrait = height > width;
+	const paddingBottom = isPortrait ? 12 : 4;
+	const statusBarPadding = props.addExtraNotchPadding ? insets.top : 0;
+	const paddingRight = props.isMasterDetail || !props.customRightIcon ? 4 : 16;
+
+	return (
+		<View
+			{...props}
+			style={{
+				alignItems: 'center',
+				flexDirection: 'row',
+				paddingBottom,
+				paddingTop: statusBarPadding + paddingBottom,
+				paddingRight,
+				paddingLeft: props.customLeftIcon ? 16 : 4,
+				gap: props.isMasterDetail ? 4 : 16,
+				backgroundColor: colors.surfaceNeutral,
+				borderWidth: StyleSheet.hairlineWidth,
+				borderColor: colors.strokeLight
+			}}
+		/>
+	);
+};
+
+export default HeaderContainer;

app/containers/CustomHeader/index.tsx

@@ -0,0 +1,94 @@
+import React, { ReactNode } from 'react';
+import { PixelRatio, Text, View } from 'react-native';
+import { NativeStackHeaderProps } from '@react-navigation/native-stack';
+import { HeaderBackButton } from '@react-navigation/elements';
+
+import HeaderContainer from './components/HeaderContainer';
+import { isAndroid } from '../../lib/methods/helpers';
+import { useAppSelector } from '../../lib/hooks';
+import { useTheme } from '../../theme';
+import { styles } from './styles';
+
+interface IHeaderTitle {
+	headerTitle?: string | ((props: { children: string; tintColor?: string }) => ReactNode);
+}
+
+const HeaderTitle = ({ headerTitle }: IHeaderTitle) => {
+	const { colors } = useTheme();
+	if (!headerTitle) return null;
+	if (typeof headerTitle === 'string') {
+		if (isAndroid) {
+			return (
+				<Text
+					numberOfLines={1}
+					style={{
+						...styles.title,
+						paddingVertical: 10,
+						color: colors.fontTitlesLabels
+					}}>
+					{headerTitle}
+				</Text>
+			);
+		}
+		return (
+			<View style={styles.headerTitleContainer}>
+				<Text
+					numberOfLines={1}
+					style={{
+						...styles.title,
+						paddingVertical: 6,
+						color: colors.fontTitlesLabels
+					}}>
+					{headerTitle}
+				</Text>
+			</View>
+		);
+	}
+
+	return headerTitle({ children: '', tintColor: colors.fontTitlesLabels });
+};
+
+interface IHeader extends NativeStackHeaderProps {}
+
+const CustomHeader = ({ options, navigation, route }: IHeader) => {
+	const { headerLeft, headerTitle, headerRight, title } = options;
+	const { colors } = useTheme();
+	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const fontScale = PixelRatio.getFontScale();
+
+	const isRoomViewMasterDetail =
+		!isMasterDetail ||
+		route.name === 'RoomView' ||
+		route.name === 'RoomsListView' ||
+		route.name === 'ShareListView' ||
+		route.name === 'ShareView' ||
+		route.name === 'AttachmentView';
+
+	return (
+		<HeaderContainer
+			customRightIcon={!!headerRight}
+			customLeftIcon={!!headerLeft}
+			addExtraNotchPadding={isRoomViewMasterDetail}
+			isMasterDetail={isMasterDetail}>
+			{headerLeft ? (
+				headerLeft({ canGoBack: false })
+			) : (
+				<HeaderBackButton
+					labelVisible={false}
+					onPress={() => navigation.goBack()}
+					tintColor={colors.fontDefault}
+					testID='header-back'
+					style={styles.headerBackButton}
+				/>
+			)}
+			<HeaderTitle headerTitle={headerTitle ?? title} />
+			{headerRight ? (
+				headerRight({ canGoBack: false })
+			) : (
+				<View style={{ width: isAndroid ? undefined : 32.5 * fontScale, height: 32.5 * fontScale }} />
+			)}
+		</HeaderContainer>
+	);
+};
+
+export default CustomHeader;

app/containers/CustomHeader/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+import { isTablet } from '../../lib/methods/helpers';
+import sharedStyles from '../../views/Styles';
+
+export const styles = StyleSheet.create({
+	title: {
+		...sharedStyles.textBold,
+		fontSize: 16,
+		flex: 1,
+		lineHeight: 24
+	},
+	headerBackButton: {
+		margin: 0,
+		marginRight: isTablet ? 5 : -5
+	},
+	headerTitleContainer: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+});

app/containers/CustomIcon/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PixelRatio } from 'react-native';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import type { IconProps } from 'react-native-vector-icons/Icon';
 
@@ -19,7 +20,17 @@ export interface ICustomIcon extends IconProps {
 
 const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => {
 	const { colors } = useTheme();
-	return <IconSet name={name} size={size} color={color || colors.fontDefault} style={[{ lineHeight: size }, style]} {...props} />;
+	const fontScale = PixelRatio.getFontScale();
+
+	return (
+		<IconSet
+			name={name}
+			size={size * fontScale}
+			color={color || colors.fontDefault}
+			style={[{ lineHeight: size * fontScale }, style]}
+			{...props}
+		/>
+	);
 };
 
 export { CustomIcon };

app/containers/DirectoryItem/styles.ts

@@ -6,7 +6,7 @@ export const ROW_HEIGHT = 54;
 
 export default StyleSheet.create({
 	directoryItemButton: {
-		height: ROW_HEIGHT
+		paddingVertical: 12
 	},
 	directoryItemContainer: {
 		flex: 1,

app/containers/HeaderButton/Common.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StackActions, useNavigation } from '@react-navigation/native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 import I18n from '../../i18n';
 import { isIOS } from '../../lib/methods/helpers';
@@ -9,13 +10,20 @@ import { useTheme } from '../../theme';
 
 interface IHeaderButtonCommon extends IHeaderButtonItem {
 	navigation?: any; // TODO: Evaluate proper type
+	style?: StyleProp<ViewStyle>;
 }
 
 // Left
-export const Drawer = ({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => {
+export const Drawer = ({
+	navigation,
+	testID,
+	style = {},
+	onPress = () => navigation?.toggleDrawer(),
+	...props
+}: IHeaderButtonCommon) => {
 	const { colors } = useTheme();
 	return (
-		<Container left>
+		<Container style={style}>
 			<Item iconName='hamburguer' onPress={onPress} testID={testID} color={colors.fontDefault} {...props} />
 		</Container>
 	);

app/containers/HeaderButton/HeaderButtonContainer.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 
 import { isAndroid, isTablet } from '../../lib/methods/helpers';
 
 interface IHeaderButtonContainer {
 	children?: React.ReactElement | (React.ReactElement | null)[] | null;
 	left?: boolean;
 	onLayout?: ViewProps['onLayout'];
+	style?: StyleProp<ViewStyle>;
 }
 
 const styles = StyleSheet.create({
@@ -24,8 +25,8 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Container = ({ children, left = false, onLayout }: IHeaderButtonContainer): React.ReactElement => (
-	<View style={[styles.container, left ? styles.left : styles.right]} onLayout={onLayout || undefined}>
+const Container = ({ children, left = false, onLayout, style = {} }: IHeaderButtonContainer): React.ReactElement => (
+	<View style={[styles.container, left ? styles.left : styles.right, style]} onLayout={onLayout || undefined}>
 		{children}
 	</View>
 );

app/containers/InAppNotification/NotifierComponent.tsx

@@ -9,10 +9,10 @@ import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
-import { ROW_HEIGHT } from '../RoomItem';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
 import { IApplicationState, ISubscription, SubscriptionType } from '../../definitions';
 import { hideNotification } from '../../lib/methods/helpers/notifications';
+import { useRowHeight } from '../RoomItem/useRowHeight';
 
 export interface INotifierComponent {
 	notification: {
@@ -33,7 +33,6 @@ const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
 
 const styles = StyleSheet.create({
 	container: {
-		height: ROW_HEIGHT,
 		paddingHorizontal: 14,
 		flexDirection: 'row',
 		alignItems: 'center',
@@ -74,6 +73,7 @@ const styles = StyleSheet.create({
 
 const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifierComponent) => {
 	const { theme } = useTheme();
+	const { ROW_HEIGHT } = useRowHeight();
 	const insets = useSafeAreaInsets();
 	const { text, payload } = notification;
 	const { type, rid } = payload;
@@ -105,7 +105,8 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				{
 					backgroundColor: themes[theme].surfaceLight,
 					borderColor: themes[theme].strokeLight,
-					marginTop: insets.top
+					marginTop: insets.top,
+					height: ROW_HEIGHT
 				}
 			]}>
 			<Touchable

app/containers/LoginServices/ButtonService.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { PixelRatio, Text, View } from 'react-native';
 
 import { useTheme } from '../../theme';
 import Touch from '../Touch';
@@ -9,7 +9,7 @@ import styles from './styles';
 
 const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, icon, accessibilityLabel }: IButtonService) => {
 	const { colors } = useTheme();
-
+	const size = 24 * PixelRatio.getFontScale();
 	return (
 		<Touch
 			key={name}
@@ -18,10 +18,11 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
 			activeOpacity={0.5}
 			underlayColor={colors.fontWhite}
 			accessible
-			accessibilityLabel={accessibilityLabel}
-		>
+			accessibilityLabel={accessibilityLabel}>
 			<View style={styles.serviceButtonContainer}>
-				{authType === 'oauth' || authType === 'apple' ? <CustomIcon name={icon} size={24} style={styles.serviceIcon} /> : null}
+				{authType === 'oauth' || authType === 'apple' ? (
+					<CustomIcon name={icon} size={24} style={[styles.serviceIcon, { width: size, height: size }]} />
+				) : null}
 				<Text style={[styles.serviceText, { color: colors.fontTitlesLabels }]}>{buttonText}</Text>
 			</View>
 		</Touch>

app/containers/LoginServices/styles.ts

@@ -2,7 +2,6 @@ import { StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 
-export const BUTTON_HEIGHT = 48;
 export const SERVICE_HEIGHT = 58;
 export const BORDER_RADIUS = 4;
 export const SERVICES_COLLAPSED_HEIGHT = 174;
@@ -15,18 +14,15 @@ export default StyleSheet.create({
 	serviceButtonContainer: {
 		borderRadius: BORDER_RADIUS,
 		width: '100%',
-		height: BUTTON_HEIGHT,
+		paddingVertical: 14,
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
 		paddingHorizontal: 15
 	},
 	serviceIcon: {
 		position: 'absolute',
-		left: 15,
-		top: 12,
-		width: 24,
-		height: 24
+		left: 15
 	},
 	serviceText: {
 		...sharedStyles.textRegular,