https://github.com/agontuk/react-native-collapsible-toolbar
Pure JS based collapsible toolbar for react native on Android and iOS
https://github.com/agontuk/react-native-collapsible-toolbar
android collapsible collapsible-navbar ios react react-native toolbar
Last synced: about 1 year ago
JSON representation
Pure JS based collapsible toolbar for react native on Android and iOS
- Host: GitHub
- URL: https://github.com/agontuk/react-native-collapsible-toolbar
- Owner: Agontuk
- License: mit
- Created: 2017-10-10T20:42:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:28:52.000Z (over 3 years ago)
- Last Synced: 2024-04-13T19:50:59.133Z (about 2 years ago)
- Topics: android, collapsible, collapsible-navbar, ios, react, react-native, toolbar
- Language: JavaScript
- Homepage:
- Size: 7.33 MB
- Stars: 56
- Watchers: 4
- Forks: 13
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-collapsible-toolbar
Pure JS based collapsible toolbar for react native on Android and iOS.
## Demo
## Installation
```sh
yarn add react-native-collapsible-toolbar
```
## Usage
```javascript
import { Platform } from 'react-native';
import CollapsibleToolbar from 'react-native-collapsible-toolbar';
...
= 21}
toolBarHeight={300}
/>
...
```
## Available props
> Either an image source or a custom toolbar component must be provided
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| collapsedNavBarBackgroundColor | String | '#FFF' | Navbar background color when it's collapsed |
| imageSource | String | - | Image to render as collapsible component |
| onContentScroll | Function | - | The scroll event
| renderContent | Function | **REQUIRED** | Content to render below the collapsible toolbar |
| renderNavBar | Function | **REQUIRED** | Transparent nav bar to render on top of the toolbar |
| renderToolBar | Function | - | Custom toolbar component (will override imageSource) |
| toolBarHeight | Number | 300 | Height of the collpasible toolbar |
| translucentStatusBar | Boolean | false | If true, will adjust the nav bar position for Android |
All the [ScrollView props](https://facebook.github.io/react-native/docs/scrollview.html) are also supported.