Instantly share code, notes, and snippets.
| 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