feat: forward ref for flatlist and scrollview

.eslintrc.js

@@ -11,9 +11,10 @@ module.exports = {
     // 'react-native/no-color-literals': 'warn',
     // 'react-native/no-raw-text': 'warn',
     // 'react-native/no-single-element-style-arrays': 'warn',
+    'import/no-default-export': 'error',
   },
   plugins: ['react-native-globals', 'react-native'],
-  extends: 'universe/native',
+  extends: ['universe/native'],
   env: {
     'react-native-globals/all': true,
   },

README.md

@@ -80,12 +80,7 @@ Then, add Reanimated v2, [follow the official installation guide](https://docs.s
 ```tsx
 import React from 'react'
 import { View, StyleSheet, ListRenderItem } from 'react-native'
-import {
-  RefComponent,
-  ContainerRef,
-  createCollapsibleTabs,
-} from 'react-native-collapsible-tab-view'
-import { useAnimatedRef } from 'react-native-reanimated'
+import { createCollapsibleTabs } from 'react-native-collapsible-tab-view'
 
 type TabNames = 'A' | 'B'
 
@@ -94,24 +89,17 @@ const { useTabsContext, ...Tabs } = createCollapsibleTabs<TabNames>()
 const HEADER_HEIGHT = 250
 
 const Example: React.FC = () => {
-  const containerRef = useAnimatedRef<ContainerRef>()
-  const tabARef = useAnimatedRef<RefComponent>()
-  const tabBRef = useAnimatedRef<RefComponent>()
-
-  const [refMap] = React.useState({
-    A: tabARef,
-    B: tabBRef,
-  })
-
   return (
     <Tabs.Container
-      containerRef={containerRef}
       HeaderComponent={Header}
       headerHeight={HEADER_HEIGHT} // optional
-      refMap={refMap}
     >
-      <ScreenA />
-      <ScreenB />
+      <Tabs.Tab name="A">
+        <ScreenA />
+      </Tabs.Tab>
+      <Tabs.Tab name="B">
+        <ScreenB />
+      </Tabs.Tab>
     </Tabs.Container>
   )
 }
@@ -217,35 +205,21 @@ use like this:
 Basic usage looks like this:
 
 ```tsx
-import {
-   RefComponent,
-   ContainerRef,
-   TabBarProps,
-} from 'react-native-collapsible-tab-view'
-import { useAnimatedRef } from 'react-native-reanimated'
-
-type MyTabs = 'article' | 'contacts' | 'albums'
-
-const MyHeader: React.FC<TabBarProps<MyTabs>> = (props) => {...}
+import { createCollapsibleTabs } from 'react-native-collapsible-tab-view'
 
-const Example: React.FC<Props> = () => {
-   const containerRef = useAnimatedRef<ContainerRef>()
-   const tab0Ref = useAnimatedRef<RefComponent>()
-   const tab1Ref = useAnimatedRef<RefComponent>()
+type TabNames = 'A' | 'B'
 
-   const [refMap] = React.useState({
-     tab0: tab0Ref,
-     tab1: tab1Ref,
-   })
+const Tabs = createCollapsibleTabs<TabNames>()
 
+const Example = () => {
    return (
-     <Tabs.Container
-       containerRef={containerRef}
-       HeaderComponent={MyHeader}
-       headerHeight={HEADER_HEIGHT} // optional
-       refMap={refMap}
-     >
-       { components returning Tabs.ScrollView || Tabs.FlatList }
+     <Tabs.Container HeaderComponent={MyHeader}>
+       <Tabs.Tab name="A">
+         <ScreenA />
+       </Tabs.Tab>
+       <Tabs.Tab name="B">
+         <ScreenB />
+       </Tabs.Tab>
      </Tabs.Container>
    )
 }
@@ -255,26 +229,47 @@ const Example: React.FC<Props> = () => {
 
 |name|type|default|description|
 |:----:|:----:|:----:|:----:|
-|HeaderComponent|`((props: TabBarProps<string>) => ReactElement<any, string \| ((props: any) => ReactElement<any, any> \| null) \| (new (props: any) => Component<any, any, any>)>) \| undefined`|||
-|TabBarComponent|`((props: TabBarProps<string>) => ReactElement<any, string \| ((props: any) => ReactElement<any, any> \| null) \| (new (props: any) => Component<any, any, any>)>) \| undefined`|`null`||
+|HeaderComponent|`((props: TabBarProps<T>) => React.ReactElement) \| null \| undefined`|||
+|TabBarComponent|`((props: TabBarProps<T>) => React.ReactElement) \| null \| undefined`|`MaterialTabBar`||
 |cancelLazyFadeIn|`boolean \| undefined`|||
 |cancelTranslation|`boolean \| undefined`|||
-|containerRef|`RefObject<ContainerRef>`|||
 |containerStyle|`StyleProp<ViewStyle>`|||
 |diffClampEnabled|`boolean \| undefined`|`false`||
 |headerContainerStyle|`StyleProp<AnimateStyle<ViewStyle>>`|||
 |headerHeight|`number \| undefined`||Is optional, but will optimize the first render.|
 |initialTabName|`string \| undefined`|||
 |lazy|`boolean \| undefined`||If lazy, will mount the screens only when the tab is visited. There is a default fade in transition.|
 |minHeaderHeight|`number \| undefined`|`0`|Header minimum height when collapsed|
-|onIndexChange|`OnTabChangeCallback<string> \| undefined`||Callback fired when the index changes. It receives the previous and current index and tabnames.|
-|pagerProps|`Pick<FlatListProps<number>, "ItemSeparatorComponent" \| "ListEmptyComponent" \| "ListFooterComponent" \| "ListFooterComponentStyle" \| "ListHeaderComponent" \| ... 128 more ... \| "persistentScrollbar"> \| undefined`||Props passed to the horiztontal flatlist. If you want for example to disable swiping, you can pass `{ scrollEnabled: false }`|
-|refMap|`Record<string, Ref>`|||
+|onIndexChange|`(data: { prevIndex: number index: number prevTabName: T tabName: T }) => void`||Callback fired when the index changes. It receives the previous and current index and tabnames.|
+|pagerProps|`Omit<FlatListProps<number>, 'data' \| 'keyExtractor' \| 'renderItem' \| 'horizontal' \| 'pagingEnabled' \| 'onScroll' \| 'showsHorizontalScrollIndicator' \| 'getItemLayout'>`||Props passed to the horiztontal flatlist. If you want for example to disable swiping, you can pass `{ scrollEnabled: false }`|
 |snapEnabled|`boolean \| undefined`|`false`||
 |snapThreshold|`number \| undefined`|`0.5`|Percentage of header height to make the snap effect. A number between 0 and 1.|
 |tabBarHeight|`number \| undefined`||Is optional, but will optimize the first render.|
 
 
+### Tabs.Tab
+
+Wrap your screens with `Tabs.Tab`. Basic usage looks like this:
+
+```tsx
+<Tabs.Container ...>
+  <Tabs.Tab name="A" label="First Tab">
+   <ScreenA />
+  </Tabs.Tab>
+  <Tabs.Tab name="B">
+   <ScreenA />
+  </Tabs.Tab>
+</Tabs.Container>
+```
+
+#### Props
+
+|name|type|
+|:----:|:----:|
+|label|`string \| undefined`|
+|name|`string`|
+
+
 ### Tabs.Lazy
 
 Typically used internally, but if you want to mix lazy and regular screens you can wrap the lazy ones with this component.
@@ -309,28 +304,18 @@ const { focusedTab, ...rest } = useTabsContext()
 
 |name|type|default|description|
 |:----:|:----:|:----:|:----:|
-|accDiffClamp|`SharedValue<number>`|||
-|accScrollY|`SharedValue<number>`|||
+|accDiffClamp|`SharedValue<number>`||DiffClamp value. It's the current visible header height if `diffClampEnabled={true}`.|
 |containerHeight|`number \| undefined`|||
 |diffClampEnabled|`boolean`|`false`||
-|endDrag|`SharedValue<number>`||Used internally.|
 |focusedTab|`SharedValue<string>`||Name of the current focused tab.|
 |headerHeight|`number`|||
-|headerScrollDistance|`SharedValue<number>`|||
-|index|`SharedValue<number>`|||
-|indexDecimal|`SharedValue<number>`|||
-|isGliding|`SharedValue<boolean>`|||
-|isScrolling|`SharedValue<number>`|||
-|isSnapping|`SharedValue<boolean>`|||
-|offset|`SharedValue<number>`|||
-|oldAccScrollY|`SharedValue<number>`|||
-|refMap|`Record<string, Ref>`|||
-|scrollX|`SharedValue<number>`||Scroll x position of the tabs container.|
-|scrollY|`SharedValue<number[]>`|||
+|index|`SharedValue<number>`||Current index of the pager.|
+|indexDecimal|`SharedValue<number>`||Index value, including decimal points. Use this to interpolate tab indicators.|
+|refMap|`Record<ReactText, Ref<RefComponent>>`||Object containing the ref of each scrollable component.|
+|scrollY|`SharedValue<number[]>`||Array of the scroll y position of each tab.|
 |scrollYCurrent|`SharedValue<number>`||Scroll position of current tab.|
 |snapEnabled|`boolean`|`false`||
 |snapThreshold|`number`|`0.5`||
-|snappingTo|`SharedValue<number>`||Used internally.|
 |tabBarHeight|`number`|||
 |tabNames|`SharedValue<string[]>`||Tab names, same as the keys of `refMap`.|
 
@@ -356,63 +341,44 @@ You can use this to get the progessViewOffset and pass to the refresh control of
 ### MaterialTabBar
 
 Basic usage looks like this:
+
 ```tsx
-import {
-  RefComponent,
-  ContainerRef,
-  TabBarProps,
-} from 'react-native-collapsible-tab-view'
-import { useAnimatedRef } from 'react-native-reanimated'
-type MyTabs = 'article' | 'contacts' | 'albums'
-const MyHeader: React.FC<TabBarProps<MyTabs>> = (props) => {...}
-const Example: React.FC<Props> = () => {
-  const containerRef = useAnimatedRef<ContainerRef>();
-  const tab0Ref = useAnimatedRef<RefComponent>();
-  const tab1Ref = useAnimatedRef<RefComponent>();
-  const [refMap] = React.useState({
-    tab0: tab0Ref,
-    tab1: tab1Ref,
-  });
-  return (
-    <Tabs.Container
-      containerRef={containerRef}
-      HeaderComponent={MyHeader}
-      headerHeight={HEADER_HEIGHT} // optional
-      refMap={refMap}
-      TabBarComponent={(props) => (
-        <MaterialTabBar
-          {...props}
-          activeColor="red"
-          inactiveColor="yellow"
-          labelStyle={{ fontSize: 14 }}
-        />
-      )}
-    >
-      {components returning Tabs.ScrollView || Tabs.FlatList}
-    </Tabs.Container>
-  );
-};
+<Tabs.Container
+   ...
+   TabBarComponent={(props) => (
+     <MaterialTabBar
+       {...props}
+       activeColor="red"
+       inactiveColor="yellow"
+       inactiveOpacity={1}
+       labelStyle={{ fontSize: 14 }}
+     />
+   )}
+>
+   {...}
+</Tabs.Container>
 ```
 
 #### Props
 
 |name|type|default|description|
 |:----:|:----:|:----:|:----:|
-|TabItemComponent|`((props: MaterialTabItemProps<any>) => ReactElement<any, string \| ((props: any) => ReactElement<any, any> \| null) \| (new (props: any) => Component<any, any, any>)>) \| undefined`|`null`|React component to render as tab bar item|
+|TabItemComponent|`(props: MaterialTabItemProps<N>) => React.ReactElement`|`MaterialTabItem`|React component to render as tab bar item|
 |activeColor|`string \| undefined`||Color applied to the label when active|
 |containerRef|`RefObject<ContainerRef>`|||
 |contentContainerStyle|`StyleProp<ViewStyle>`||Style to apply to the inner container for tabs|
-|focusedTab|`SharedValue<any>`|||
-|getLabelText|`((name: any) => string) \| undefined`|`(name) => name.toUpperCase()`|Function to compute the tab item label text|
+|focusedTab|`SharedValue<T>`|||
+|getLabelText|`((name: T) => string) \| undefined`|`(name) => String(name).toUpperCase()`|Function to compute the tab item label text|
 |inactiveColor|`string \| undefined`||Color applied to the label when inactive|
 |index|`SharedValue<number>`|||
 |indexDecimal|`SharedValue<number>`|||
 |indicatorStyle|`StyleProp<AnimateStyle<ViewStyle>>`||Style to apply to the active indicator.|
 |labelStyle|`StyleProp<AnimateStyle<TextStyle>>`||Style to apply to the tab item label|
-|onTabPress|`(name: any) => void`|||
-|refMap|`Record<any, Ref>`|||
+|onTabPress|`(name: T) => void`|||
 |scrollEnabled|`boolean \| undefined`|`false`|Indicates whether the tab bar should contain horizontal scroll, when enabled the tab width is dynamic|
 |style|`StyleProp<ViewStyle>`||Style to apply to the tab bar container.|
+|tabNames|`T[]`|||
+|tabProps|`TabsWithProps<T>`|||
 |tabStyle|`StyleProp<ViewStyle>`||Style to apply to the individual tab items in the tab bar.|
 
 
@@ -431,13 +397,13 @@ Any additional props are passed to the pressable component.
 |indexDecimal|`SharedValue<number>`|||
 |label|`string`|||
 |labelStyle|`StyleProp<AnimateStyle<TextStyle>>`||Style to apply to the tab item label|
-|name|`any`|||
+|name|`T`|||
 |onLayout|`(((event: LayoutChangeEvent) => void) & ((event: LayoutChangeEvent) => void)) \| undefined`||Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}.|
-|onPress|`(name: any) => void`|||
+|onPress|`(name: T) => void`|||
 |pressColor|`string \| undefined`|`#DDDDDD`||
 |pressOpacity|`number \| undefined`|`Platform.OS === 'ios' ? 0.2 : 1`||
 |scrollEnabled|`boolean \| undefined`|||
-|style|`false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<false \| ViewStyle \| RegisteredStyle<ViewStyle> \| null \| undefined> \| ... 15 more ... \| undefined`||Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.|
+|style|`StyleProp<ViewStyle>`||Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.|
 
 
 

documentation/getCoreComponentsAPI.ts

@@ -1,16 +1,20 @@
+import { API, OverrideProps, Prop } from './types'
+
 const fs = require('fs')
 const path = require('path')
 const docgen = require('react-docgen-typescript')
 
 const generateMarkdown = require('./mdGenerator')
+const { maybeOverrideProps } = require('./utils')
 
 const options = {
   savePropValueAsString: true,
-  propFilter: (prop: any, component: any) => {
+  propFilter: (prop: Prop, component: any) => {
     if (
       prop.parent ||
       component.name === 'Tabs.FlatList' ||
-      component.name === 'Tabs.ScrollView'
+      component.name === 'Tabs.ScrollView' ||
+      prop.name.startsWith('_')
     ) {
       return false
     }
@@ -37,6 +41,39 @@ const paths = {
   ),
 }
 
+const overrideProps: OverrideProps = {
+  'Tabs.Container': {
+    HeaderComponent: {
+      type: {
+        name:
+          '((props: TabBarProps<T>) => React.ReactElement) | null | undefined',
+      },
+      defaultValue: null,
+    },
+    TabBarComponent: {
+      type: {
+        name:
+          '((props: TabBarProps<T>) => React.ReactElement) | null | undefined',
+      },
+      defaultValue: { value: 'MaterialTabBar' },
+    },
+    pagerProps: {
+      type: {
+        name:
+          "Omit<FlatListProps<number>, 'data' | 'keyExtractor' | 'renderItem' | 'horizontal' | 'pagingEnabled' | 'onScroll' | 'showsHorizontalScrollIndicator' | 'getItemLayout'>",
+      },
+      defaultValue: null,
+    },
+    onIndexChange: {
+      type: {
+        name:
+          '(data: { prevIndex: number index: number prevTabName: T tabName: T }) => void',
+      },
+      defaultValue: null,
+    },
+  },
+}
+
 // copy createCollapsibleTabs
 const getCoreComponents = () => {
   fs.copyFileSync(paths.createCollapsibleTabs, paths.createCollapsibleTabs_tmp)
@@ -65,7 +102,7 @@ const getCoreComponents = () => {
 
   // export everything
   data +=
-    'export { Container, Lazy, FlatList, ScrollView, UseTabsContext, UseCollapsibleStyle }'
+    'export { Container, Tab, Lazy, FlatList, ScrollView, UseTabsContext, UseCollapsibleStyle }'
 
   return data
 }
@@ -74,7 +111,13 @@ const getCoreComponentsAPI = () => {
   const core = getCoreComponents()
   fs.writeFileSync(paths.createCollapsibleTabs_tmp, core)
   const core_docs = docs.parse(paths.createCollapsibleTabs_tmp)
-  const md = core_docs.map((c: string) => generateMarkdown(c)).join('\n')
+
+  const md = core_docs
+    .map((c: API) => {
+      return generateMarkdown(maybeOverrideProps(c, overrideProps))
+    })
+    .join('\n')
+
   fs.unlink(paths.createCollapsibleTabs_tmp, (err: any) => {
     if (err) throw err
   })