TabView vs SegmentedBar

Question

I am creating SegmentedBar in native script. I am able to create segments but I am not able to add Label to segment view.

Answer 1

The Segmented bar is described in a good way by Apple:

A segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.

So basically: A Segmented Bar is a couple of buttons (visually) connected to each other. Just think of them like buttons with a specific look.

A TabView on the other hand the tabs (the items you click) and a connected view to each tab.

What you're doing in your code is that you're trying to combine mechanics of the TabView with the SegmentedBar.

Take a look at these two code examples.

First, the SegmentedBar. Here is an example. When you click the "First", "Second" or "Third" button nothing will happen. To react on a button press you've to bind the selectedIndex to an Observable object property and do your logic in the on the propertyChange event.

<SegmentedBar selectedIndex="{{ selectedIndex }}">
    <SegmentedBar.items>
        <SegmentedBarItem title="First" />
        <SegmentedBarItem title="Second" />
        <SegmentedBarItem title="Third" />
    </SegmentedBar.items>
</SegmentedBar>

The TabView, on the other hand, consist of two things, the tabs themselves (the things you press) and a View connected to each tab. So when you click a tab the view gets changed.

 <TabView>
   <TabView.items>
     <TabViewItem title="Tab 1">
       <TabViewItem.view>
          <Label text="Label in Tab1" />
       </TabViewItem.view>
     </TabViewItem>
     <TabViewItem title="Tab 2">
       <TabViewItem.view>
          <Label text="Label in Tab2" />
       </TabViewItem.view>
     </TabViewItem>
   </TabView.items>
 </TabView>

These two components are used for different things. E.g. for filtering a list (show all mails, show only unread mails...) you usually use the segmented bar as you don't want to change the view - you want to change the content of the view. The TabView is used for when you actually want to display a whole new view.

Answer 2

You may know the <TabView> is created keeping in mind to show different pages/views in single page/view. Thus, TabView is used mainly for navigating to different views.

The SegmentedBar is created for different purpose. This can be used in a view with different functionality for example you can categorize the contents/products as Free, Paid. You would want to show different product features, services on Free view and Paid view. Thus, you can use the SegmentedBar to show different options for the user.

So, now you know the difference between the TabView and the SegmentedBar.

The correct use of SegmentedBar is to use like this:

<SegmentedBar>
  <SegmentedBar.items>
    <SegmentedBarItem title="Free" />
    <SegmentedBarItem title="Paid" />
  </SegmentedBar.items>
</SegmentedBar>

To conclude, use TabView for navigating multiple pages in single page and use SegmentedBar for viewing different content in a single view.