fix: indicator display for single tab

[Kerumen]

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

[adrianurs]

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

[adrianurs]

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

[andreialecu]

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

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

[andreialecu]

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

[Kerumen]

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.

[andreialecu]

Merged. Thank you for the PR!