0

Here is the problem I am facing:

I have a component in react native called Header. Header has 3 properties - left suffix (for back button for example), right suffix (for additional actions, sometimes 1 button, sometimes 2 buttons, sometimes none) and title.

Layout rules are as follows:

  • Title should always be centered in a header no matter if Right or Left suffixes are present. If Right suffix is present but Left suffix is not, title should still be centered in the middle of the header.
  • Right and Left suffixes should always be visible if they are declared. Meaning if I have Right Suffix + Left Suffix + a very long title, title should shrink to make space for suffixes.

I have made snack to demonstrate my problem: https://snack.expo.io/@anjayka/header-challenge

As you can see most of the layout works fine - If I add right suffix, title stays in position, if I remove left suffix - its still in position. The problem comes after title is a very long text - it expands so much that it pushes out suffixes entirely.

Any help solving this puzzle is appreciated

AyJay
  • 488
  • 7
  • 12

1 Answers1

0

Just wrap the tile in View with position: 'absolute' and center the tile Text in the middle, and give the header Text style a maxWidth prop

Konstantin Paulus
  • 1,943
  • 2
  • 10
  • 22
  • Not sure how it solves my problem though. Setting max width on text means my component should assume left and right suffixes have static widths. I have some screens where right suffix is icon and some places where right suffix is button with some text (sometimes long sometimes short). In one particular screen header has right and left suffix as Icon and text is users full name. – AyJay Jun 10 '19 at 18:11
  • Hey thanks for taking your time, but in your snack making header title long and adding right suffix breaks layout (right suffix doesn't fit!) I need a solution where right suffix has higher priority in layout then title (meaning title should shrink if right suffix is long) :/ – AyJay Jun 13 '19 at 10:50