Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: indicator display for single tab #395

Merged

Conversation

Kerumen
Copy link
Contributor

@Kerumen Kerumen commented Apr 12, 2024

In my app I added some container style with padding to have a specific display for the tabs. When there is only one tab, the indicator is not shifted accordingly. This is due to the itemsLayout.length > 1 condition and the undefined value of transform. The same way as it's done for the width, I changed the transform to match the first item of the itemsLayout array if there is only one tab.

Before After

Copy link

@adrianurs adrianurs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also suggest to move the check from line 32 to line 34 outside from the current place because nested ternary operators might result confusing.
You can declare a variable before the transform object then use it.

const firstItemLayoutPosition = isRTL && itemsLayout[0]?.x ? -itemsLayout[0]?.x : itemsLayout[0]?.x

]
: undefined
)
: isRTL

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
: isRTL
: isRTL && itemsLayout[0]?.x

Because on the line below you are doing -1 * itemsLayout[0]?.x, which can result nan so check also if it exists

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This suggestion doesn't seem correct. What if x is 0?

May need to check for typeof itemsLayout[0]?.x === 'number' instead

src/MaterialTabBar/Indicator.tsx Outdated Show resolved Hide resolved
@andreialecu
Copy link
Collaborator

andreialecu commented Apr 15, 2024

@Kerumen how did you add the padding style to see this issue?

I'm getting the following result without the need for this PR:

simulator_screenshot_7B1EBD32-E6CE-4AE3-B8BD-F288234A4E48

With this setup:

    <Tabs.Container
      renderHeader={Header}
      headerHeight={HEADER_HEIGHT}
      renderTabBar={(props) => (
        <MaterialTabBar
          {...props}
          scrollEnabled
          style={{ paddingHorizontal: 30 }}
        />
      )}
    >
      <Tabs.Tab name="article" label="Article">
        <Tabs.ScrollView>
          <ArticleContent />
        </Tabs.ScrollView>
      </Tabs.Tab>
    </Tabs.Container>

@Kerumen
Copy link
Contributor Author

Kerumen commented Apr 15, 2024

If you have a lot of tabs, the last tab is cropped one when you put the paddingHorizontal as style on the MaterialTabBar. To fix it, I've used contentContainerStyle and it works fine but then there is the indicator issue when there is only one tab.

Screenshot 2024-04-15 at 10 49 08

@andreialecu andreialecu merged commit a5ca63e into PedroBern:main Apr 15, 2024
1 of 2 checks passed
@andreialecu
Copy link
Collaborator

Merged. Thank you for the PR!

@Kerumen Kerumen deleted the fix/indicator-display-for-single-tab branch April 16, 2024 10:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants