https://github.com/r0b0t3d/react-native-collapsible
Fully customizable collapsible views
https://github.com/r0b0t3d/react-native-collapsible
collapsible collapsible-accordion collapsible-headers
Last synced: about 2 months ago
JSON representation
Fully customizable collapsible views
- Host: GitHub
- URL: https://github.com/r0b0t3d/react-native-collapsible
- Owner: r0b0t3d
- License: mit
- Created: 2021-06-20T14:13:06.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-16T04:40:30.000Z (over 1 year ago)
- Last Synced: 2025-04-14T01:13:27.667Z (about 2 months ago)
- Topics: collapsible, collapsible-accordion, collapsible-headers
- Language: TypeScript
- Homepage:
- Size: 9.56 MB
- Stars: 48
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @r0b0t3d/react-native-collapsible
Fully customizable collapsible views
## Installation
```sh
yarn add @r0b0t3d/react-native-collapsible
```
I am using `reanimated 2` for animation. So you should install and follow instruction here to setup your project [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/installation)
## Key features
1️⃣ Support FlatList/ScrollView
2️⃣ Support sticky header
3️⃣ Can have multiple sticky headers
4️⃣ Easy to customize
## Usage
### 1. Basic
```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) Outermost container
// 2️⃣ (Required) Header view
// 3️⃣ Sticky view
)
}
export default withCollapsibleContext(MyComponent); // 5️⃣ (Required)wrap your component with `withCollapsibleContext`
```
### 2. Advance
We support multiple `CollapsibleHeaderContainer` and `StickyView`. It come useful in case you need to break your code into smaller component.
`Parent.tsx`
```jsx
const Parent = () => {
const [tabIndex, setTabIndex] = useState(0)
return (
{tabIndex === 0 && }
{tabIndex === 1 && }
)
}
```
`FirstTab.tsx`
```jsx
const FirstTab = () => {
return (
<>
>
)
}
```
## Showcases
```
Note: Feel free to add your showcase here by a PR
```
| App | Gif |
| ----------- | ----------- |
| [ANU Global](https://apps.apple.com/us/app/anu-global/id1540735849) | 
|
## Breaking changes
### 1.0.0
- Removed
- `persistHeaderHeight`
- `contentMinHeight`
- Added
- `CollapsibleContainer`
- `StickyView`
## Tips
#### 1. Trigger scroll when scroll inside `CollapsibleHeaderContainer`
- If your header doesn't contains touchable component, try `pointerEvents="none"`
```jsx
Header
```
- If your header contains touchable componet, try to set `pointerEvents="box-none"` for every nested views that contains touchable, otherwise use `pointerEvents="none"`
```jsx
// <-- this is parent view
// <-- this view doesn't contain touchable component
Header
// <-- this view contain touchable component
Some text
Button
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT