Skip to content

ref: the imperative API ​

CollapsibleTabView and CollapsibleTabsShell accept a ref of type CollapsibleTabsRef.

tsx
import { useRef } from 'react';
import type { CollapsibleTabsRef } from 'react-native-collapsible-tabs-native';

const tabs = useRef<CollapsibleTabsRef>(null);

<CollapsibleTabView ref={tabs} … />

tabs.current?.scrollToTop();                     // active page → top, header comes back
tabs.current?.scrollToTop({ index: 1, animated: false });
tabs.current?.setIndex(2, { animated: false });  // jump without the pager animation
tabs.current?.collapse();                        // header (and unpinned tab bar) away
tabs.current?.expand();
methodwhat it does
scrollToTop({ index?, animated? })scroll a page's list to its top (default: the active page). The "tap the active tab again" affordance
setIndex(index, { animated? })move the pager; fires onIndexChange exactly like a swipe, so your controlled index stays the source of truth. Exists for the animated: false jump a prop change cannot express
collapse({ animated? })scroll the active list until the bands are fully collapsed
expand({ animated? })bring the bands back. 'classic' scrolls the list to its top (the header mirrors it); 'direction' animates the header alone, which that mode allows

animated defaults to true everywhere.

Through the engine, not around it ​

Every method goes through the collapse engine: the header is derived from the active list's scroll position, so these move the list and let the header follow rather than moving the header on its own, which would leave a gap under the tab bar. allowFullCollapse guarantees even a short tab can honour collapse().

In 'direction' mode, collapse() lands the bands exactly on the collapse point once the list can hold it, and expand() reveals the header in place without moving the list, because that mode allows the header to be open over deep content. Use scrollToTop() for "go to the top and reveal".

Where the ref lives ​

The ref is a Fabric command surface; there is nothing to read back from it. To observe positions, use the per-frame events.

Released under the MIT License.