Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 15, 2021 05:42 am GMT

React Native Collapsible

Alt Text

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/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>  )}

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To