react-native-collapsable-tabview

This is collapsable tabview package

Installation

#### Dependencies
``sh
yarn add react-native-reanimated react-native-pager-view @shopify/flash-list
`

`sh
yarn add react-native-collapsable-tabview
`

Basic Usage

`js
import {
TabRoot,
TabHeader,
TabBar,
TabPager,
TabView,
TabFlashList,
TabScrollView,
useTabView,
IRenderTabBarItem,
} from 'react-native-collapsable-tabview';

const TabItem = memo(function TabItem({ item, ...props }: IRenderTabBarItem) {
return (

{item}

);
});

const renderTabItem = (props: IRenderTabBarItem) => {
return ;
};

export default function App() {
return (











renderItem={_ => Item}
data={[1, 2]}
/>



)
}
`


Multiple Tab Bar Usage


`js























renderItem={_ => Item}
data={[1, 2]}
/>



`

API

$3

#### Props
Name | Type | Required | Description |
--------------- |-------------------------|----------|---------------------------------------------------------|
HeaderComponent | Element | No | render Header Element |
onCollapse | (value: number) => void | No | listen header collapse event. tag "worklet" before use |
onHeaderHeight | (height: number) => void | No | listen header height event |
onBarHeight | (height: number) => void | No | listen bar height event |
...ViewProps | | No | extends view props |

$3

`ts
type IRenderTabBarItem = {
item: string;
index: number;
active: Readonly>;
onPress: () => void;
onLayout: (e: LayoutChangeEvent) => void;
};
`
#### Props
Name | Type | Required | Description |
--------------- |-----------------------------------------------|-----|------------------------|
renderItem | (params: IRenderTabBarItem ) => ReactElement | Yes | render tab bar item |
display | 'sameTabsWidth', 'minWindowWidth' , 'default' | No | display Tab Bar |
horizontalGap | number | No | horizontal gap of tabs |
verticalGap | number | No | vertical gap of tabs |
underlineStyle | ViewStyle | No | style of underline |
tabBarStyle | ViewStyle | No | style of tab bar |

$3

#### Methods
Name | Type | Description |
--------------- |---------------------------|-------------|
goToPage | (index: number) => void | go to page |

#### Props
Name | Type | Required | Description |
--------------------- |---------------------------------|----------|--------------------|
initialPage | number, SharedValue\ | No | set initial page |
scrollEnabled | boolean, SharedValue\ | No | set scroll enabled |
overScrollMode | "auto", "always", "never" | No | |
keyboardDismissMode | "none", "on-drag" | No | |
onPageChanged | (index: number) => void | No | listen tab changed |

$3

#### Props
Name | Type | Required | Description |
--------------- |--------|----------|-------------------|
label | string | Yes | label of tab item |

$3

#### Props
Name | Type | Required | Description |
--------------- |--------|----------|---------------------|
...ScrollViewProps | | no | props of ScrollView |

$3

#### Props
Name | Type | Required | Description |
--------------- |--------|----------|---------------------|
...FlashListProps | | no | props of FlashList |

$3

#### Props
Name | Type | Required | Description |
--------------- |--------|----------|---------------------|
...RefreshControlProps | | no | props of RefreshControl |

$3

#### useTabView
`js
// wrap brefore use this hook
const { status, topScrollPosition } = useTabView();

useAnimatedReaction(
() => status.value,
(status) => {
console.log(status);
},
[]
);
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library