feat: SectionList support (without stickyHeaders for now) (#201)

PedroBern · Oct 3, 2021 · 1571a62 · 1571a62
1 parent e5a7f86
commit 1571a62
Show file tree

Hide file tree

Showing 24 changed files with 1,783 additions and 1,460 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,4 +3,4 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "semi": false
-}
+}
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 # react-native-collapsible-tab-view
 
-[![Downloads][downloads-badge]][downloads]
 [![Build Status][build-badge]][build]
 [![Version][version-badge]][package]
 [![MIT License][license-badge]][license]
@@ -18,6 +17,7 @@
     - [Tabs.Container](#tabscontainer)
     - [Tabs.Lazy](#tabslazy)
     - [Tabs.FlatList](#tabsflatlist)
+    - [Tabs.SectionList](#tabssectionlist)
     - [Tabs.ScrollView](#tabsscrollview)
     - [Ref](#ref)
   - [Hooks](#hooks)
@@ -30,7 +30,7 @@
     - [MaterialTabItem](#materialtabitem)
 - [Known issues](#known-issues)
   - [Android FlatList pull to refresh](#android-flatlist-pull-to-refresh)
-  - [iOS FlatList stickyHeaderIndices](#ios-flatlist-stickyheaderindices)
+  - [iOS FlatList/ SectionList stickyHeaders](#ios-flatlist-stickyheaderindices)
   - [ref.setIndex](#refsetIndex)
 - [Alternative libraries](#alternative-libraries)
 - [Contributing](#contributing)
@@ -91,6 +91,9 @@ import { Tabs } from 'react-native-collapsible-tab-view'
 
 const HEADER_HEIGHT = 250
 
+const DATA = [0, 1, 2, 3, 4]
+const identity = (v: unknown): string => v + ''
+
 const Header = () => {
   return <View style={styles.header} />
 }
@@ -109,9 +112,9 @@ const Example: React.FC = () => {
     >
       <Tabs.Tab name="A">
         <Tabs.FlatList
-          data={[0, 1, 2, 3, 4]}
+          data={DATA}
           renderItem={renderItem}
-          keyExtractor={(v) => v + ''}
+          keyExtractor={identity}
         />
       </Tabs.Tab>
       <Tabs.Tab name="B">
@@ -246,6 +249,10 @@ Use like a regular FlatList.
 
 Use like a regular ScrollView.
 
+### Tabs.SectionList
+
+Use like a regular SectionList.
+
 
 
 ### Ref
@@ -345,9 +352,9 @@ See [this open issue](https://github.com/software-mansion/react-native-reanimate
 
 **Workaround**: see the `Android Shared Pull To Refresh` example in the expo app. You can have a single pull to refresh for the `Tabs.Container`.
 
-## iOS FlatList stickyHeaderIndices
+## iOS FlatList stickyHeaderIndices and iOS SectionList stickySectionHeadersEnabled
 
-When you use the stickyHeaderIndices prop on a FlatList, the sticky elements don't scroll up when the header collapses. This happens only on iOS.
+When you use the stickyHeaderIndices prop on a FlatList or stickySectionHeadersEnabled on a SectionList, the sticky elements don't scroll up when the header collapses. This happens only on iOS.
 
 See [#136](https://github.com/PedroBern/react-native-collapsible-tab-view/issues/136).
 
@@ -399,8 +406,6 @@ yarn docs
 
 <!-- badges -->
 
-[downloads-badge]: https://img.shields.io/npm/dm/react-native-collapsible-tab-view?style=flat-square
-[downloads]: https://www.npmjs.com/package/react-native-collapsible-tab-view
 [build-badge]: https://img.shields.io/circleci/build/github/PedroBern/react-native-collapsible-tab-view/main.svg?style=flat-square
 [build]: https://app.circleci.com/pipelines/github/PedroBern/react-native-collapsible-tab-view
 [version-badge]: https://img.shields.io/npm/v/react-native-collapsible-tab-view.svg?style=flat-square

diff --git a/documentation/README_TEMPLATE.md b/documentation/README_TEMPLATE.md
@@ -17,6 +17,7 @@
     - [Tabs.Container](#tabscontainer)
     - [Tabs.Lazy](#tabslazy)
     - [Tabs.FlatList](#tabsflatlist)
+    - [Tabs.SectionList](#tabssectionlist)
     - [Tabs.ScrollView](#tabsscrollview)
     - [Ref](#ref)
   - [Hooks](#hooks)
@@ -29,7 +30,7 @@
     - [MaterialTabItem](#materialtabitem)
 - [Known issues](#known-issues)
   - [Android FlatList pull to refresh](#android-flatlist-pull-to-refresh)
-  - [iOS FlatList stickyHeaderIndices](#ios-flatlist-stickyheaderindices)
+  - [iOS FlatList/ SectionList stickyHeaders](#ios-flatlist-stickyheaderindices)
   - [ref.setIndex](#refsetIndex)
 - [Alternative libraries](#alternative-libraries)
 - [Contributing](#contributing)
@@ -178,9 +179,9 @@ See [this open issue](https://github.com/software-mansion/react-native-reanimate
 
 **Workaround**: see the `Android Shared Pull To Refresh` example in the expo app. You can have a single pull to refresh for the `Tabs.Container`.
 
-## iOS FlatList stickyHeaderIndices
+## iOS FlatList stickyHeaderIndices and iOS SectionList stickySectionHeadersEnabled
 
-When you use the stickyHeaderIndices prop on a FlatList, the sticky elements don't scroll up when the header collapses. This happens only on iOS.
+When you use the stickyHeaderIndices prop on a FlatList or stickySectionHeadersEnabled on a SectionList, the sticky elements don't scroll up when the header collapses. This happens only on iOS.
 
 See [#136](https://github.com/PedroBern/react-native-collapsible-tab-view/issues/136).
 

diff --git a/documentation/buildDocs.ts b/documentation/buildDocs.ts
@@ -20,6 +20,7 @@ const coreComponents = getComponentPaths([
   'Lazy',
   'FlatList',
   'ScrollView',
+  'SectionList',
 ])
 
 const tabBarComponents = getComponentPaths([
@@ -34,6 +35,7 @@ const docs = docgen.withCustomConfig(tsconfig, {
     if (
       prop.parent ||
       component.name === 'Tabs.FlatList' ||
+      component.name === 'Tabs.SectionList' ||
       component.name === 'Tabs.ScrollView' ||
       prop.name.startsWith('_')
     )
@@ -47,6 +49,7 @@ const docs = docgen.withCustomConfig(tsconfig, {
       case 'Tab':
       case 'Lazy':
       case 'FlatList':
+      case 'SectionList':
       case 'ScrollView':
         return 'Tabs.' + exp.escapedName
 

diff --git a/example/App.tsx b/example/App.tsx
@@ -1,3 +1,3 @@
-import {App} from './src/App'
+import { App } from './src/App'
 
 export default App
diff --git a/example/package.json b/example/package.json
@@ -4,25 +4,25 @@
   "private": true,
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
-    "expo": "^40.0.1",
-    "expo-constants": "~9.3.3",
-    "expo-status-bar": "~1.0.3",
+    "expo": "^42.0.0",
+    "expo-constants": "~11.0.1",
+    "expo-status-bar": "~1.0.4",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
-    "react-native-gesture-handler": "^1.9.0",
-    "react-native-reanimated": "2.0.0-rc.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-reanimated": "~2.2.0",
     "react-native-web": "~0.13.12",
     "use-debounce": "^5.2.0",
     "use-deep-compare": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-native": "^0.63.46",
+    "@types/react": "~16.9.35",
+    "@types/react-dom": "~16.9.8",
+    "@types/react-native": "~0.63.2",
     "babel-preset-expo": "8.3.0",
-    "typescript": "^4.1.3"
+    "typescript": "~4.0.0"
   },
   "scripts": {
     "start": "expo start",

diff --git a/example/src/MinHeaderHeight.tsx b/example/src/MinHeaderHeight.tsx
@@ -11,10 +11,7 @@ const minHeaderHeight = Math.round(HEADER_HEIGHT / 3)
 
 const DefaultExample: ExampleComponentType = () => {
   return (
-    <ExampleComponent
-      renderHeader={Header}
-      minHeaderHeight={minHeaderHeight}
-    />
+    <ExampleComponent renderHeader={Header} minHeaderHeight={minHeaderHeight} />
   )
 }
 

diff --git a/example/src/RevealHeaderOnScroll.tsx b/example/src/RevealHeaderOnScroll.tsx
@@ -9,9 +9,7 @@ const title = 'Reveal Header On Scroll'
 const Header = buildHeader(title)
 
 const DefaultExample: ExampleComponentType = () => {
-  return (
-    <ExampleComponent revealHeaderOnScroll renderHeader={Header} />
-  )
+  return <ExampleComponent revealHeaderOnScroll renderHeader={Header} />
 }
 
 DefaultExample.title = title

diff --git a/example/src/ScrollOnHeader.tsx b/example/src/ScrollOnHeader.tsx
@@ -24,10 +24,7 @@ const NewHeader: React.FC<TabBarProps> = (props) => {
 
 const DefaultExample: ExampleComponentType = () => {
   return (
-    <ExampleComponent
-      renderHeader={NewHeader}
-      headerHeight={HEADER_HEIGHT}
-    />
+    <ExampleComponent renderHeader={NewHeader} headerHeight={HEADER_HEIGHT} />
   )
 }
 

diff --git a/example/src/Shared/Contacts.tsx b/example/src/Shared/Contacts.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import * as Tabs from 'react-native-collapsible-tab-view'
 import Animated, {
+  interpolate,
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated'
@@ -100,7 +101,7 @@ const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />
 const ListEmptyComponent = () => {
   const { top, height } = Tabs.useHeaderMeasurements()
   const translateY = useDerivedValue(() => {
-    return Animated.interpolate(-top.value, [0, height], [-height / 2, 0])
+    return interpolate(-top.value, [0, height], [-height / 2, 0])
   }, [height])
 
   const stylez = useAnimatedStyle(() => {

diff --git a/example/src/Shared/ExampleComponent.tsx b/example/src/Shared/ExampleComponent.tsx
@@ -9,6 +9,7 @@ import Albums from './Albums'
 import Article from './Article'
 import Contacts from './Contacts'
 import { HEADER_HEIGHT } from './Header'
+import SectionContacts from './SectionContacts'
 
 type Props = {
   emptyContacts?: boolean
@@ -27,6 +28,9 @@ const Example = React.forwardRef<CollapsibleRef, Props>(
         <Tabs.Tab name="contacts" label="Contacts">
           <Contacts emptyContacts={emptyContacts} />
         </Tabs.Tab>
+        <Tabs.Tab name="ordered" label="Ordered">
+          <SectionContacts emptyContacts={emptyContacts} />
+        </Tabs.Tab>
       </Tabs.Container>
     )
   }