Skip to content

Instantly share code, notes, and snippets.

@jamesholcomb
Forked from andigu/CollapsingNav.js
Created November 8, 2017 17:13
Show Gist options
  • Save jamesholcomb/6fb75e2e2cb45690bd4c0e4776ef4062 to your computer and use it in GitHub Desktop.
Save jamesholcomb/6fb75e2e2cb45690bd4c0e4776ef4062 to your computer and use it in GitHub Desktop.
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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment