React Native Collapsible

#collappsible #reactnative #flatlist #scrollview

1. Key features:

1️⃣ Support FlatList/ScrollView
2️⃣ Support sticky header
3️⃣ Can have multiple sticky headers
4️⃣ Easy to customize

2. Usage

import {
  CollapsibleContainer,
  CollapsibleFlatList,
  CollapsibleScrollView,
} from '@r0b0t3d/react-native-collapsible';

// ...
const MyComponent = () => {
  const {
    collapse,   // <-- Collapse header
    expand,     // <-- Expand header
    scrollY,    // <-- Animated scroll position. In case you need to do some animation in your header or somewhere else
  } = useCollapsibleContext();

  return (
    <CollapsibleContainer>          // 1️⃣ (Required) 
      <CollapsibleHeaderContainer>  // 2️⃣ (Required) 
        <!-- Your header view -->
        <StickyView>                // 3️⃣ (Optional)
          <!-- Your sticky view goes here -->
        </StickyView>
      </CollapsibleHeaderContainer>
      <CollapsibleFlatList          // 4️⃣ (Required)
        data={data}
        renderItem={renderItem}
        headerSnappable={false}
      />
    </CollapsibleContainer>
  )
}

export default withCollapsibleContext(MyComponent); // 5️⃣ (Required)

Explanation:
1️⃣ CollapsibleContainer (Required)

This is the outer most container that contains other views

2️⃣ CollapsibleHeaderContainer (Required)

Your header view must go inside here

3️⃣ StickyView (Optional)

Define view that will be sticked at the top when scrolling

4️⃣ CollapsibleFlatList (Required)

This is your scroll view, it can be CollapsibleFlatList or CollapsibleScrollView

5️⃣ withCollapsibleContext (Required)

You need to wrap your component with this HOC

Advanced

In this example, we have 2 tabs. In first tab, we also have SearchInput that will also stick to top when scrolling.

Note: You can use single CollapsibleHeaderContainer and conditional show/hide SearchInput when tab selected. But breaking it into small component make you easier control your logic.

`Parent.tsx`

const Parent = () => {
  const [tabIndex, setTabIndex] = useState(0)

  return (
    <CollapsibleContainer>
      <CollapsibleHeaderContainer>
        <!-- Your header view -->
        <StickyView>
          <TabView currentTab={tabIndex} onTabChange={setTabIndex} />
        </StickyView>
      </CollapsibleHeaderContainer>

      {tabIndex === 0 && <FirstTab />}
      {tabIndex === 1 && <SecondTab />}
    </CollapsibleContainer>
  )
}

`FirstTab.tsx`

const FirstTab = () => {
  return (
    <>
      <CollapsibleHeaderContainer>
        <!-- 😍 You can have another headerview in each tab where you can add another StickyView there -->
        <StickyView>
          <!-- Your sticky view goes here -->
        </StickyView>
        <View />
        <StickyView>
          <SearchInput />
        </StickyView>
      </CollapsibleHeaderContainer>
      <CollapsibleFlatList
        data={data}
        renderItem={renderItem}
      />
    </>
  )
}

Explanation:
In the FirstTab.tsx, you will have another CollapsibleHeaderContainer and StickyView that contains your SearchInput. Note that, this CollapsibleHeaderContainer must be same level with the outer one. That's why we use Fragment in FirstTab

To learn more or want to contribute, please head over to the repo.

Happy coding! 🐧

DEV Community