TabController

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

note

This component is based on react-native-gesture-handler. On Android, when using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC

Usage

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

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[]

onChangeIndex

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