React native Question posted in
The official React Native documentation can be found here.

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

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

[![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%'
        }
Tags:

2

Answers


  1. 0

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

    Text centre of Icons:

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

        <View style={{ flex: 1, paddingHorizontal: 8, alignItems: "center" }}>
          <SomeLongText />
        </View>

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

    Text 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>

        <View style={{ flex: 1, paddingHorizontal: 8, alignItems: "center" }}>
          <SomeLongText />
        </View>

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

    enter image description here

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search