![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 ( // 1️⃣ (Required) // 2️⃣ (Required) // 3️⃣ (Optional) ) } 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 ( {tabIndex === 0 && } {tabIndex === 1 && } ) } ``` `FirstTab.tsx` ---------- ```jsx const FirstTab = () => { return ( <> ) } ``` **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! 🐧

collappsible

React Native Collapsible

Join Our Newsletter. No Spam, Only the good stuff.