In my react native app I am noticing that my header factor is behaving otherwise on ios than android. I set the header title to width: 100% however on ios it nonetheless has appreciable margins on either side. You possibly can see within the code that I am attempting to separate the title to have two strings displayed within the header so I want to use all of the house I can get. I’ve bought a dummy string displaying for now to obviously present the margins and variations between the platforms. Nothing I do appears to get the title to take the complete width. I’ve some easy kinds on the dummy string however I’ve extra full kinds on the splitHeaderContainer and it behaves the identical.
I respect any assist, thanks.
See linked photos for readability
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
import {useTranslation} from 'react-i18next';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import sort {RootStackParamList} from './sorts';
import AuthorityDetailsScreen from '../screens/authorities/AuthorityDetailsScreen';
import ElectionsScreen from '../screens/elections/ElectionsScreen';
import SignersScreen from '../screens/signers/SignersScreen';
import AuthoritiesScreen from '../screens/authorities/AuthoritiesScreen';
import SettingsScreen from '../screens/settings/SettingsScreen';
import {ChipButton} from '../elements/ChipButton';
import {Pressable, StyleSheet, View, Textual content} from 'react-native';
import {ExtendedTheme, useNavigation} from '@react-navigation/native';
import {useTheme} from '@react-navigation/native';
import NetworksScreen from '../screens/networks/NetworksScreen';
import sort {NavigationProp} from './sorts';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
perform SplitHeaderTitle() {
const {colours} = useTheme() as ExtendedTheme;
return (
Current Network
Username Username
);
}
function useTabHeaderOptions() {
const {colors} = useTheme() as ExtendedTheme;
const navigation = useNavigation();
const handleNetworkPress = () => {
navigation.navigate('Networks');
};
return {
headerLeft: () => (
),
headerRight: () => (
),
//headerTitle: () => ,
headerTitle: () => (
Hello this is a very long text to show how it cuts off
),
headerShadowVisible: false,
};
}
const TabNavigator = () => {
const {colors} = useTheme() as ExtendedTheme;
const {t} = useTranslation();
const tabHeaderOptions = useTabHeaderOptions();
return (
({
tabBarIcon: ({focused, color, size}) => {
let iconName: string;
switch (route.name) {
case 'Elections':
iconName="check-to-slot";
break;
case 'Signers':
iconName="person";
break;
case 'Authorities':
iconName="shield";
break;
case 'Settings':
iconName="gear";
break;
default:
iconName="alert";
}
return ;
},
tabBarActiveTintColor: colors.primary,
tabBarInactiveTintColor: 'gray',
})}>
);
};
const styles = StyleSheet.create({
splitHeaderContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 2,
width: '100%',
},
headerText: {
fontSize: 16,
fontWeight: '500',
},
networkText: {
flex: 1,
textAlign: 'left',
marginRight: 8,
},
usernameText: {
flex: 1,
textAlign: 'right',
opacity: 0.7,
},
headerButton: {
padding: 8,
marginHorizontal: 4,
marginVertical: -2,
},
});
export const RootNavigator = () => {
const {t} = useTranslation();
return (
(
),
}}
/>
);
};
Images:
