TabController

A performant solution for a tab controller with lazy load mechanism
(code example)

Usage

Live Editor

<TabController items={[{label: 'First'}, {label: 'Second'}, {label: 'Third'}]}>
  <TabController.TabBar enableShadows/>
  <View flex>
    <TabController.TabPage index={0}>{renderFirstPage()}</TabController.TabPage>
    <TabController.TabPage index={1} lazy>{renderSecondPage()}</TabController.TabPage>
    <TabController.TabPage index={2} lazy>{renderThirdPage()}</TabController.TabPage>
  </View>
</TabController>

Result

API

asCarousel

When using TabController.PageCarousel this should be turned on boolean

carouselPageWidth;

Pass for custom carousel page width number

initialIndex

Initial selected index number

items

The list of tab bar items TabControllerItemProps[]

nestedInScrollView

Does not work with asCarousel

Pass when TabController is render inside a ScrollView (with a header) boolean

onChangeIndex

Callback for when index has change (will not be called on ignored items) (index: number, prevIndex: number | null) => void

Usage​

API​

asCarousel​

carouselPageWidth;​

initialIndex​

items​

nestedInScrollView​

Does not work with asCarousel​

onChangeIndex​