ashrithks / Rn Collapsing Tab Bar
Licence: mit
Collapsing header with tabs for react native
Stars: ✭ 71
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Rn Collapsing Tab Bar
Bekcurvetabbar
Full Customizable Tabbar with IBInspectables
Stars: ✭ 144 (+102.82%)
Mutual labels: component, tabbar
Prelodr
A simple Material preloader inspired by Google Inbox.
Stars: ✭ 68 (-4.23%)
Mutual labels: component
Horsey
🐴 Progressive and customizable autocomplete component
Stars: ✭ 1,146 (+1514.08%)
Mutual labels: component
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-14.08%)
Mutual labels: component
Made With Love
🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics
Stars: ✭ 67 (-5.63%)
Mutual labels: component
Vue Seamless Scroll
🔰A simple, seamless scrolling for Vue.js vue无缝滚动component
Stars: ✭ 1,106 (+1457.75%)
Mutual labels: component
French Press Editor
☕ An offline-first rich text editor component.
Stars: ✭ 69 (-2.82%)
Mutual labels: component
Vue Autonumeric
A Vue.js component that wraps the awesome autoNumeric input formatter library
Stars: ✭ 68 (-4.23%)
Mutual labels: component
Daggraph
Dagger dependency graph generator for Android Developers
Stars: ✭ 1,140 (+1505.63%)
Mutual labels: component
Selectivity
Modular and light-weight selection library
Stars: ✭ 1,113 (+1467.61%)
Mutual labels: component
Security Http
Security provides an infrastructure for sophisticated authorization systems, which makes it possible to easily separate the actual authorization logic from so called user providers that hold the users credentials. It is inspired by the Java Spring framework.
Stars: ✭ 1,146 (+1514.08%)
Mutual labels: component
Security Guard
The Guard component brings many layers of authentication together, making it much easier to create complex authentication systems where you have total control.
Stars: ✭ 1,157 (+1529.58%)
Mutual labels: component
Class Loader
[DEPRECATED] The ClassLoader component provides tools to autoload your classes and cache their locations for performance.
Stars: ✭ 1,131 (+1492.96%)
Mutual labels: component
React Frame Component
Render your React app to an iFrame
Stars: ✭ 1,163 (+1538.03%)
Mutual labels: component
Utils
🛠 Lightweight utilities for string & array manipulation, image handling, safe JSON encoding/decoding, validation, slug or strong password generating etc.
Stars: ✭ 1,158 (+1530.99%)
Mutual labels: component
rn-collapsing-tab-bar
For Collapsing tabbar, see CollapseExample in example folder.
Expo Link
https://snack.expo.io/By0FEomKf
This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple JavaScript-only implementation of it for React Native. For more information about how the animations behind this work, check out the Rebound section of the React Native Animation Guide
Thanks to , https://github.com/skv-headless/react-native-scrollable-tab-view
Add it to your project
- Run
npm install rn-collapsing-tab-bar --save
var ScrollableTabView = require('rn-collapsing-tab-bar');
Basic usage
var ScrollableTabView = require('rn-collapsing-tab-bar');
var App = React.createClass({
render() {
return (
<ScrollableTabView>
<ReactPage tabLabel="React" />
<FlowPage tabLabel="Flow" />
<JestPage tabLabel="Jest" />
</ScrollableTabView>
);
}
});
DEMO
Injecting a custom tab bar
Suppose we had a custom tab bar called CustomTabBar
, we would inject
it into our ScrollableTabView
like this:
var ScrollableTabView = require('rn-collapsing-tab-bar');
var CustomTabBar = require('./CustomTabBar');
var App = React.createClass({
render() {
return (
<ScrollableTabView renderTabBar={() => <CustomTabBar someProp={'here'} />}>
<ReactPage tabLabel="React" />
<FlowPage tabLabel="Flow" />
<JestPage tabLabel="Jest" />
</ScrollableTabView>
);
}
});
Props
-
renderTabBar
(Function:ReactComponent) - accept 1 argumentprops
and should return a component to use as the tab bar. The component hasgoToPage
,tabs
,activeTab
andref
added to the props, and should implementsetAnimationValue
to be able to animate itself along with the tab content. You can manually pass theprops
to the TabBar component. -
tabBarPosition
(String) Defaults to"top"
.-
"bottom"
to position the tab bar below content. -
"overlayTop"
or"overlayBottom"
for a semitransparent tab bar that overlays content. Custom tab bars must consume a style prop on their outer element to support this feature:style={this.props.style}
.
-
-
onChangeTab
(Function) - function to call when tab changes, should accept 1 argument which is an Object containing two keys:i
: the index of the tab that is selected,ref
: the ref of the tab that is selected -
onScroll
(Function) - function to call when the pages are sliding, should accept 1 argument which is an Float number representing the page position in the slide frame. -
locked
(Bool) - disables horizontal dragging to scroll between tabs, default is false. -
initialPage
(Integer) - the index of the initially selected tab, defaults to 0 === first tab. -
page
(Integer) - set selected tab -
children
(ReactComponents) - each top-level child component should have atabLabel
prop that can be used by the tab bar component to render out the labels. The default tab bar expects it to be a string, but you can use anything you want if you make a custom tab bar. -
tabBarUnderlineStyle
(View.propTypes.style) - style of the default tab bar's underline. -
tabBarBackgroundColor
(String) - color of the default tab bar's background, defaults towhite
-
tabBarActiveTextColor
(String) - color of the default tab bar's text when active, defaults tonavy
-
tabBarInactiveTextColor
(String) - color of the default tab bar's text when inactive, defaults toblack
-
tabBarTextStyle
(Object) - Additional styles to the tab bar's text. Example:{fontFamily: 'Roboto', fontSize: 15}
-
style
(View.propTypes.style) -
contentProps
(Object) - props that are applied to rootScrollView
/ViewPagerAndroid
. Note that overriding defaults set by the library may break functionality; see the source for details. -
scrollWithoutAnimation
(Bool) - on tab press change tab without animation. -
scrollToTopAnimation
(Bool) - setting animation scroll to top when user change tab. -
prerenderingSiblingsNumber
(Integer) - pre-render nearby # sibling,Infinity
=== render all the siblings, default to 0 === render current page.
MIT Licensed
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].