An Interest In:
Web News this Week
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
React Native Collapsible
1. Key features:
1 Support FlatList/ScrollView2 Support sticky header3 Can have multiple sticky headers4 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/hideSearchInput
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!
Original Link: https://dev.to/tuanluong19/react-native-collapsible-3akg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To