DEV Community

Cover image for React Native Collapsible
Tuan Luong
Tuan Luong

Posted on

3 1

React Native Collapsible

Alt Text

🚀 react-native-collapsible

1. Key features:

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

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)
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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}
      />
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

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! 🐧

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay