All Projects → Agontuk → React Native Collapsible Toolbar

Agontuk / React Native Collapsible Toolbar

Licence: mit
Pure JS based collapsible toolbar for react native on Android and iOS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Collapsible Toolbar

Ynexpandablecell
✨ Awesome expandable, collapsible tableview cell for iOS written in Swift 4
Stars: ✭ 445 (+790%)
Mutual labels:  collapsible
Materialdesignsamples
Material Design 系列控件samples,讲了Material Design 系列新控件的使用方法和一些场景示例,使用详情请看对应博客,持续更新中...
Stars: ✭ 900 (+1700%)
Mutual labels:  toolbar
React Collapsing Table
react-collapsing-table: a React rewrite of the jQuery table plugin from "datatables.net". Inspired by a lack of similar table behaviors, notably collapsibility and responsivity.
Stars: ✭ 21 (-58%)
Mutual labels:  collapsible
Immersivedetailsample
A sample application show how to realize immersive parallax effect header like Google Play Store
Stars: ✭ 457 (+814%)
Mutual labels:  toolbar
Androidnavigation
A library managing navigation, nested Fragment, StatusBar, Toolbar for Android
Stars: ✭ 636 (+1172%)
Mutual labels:  toolbar
Android Titlebar
🔥 通用,功能全面的自定义标题栏,支持沉浸式标题栏,颜色渐变,miui9
Stars: ✭ 925 (+1750%)
Mutual labels:  toolbar
Uiwidget
一个集成TabLayout、UIAlertDialog、UIActionSheetDialog、UIProgressDialog、TitleBarView(自带沉浸式标题栏)、CollapsingTitleBarLayout、RadiusView(圆角及状态背景设置View解放shape文件)、KeyboardHelper(软键盘控制及遮挡控制类)、StatusViewHelper(状态栏沉浸帮助类)、NavigationViewHelper(导航栏沉浸式帮助类)、AlphaViewHelper(View透明度控制帮助类) 等项目常用UI库
Stars: ✭ 400 (+700%)
Mutual labels:  toolbar
Debuguisystem
Create a runtime menu system with buttons and windows for debugging in one line of code.
Stars: ✭ 48 (-4%)
Mutual labels:  toolbar
Multiline Collapsingtoolbar
A modified CollapsingToolbarLayout that can deal with multiline titles
Stars: ✭ 767 (+1434%)
Mutual labels:  toolbar
Awesomebar
Just beautiful
Stars: ✭ 870 (+1640%)
Mutual labels:  toolbar
Toolbar
Awesome autolayout Toolbar. Toolbar is a library for iOS. You can easily create chat InputBar.
Stars: ✭ 458 (+816%)
Mutual labels:  toolbar
Expandablecell
✨ Awesome expandable, collapsible tableview cell for iOS written in Swift 5
Stars: ✭ 559 (+1018%)
Mutual labels:  collapsible
Wsl Windows Toolbar Launcher
Adds linux GUI application menu to a windows toolbar
Stars: ✭ 918 (+1736%)
Mutual labels:  toolbar
Prophiler
PHP Profiler & Developer Toolbar (built for Phalcon)
Stars: ✭ 445 (+790%)
Mutual labels:  toolbar
Easyandroid
一个完整基于kotlin的安卓开发框架,采用了mvvm设计模式。涵盖了: 1、基于retrofit2封装的通过kotlin协程实现的网络框架 2、基于阿里开源router修改的api-router实现项目模块化 3、基于glide的图片加载缓存框架 4、基于room实现的往来数据缓存加载 5、基于step实现的数据异步提交 6、基于PreferenceHolder实现的本地数据快速存储 7、基于mlist实现的简单复杂列表的快速开发扩展 8、定制的toolbar可以自适应异形屏,挖孔屏,水滴屏等等。。 本框架几乎涵盖了开发所需的所有模块组件。简单fork之后就可以基于框架快速开发。
Stars: ✭ 33 (-34%)
Mutual labels:  toolbar
React Collapsible
React component to wrap content in Collapsible element with trigger to open and close.
Stars: ✭ 402 (+704%)
Mutual labels:  collapsible
Android Animated Menu Items
The example Android project of animated menu items in toolbar
Stars: ✭ 923 (+1746%)
Mutual labels:  toolbar
Octopatcher
Arrgh Some Patchy Goodness to GitHub!
Stars: ✭ 49 (-2%)
Mutual labels:  collapsible
Titlebar
Android 标题栏框架,从此布局属性不用记
Stars: ✭ 980 (+1860%)
Mutual labels:  toolbar
Findergo
🐢 Open terminal quickly from Finder
Stars: ✭ 862 (+1624%)
Mutual labels:  toolbar

react-native-collapsible-toolbar

Pure JS based collapsible toolbar for react native on Android and iOS.

Demo

Installation

yarn add react-native-collapsible-toolbar

Usage

import { Platform } from 'react-native';
import CollapsibleToolbar from 'react-native-collapsible-toolbar';

...
<CollapsibleToolbar
    renderContent={this.renderContent}
    renderNavBar={this.renderNavBar}
    renderToolBar={this.renderToolBar}
    imageSource='https://lorempixel.com/400/300/'
    collapsedNavBarBackgroundColor='#009688'
    translucentStatusBar={Platform.Version >= 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 are also supported.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].