feat: add imperactive ref handler

example/src/App.tsx

@@ -18,6 +18,7 @@ import DiffClamp from './DiffClamp'
 import DiffClampSnap from './DiffClampSnap'
 import Lazy from './Lazy'
 import QuickStartDemo from './QuickStartDemo'
+import Ref from './Ref'
 import ScrollOnHeader from './ScrollOnHeader'
 import ScrollableTabs from './ScrollableTabs'
 import Snap from './Snap'
@@ -37,6 +38,7 @@ const EXAMPLE_COMPONENTS: ExampleComponentType[] = [
   QuickStartDemo,
   UndefinedHeaderHeight,
   StartOnSpecificTab,
+  Ref,
 ]
 
 const ExampleList: React.FC<object> = () => {

example/src/Ref.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { CollapsibleRef } from 'react-native-collapsible-tab-view'
+
+import ExampleComponent from './Shared/ExampleComponent'
+import { buildHeader } from './Shared/Header'
+import { TabNames } from './Shared/Tabs'
+import { ExampleComponentType } from './types'
+
+const title = 'Ref example "jumpToTab" after 1 second'
+
+const Header = buildHeader(title)
+
+const RefExample: ExampleComponentType = () => {
+  const ref = React.useRef<CollapsibleRef<TabNames>>()
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      ref.current?.jumpToTab('contacts')
+      // ref.current?.setIndex(2)
+      // ref.current?.getCurrentIndex()
+      // ref.current?.getFocusedTab()
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return <ExampleComponent ref={ref} HeaderComponent={Header} />
+}
+
+RefExample.title = title
+
+export default RefExample

example/src/Shared/ExampleComponent.tsx

@@ -3,6 +3,7 @@ import {
   CollapsibleProps,
   RefComponent,
   ContainerRef,
+  CollapsibleRef,
 } from 'react-native-collapsible-tab-view'
 import { useAnimatedRef } from 'react-native-reanimated'
 
@@ -16,30 +17,33 @@ type Props = {
   emptyContacts?: boolean
 } & Partial<CollapsibleProps<TabNames>>
 
-const Example: React.FC<Props> = ({ emptyContacts, ...props }) => {
-  const containerRef = useAnimatedRef<ContainerRef>()
-  const albumsRef = useAnimatedRef<RefComponent>()
-  const articleRef = useAnimatedRef<RefComponent>()
-  const contactsRef = useAnimatedRef<RefComponent>()
+const Example = React.forwardRef<CollapsibleRef<TabNames>, Props>(
+  ({ emptyContacts, ...props }, ref) => {
+    const containerRef = useAnimatedRef<ContainerRef>()
+    const albumsRef = useAnimatedRef<RefComponent>()
+    const articleRef = useAnimatedRef<RefComponent>()
+    const contactsRef = useAnimatedRef<RefComponent>()
 
-  const [refMap] = React.useState({
-    article: articleRef,
-    albums: albumsRef,
-    contacts: contactsRef,
-  })
+    const [refMap] = React.useState({
+      article: articleRef,
+      albums: albumsRef,
+      contacts: contactsRef,
+    })
 
-  return (
-    <Tabs.Container
-      containerRef={containerRef}
-      headerHeight={HEADER_HEIGHT}
-      refMap={refMap}
-      {...props}
-    >
-      <Article />
-      <Albums />
-      <Contacts emptyContacts={emptyContacts} />
-    </Tabs.Container>
-  )
-}
+    return (
+      <Tabs.Container
+        ref={ref}
+        containerRef={containerRef}
+        headerHeight={HEADER_HEIGHT}
+        refMap={refMap}
+        {...props}
+      >
+        <Article />
+        <Albums />
+        <Contacts emptyContacts={emptyContacts} />
+      </Tabs.Container>
+    )
+  }
+)
 
 export default Example

example/src/Shared/Header.tsx

@@ -32,10 +32,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#2196f3',
     justifyContent: 'center',
     alignItems: 'center',
+    padding: 16,
   },
   text: {
     color: 'white',
     fontSize: 24,
+    textAlign: 'center',
   },
 })