Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, {Component} from "react";
import {Animated, Dimensions, Platform, Text, View} from 'react-native';
import {Body, Header, List, ListItem as Item, ScrollableTab, Tab, Tabs, Title} from "native-base";
const NAVBAR_HEIGHT = 56;
const {width: SCREEN_WIDTH} = Dimensions.get("window");
const COLOR = "rgb(45,181,102)";
const TAB_PROPS = {
tabStyle: {width: SCREEN_WIDTH / 2, backgroundColor: COLOR},
activeTabStyle: {width: SCREEN_WIDTH / 2, backgroundColor: COLOR},
textStyle: {color: "white"},
activeTextStyle: {color: "white"}
};
export class CollapsingNav extends Component {
scroll = new Animated.Value(0);
headerY;
constructor(props) {
super(props);
this.headerY = Animated.multiply(Animated.diffClamp(this.scroll, 0, NAVBAR_HEIGHT), -1);
}
render() {
const tabContent = (
<List>{new Array(20).fill(null).map((_, i) => <Item
key={i}><Text>Item {i}</Text></Item>)}</List>);
const tabY = Animated.add(this.scroll, this.headerY);
return (
<View>
{Platform.OS === "ios" &&
<View style={{backgroundColor: COLOR, height: 20, width: "100%", position: "absolute", zIndex: 2}}/>}
<Animated.View style={{
width: "100%",
position: "absolute",
transform: [{
translateY: this.headerY
}],
elevation: 0,
flex: 1,
zIndex: 1,
backgroundColor: COLOR
}}>
<Header style={{backgroundColor: "transparent"}} hasTabs>
<Body>
<Title>
<Text style={{color: "white"}}>
Collapsing Navbar
</Text>
</Title>
</Body>
</Header>
</Animated.View>
<Animated.ScrollView
scrollEventThrottle={1}
bounces={false}
showsVerticalScrollIndicator={false}
style={{zIndex: 0, height: "100%", elevation: -1}}
contentContainerStyle={{paddingTop: NAVBAR_HEIGHT}}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.scroll}}}],
{useNativeDriver: true},
)}
overScrollMode="never">
<Tabs renderTabBar={(props) => <Animated.View
style={[{
transform: [{translateY: tabY}],
zIndex: 1,
width: "100%",
backgroundColor: COLOR
}, Platform.OS === "ios" ? {paddingTop: 20} : null]}>
<ScrollableTab {...props} underlineStyle={{backgroundColor: "white"}}/>
</Animated.View>
}>
<Tab heading="Tab 1" {...TAB_PROPS}>
{tabContent}
</Tab>
<Tab heading="Tab 2" {...TAB_PROPS}>
{tabContent}
</Tab>
</Tabs>
</Animated.ScrollView>
</View>
);
}
}
@pedrofneves

This comment has been minimized.

Copy link

pedrofneves commented Jan 3, 2018

Hi... I'm trying to set the TabBar aligned to the bottom (fixed) but I had no success. Can you help me?

@pat1k2k

This comment has been minimized.

Copy link

pat1k2k commented Dec 21, 2018

This is clear, thanks for posting this,

@alz10

This comment has been minimized.

Copy link

alz10 commented Apr 18, 2019

Thank you very much for this. <3

@alz10

This comment has been minimized.

Copy link

alz10 commented Apr 18, 2019

Hey man, i just notice that if the first Tab has a bigger height compare to other Tabs, its height will be transferred to other tabs that are smaller in height. Its like whoever Tab has the bigger height, its height will be distributed to other tabs height as well.

@kneza23

This comment has been minimized.

Copy link

kneza23 commented Dec 19, 2019

Amazing work man, but there is a problem when you have SectionList component, i find it impossible to get the seacton sticky headers to stick with CollapsingNav.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.