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
CollapsibleHeaderContainerand conditional show/hideSearchInputwhen 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! 🐧
Top comments (0)