React Native Collapsible
Tags: collappsible, reactnative, flatlist, scrollview
Published: 2021-08-15 05:42:41

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eptz750l4ha4dontp27q.gif)

🚀 [react-native-collapsible](https://github.com/r0b0t3d/react-native-collapsible) 

## 1. Key features:

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

## 2. Usage

```jsx
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`
----------
```jsx
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`
----------
```jsx
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](https://github.com/r0b0t3d/react-native-collapsible). 

Happy coding! 🐧