Center a title in header for React Native and getting a good cushion on padding

Question

We are trying to center a title in React Native while also getting it pushed against the icons to the right and left as close as possible. As you can see from the image this version on this app doesn't extend to do that. The developer is doing percentages on the right icons to handle the width of the center title. I am sure there is a better way to handle this situation. The icons on the right will be no more then two icons or less.

[![enter image description here][2]][2]

<AppView style={[styles.titleAbsolute]}>
      <AppView
        useButton={dropDown}
        onPress={onTitlePress}
        flexDirection="row"
        paddingLeft={title?.length > 30 ? 7 : 0}
        justifyContent="center"
        width={
          headerLink?.length > 1
            ? (AppSizes.width * (dropDown ? 55 : 62)) / 100
            : drawerHeader
            ? '85%'
            : !headerLink
            ? '90%'
            : headerLink.length === 1
            ? '84%'
            : '90%'
        }

Answer 1

It is achievable by wrapping all items inside a View with flexDirection: "row" and placing the text inside a View with flex: 1.

Title in the centre of Icons:

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: StatusBar.currentHeight }}>
      <View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
        <BackIcon size={iconSize} />

        <Text style={{ flex: 1, marginHorizontal: 8, textAlign: 'center', ...otherstyles }}>
          {title}
        </Text>

        <StarIcon size={iconSize} />
        <ShareIcon size={iconSize} />
      </View>
    </SafeAreaView>
  );
}

Title in the centre of screen:

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: StatusBar.currentHeight }}>
      <View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
        <View style={{ width: iconViewSizeBy2 }}>
          <BackIcon size={iconSize} />
        </View>

        <Text style={{ flex: 1, marginHorizontal: 8, textAlign: 'center', ...otherstyles }}>
          {title}
        </Text>

        <View style={{ width: iconViewSizeBy2, flexDirection: "row" }}>
          <StarIcon size={iconSize} />
          <ShareIcon size={iconSize} />
        </View>
      </View>
    </SafeAreaView>
  );
}

Answer 2

Instead of using percentages, you can utilize flexbox to achieve the desired layout.

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const Header = ({ title, onTitlePress, dropDown, headerLink }) => (
  <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 10, backgroundColor: '#f5f5f5' }}>
    {headerLink.map((icon, index) => (
      <TouchableOpacity style={{ marginLeft: 10 }} key={index}>
        {icon}
      </TouchableOpacity>
    ))}
    <Text style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center', flex: 1, marginHorizontal: 10 }}>{title}</Text>
    <TouchableOpacity style={{ marginRight: 10 }} onPress={onTitlePress}>
      {dropDown}
    </TouchableOpacity>
  </View>
);

export default Header;

• How To Align Things In CSS : https://www.smashingmagazine.com/2019/03/css-alignment/

• Styling in React: 5 ways to style React apps : https://blog.logrocket.com/styling-react-5-ways-style-react-apps/

• Advanced React-Native CSS Layout Techniques : https://zudemwango.medium.com/advanced-react-native-css-layout-techniques-9a6c4d59d9c7