-
Notifications
You must be signed in to change notification settings - Fork 175
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
fix: indicator display for single tab #395
Conversation
There was a problem hiding this 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
: 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
There was a problem hiding this comment.
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
@Kerumen how did you add the padding style to see this issue? I'm getting the following result without the need for this PR: 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> |
Merged. Thank you for the PR! |
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 theundefined
value oftransform
. The same way as it's done for thewidth
, I changed thetransform
to match the first item of theitemsLayout
array if there is only one tab.