React-native-collapsable-tabview NPM

react-native-collapsable-tabview

This is collapsable tabview package

Installation

Dependencies

yarn add react-native-reanimated react-native-pager-view @shopify/flash-list

yarn add react-native-collapsable-tabview

Basic Usage

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

const TabItem = memo(function TabItem({ item, ...props }: IRenderTabBarItem) {
  return (
    <TouchableOpacity {...props}>
      <Text>{item}</Text>
    </TouchableOpacity>
  );
});

const renderTabItem = (props: IRenderTabBarItem) => {
  return <TabItem {...props} />;
};

export default function App() {
  return (
    <TabRoot>
      <TabHeader>
        <TabBar renderItem={renderTabItem}/>
      </TabHeader>
      <TabPager>
        <TabView label={'Hello'}>
          <TabScrollView>
            <YourScrollView/>
          </TabScrollView>
        </TabView>
        <TabView label={'Hi'}>
          <TabFlashList
            renderItem={_ => <Text>Item</Text>}
            data={[1, 2]}
          />
        </TabView>
      </TabPager>
    </TabRoot>
  )
}

Multiple Tab Bar Usage

<TabRoot>
  <TabHeader>
    <TabBar renderItem={renderTabItem} />
  </TabHeader>
  <TabPager>
    <TabView label={'Hello'}>
      <TabHeader>
        <TabBar renderItem={renderTabItem} />
      </TabHeader>
      <TabPager>
        <TabView label={'Item 1'}>
          <TabScrollView>
            <YourScrollView/>
          </TabScrollView>
        </TabView>
        <TabView label={'Item 2'}>
          <TabScrollView>
            <YourScrollView/>
          </TabScrollView>
        </TabView>
      </TabPager>
    </TabView>
    <TabView label={'Hi'}>
      <TabFlashList
        renderItem={_ => <Text>Item</Text>}
        data={[1, 2]}
      />
    </TabView>
  </TabPager>
</TabRoot>

API

TabHeader

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

TabBar

type IRenderTabBarItem = {
  item: string;
  index: number;
  active: Readonly<SharedValue<number>>;
  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

TabPager

Methods

Name	Type	Description
goToPage	(index: number) => void	go to page

Props

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

TabView

Props

Name	Type	Required	Description
label	string	Yes	label of tab item

TabScrollView

Props

Name	Type	Required	Description
...ScrollViewProps		no	props of ScrollView

TabFlashList

Props

Name	Type	Required	Description
...FlashListProps		no	props of FlashList

TabRefreshControl

Props

Name	Type	Required	Description
...RefreshControlProps		no	props of RefreshControl

Hooks

useTabView

// wrap <TabView> brefore use this hook
const { status, topScrollPosition } = useTabView();

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