diff --git a/README.md b/README.md index 0dc4c3d..5a40c17 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ - [Tabs.Container](#tabscontainer) - [Tabs.Lazy](#tabslazy) - [Tabs.FlatList](#tabsflatlist) - - [Tabs.FlashList](#tabsflashlist) + - [Tabs.FlashList](#tabsflatlist) - [Tabs.SectionList](#tabssectionlist) - [Tabs.ScrollView](#tabsscrollview) - [Ref](#ref) @@ -194,6 +194,7 @@ const Example = () => { |`onIndexChange`|`((index: number) => void) \| undefined`||Callback fired when the index changes. It receives the current index.| |`onTabChange`|`(data: { prevIndex: number index: number prevTabName: T tabName: T }) => void`||Callback fired when the tab changes. It receives the previous and current index and tabnames.| |`pagerProps`|`Omit, 'data' \| 'keyExtractor' \| 'renderItem' \| 'horizontal' \| 'pagingEnabled' \| 'onScroll' \| 'showsHorizontalScrollIndicator' \| 'getItemLayout'>`||Props passed to the pager. If you want for example to disable swiping, you can pass `{ scrollEnabled: false }`| +|`renderBackground`|`((props: TabBarProps) => ReactElement ReactElement \| null) \| (new (props: any) => Component)> \| null) \| undefined`||| |`renderHeader`|`(props: TabBarProps) => React.ReactElement \| null`||| |`renderTabBar`|`(props: TabBarProps) => React.ReactElement \| null`|`(props: TabBarProps) => MaterialTabBar`|| |`revealHeaderOnScroll`|`boolean \| undefined`||Reveal header when scrolling down. Implements diffClamp.| @@ -229,19 +230,16 @@ Typically used internally, but if you want to mix lazy and regular screens you c #### Props -|name|type| -|:----:|:----:| -|`cancelLazyFadeIn`|`boolean \| undefined`| -|`startMounted`|`boolean \| undefined`| +|name|type|default|description| +|:----:|:----:|:----:|:----:| +|`cancelLazyFadeIn`|`boolean \| undefined`||Whether to cancel the lazy fade in animation. Defaults to false.| +|`mountDelayMs`|`number \| undefined`|`50`|How long to wait before mounting the children.| +|`startMounted`|`boolean \| undefined`||Whether to start mounted. Defaults to true if we are the focused tab.| ### Tabs.FlatList Use like a regular FlatList. -### Tabs.FlashList - -Use like a regular FlashList. - ### Tabs.ScrollView Use like a regular ScrollView. diff --git a/src/Container.tsx b/src/Container.tsx index 1023290..0d86057 100644 --- a/src/Container.tsx +++ b/src/Container.tsx @@ -81,6 +81,7 @@ export const Container = React.memo( onTabChange, width: customWidth, allowHeaderOverscroll, + renderBackground, }, ref ) => { @@ -381,6 +382,16 @@ export const Container = React.memo( onLayout={onLayout} pointerEvents="box-none" > + {renderBackground && + renderBackground({ + containerRef, + index, + tabNames: tabNamesArray, + focusedTab, + indexDecimal, + onTabPress, + tabProps, + })} ) => React.ReactElement | null + renderBackground?: (props: TabBarProps) => React.ReactElement | null + headerContainerStyle?: StyleProp> containerStyle?: StyleProp cancelTranslation?: boolean