fix for header

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform, StyleSheet, Text } from 'react-native';
+import { Platform, StyleSheet, Text, ViewStyle } from 'react-native';
 import { PlatformPressable } from '@react-navigation/elements';
 
 import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon';
@@ -13,6 +13,7 @@ export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | '
 	testID?: string;
 	badge?(): void;
 	color?: string;
+	containerStyle?: ViewStyle;
 }
 
 export const BUTTON_HIT_SLOP = {
@@ -39,10 +40,19 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ title, iconName, onPress, testID, badge, color, ...props }: IHeaderButtonItem): React.ReactElement => {
+const Item = ({
+	title,
+	iconName,
+	onPress,
+	testID,
+	badge,
+	color,
+	containerStyle,
+	...props
+}: IHeaderButtonItem): React.ReactElement => {
 	const { colors } = useTheme();
 	return (
-		<PlatformPressable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
+		<PlatformPressable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={[styles.container, containerStyle]}>
 			<>
 				{iconName ? (
 					<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />

app/containers/HeaderTitle/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { useTheme } from '../../theme';
+import Styles from '../../views/Styles';
+
+export default function HeaderTitle({ title }: { title: string }): React.ReactElement {
+	const { colors } = useTheme();
+	return (
+		<Text
+			numberOfLines={1}
+			style={{
+				fontSize: 18,
+				color: colors.headerTitleColor,
+				...Styles.textSemibold
+			}}
+		>
+			{title}
+		</Text>
+	);
+}

app/views/SelectListView.tsx

@@ -20,6 +20,7 @@ import SearchBox from '../containers/SearchBox';
 import sharedStyles from './Styles';
 import { IApplicationState } from '../definitions';
 import { TDataSelect } from '../definitions/IDataSelect';
+import HeaderTitle from '../containers/HeaderTitle';
 
 const styles = StyleSheet.create({
 	buttonText: {
@@ -82,7 +83,8 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		const { selected } = this.state;
 
 		const options: StackNavigationOptions = {
-			headerTitle: I18n.t(this.title)
+			headerTitle: () => <HeaderTitle title={I18n.t(this.title)} />,
+			headerRightContainerStyle: { paddingRight: 6 }
 		};
 
 		if (isMasterDetail) {
@@ -90,9 +92,12 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		}
 
 		options.headerRight = () => (
-			<HeaderButton.Container>
+			<HeaderButton.Item
-				<HeaderButton.Item title={I18n.t('Next')} onPress={() => this.nextAction(selected)} testID='select-list-view-submit' />
+				title={I18n.t('Next')}
-			</HeaderButton.Container>
+				onPress={() => this.nextAction(selected)}
+				testID='select-list-view-submit'
+				containerStyle={{ padding: 0 }}
+			/>
 		);
 
 		navigation.setOptions(options);