CODEWITHSUNDEEP
iosreactjsreact-nativeflexboxflex4
Mike Flynn
Mike Flynn

Reputation: 24325

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%'
        }

Upvotes: 0

Views: 60

Answers (2)

Iman Maleki
Iman Maleki

Reputation: 644

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>
  );
}

enter image description here

Upvotes: 0

Pratik Prakash Bindage
Pratik Prakash Bindage

Reputation: 957

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;

Upvotes: 0

Related Questions