Last active
October 23, 2023 07:34
-
-
Save andigu/dbd407baecc16ab073f3ede5e0f009f7 to your computer and use it in GitHub Desktop.
A react native component featuring parallax scrolling with tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, {Component} from "react"; | |
| import {Animated, Dimensions, Platform, Text, TouchableOpacity, View} from "react-native"; | |
| import {Body, Header, List, ListItem as Item, ScrollableTab, Tab, TabHeading, Tabs, Title} from "native-base"; | |
| import LinearGradient from "react-native-linear-gradient"; | |
| const {width: SCREEN_WIDTH} = Dimensions.get("window"); | |
| const IMAGE_HEIGHT = 250; | |
| const HEADER_HEIGHT = Platform.OS === "ios" ? 64 : 50; | |
| const SCROLL_HEIGHT = IMAGE_HEIGHT - HEADER_HEIGHT; | |
| const THEME_COLOR = "rgba(85,186,255, 1)"; | |
| const FADED_THEME_COLOR = "rgba(85,186,255, 0.8)"; | |
| export class ParallaxDemo extends Component { | |
| nScroll = new Animated.Value(0); | |
| scroll = new Animated.Value(0); | |
| textColor = this.scroll.interpolate({ | |
| inputRange: [0, SCROLL_HEIGHT / 5, SCROLL_HEIGHT], | |
| outputRange: [THEME_COLOR, FADED_THEME_COLOR, "white"], | |
| extrapolate: "clamp" | |
| }); | |
| tabBg = this.scroll.interpolate({ | |
| inputRange: [0, SCROLL_HEIGHT], | |
| outputRange: ["white", THEME_COLOR], | |
| extrapolate: "clamp" | |
| }); | |
| tabY = this.nScroll.interpolate({ | |
| inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT + 1], | |
| outputRange: [0, 0, 1] | |
| }); | |
| headerBg = this.scroll.interpolate({ | |
| inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT + 1], | |
| outputRange: ["transparent", "transparent", THEME_COLOR], | |
| extrapolate: "clamp" | |
| }); | |
| imgScale = this.nScroll.interpolate({ | |
| inputRange: [-25, 0], | |
| outputRange: [1.1, 1], | |
| extrapolateRight: "clamp" | |
| }); | |
| imgOpacity = this.nScroll.interpolate({ | |
| inputRange: [0, SCROLL_HEIGHT], | |
| outputRange: [1, 0], | |
| }); | |
| tabContent = (x, i) => <View style={{height: this.state.height}}> | |
| <List onLayout={({nativeEvent: {layout: {height}}}) => { | |
| this.heights[i] = height; | |
| if (this.state.activeTab === i) this.setState({height}) | |
| }}> | |
| {new Array(x).fill(null).map((_, i) => <Item key={i}><Text>Item {i}</Text></Item>)} | |
| </List></View>; | |
| heights = [500, 500]; | |
| state = { | |
| activeTab: 0, | |
| height: 500 | |
| }; | |
| constructor(props) { | |
| super(props); | |
| this.nScroll.addListener(Animated.event([{value: this.scroll}], {useNativeDriver: false})); | |
| } | |
| render() { | |
| return ( | |
| <View> | |
| <Animated.View style={{position: "absolute", width: "100%", backgroundColor: this.headerBg, zIndex: 1}}> | |
| <Header style={{backgroundColor: "transparent"}} hasTabs> | |
| <Body> | |
| <Title> | |
| <Animated.Text style={{color: this.textColor, fontWeight: "bold"}}> | |
| Tab Parallax | |
| </Animated.Text> | |
| </Title> | |
| </Body> | |
| </Header> | |
| </Animated.View> | |
| <Animated.ScrollView | |
| scrollEventThrottle={5} | |
| showsVerticalScrollIndicator={false} | |
| onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.nScroll}}}], {useNativeDriver: true})} | |
| style={{zIndex: 0}}> | |
| <Animated.View style={{ | |
| transform: [{translateY: Animated.multiply(this.nScroll, 0.65)}, {scale: this.imgScale}], | |
| backgroundColor: THEME_COLOR | |
| }}> | |
| <Animated.Image | |
| source={{uri: "https://upload.wikimedia.org/wikipedia/commons/c/c5/Moraine_Lake_17092005.jpg"}} | |
| style={{height: IMAGE_HEIGHT, width: "100%", opacity: this.imgOpacity}}> | |
| {/*gradient*/} | |
| <LinearGradient | |
| colors={["rgba(255,255,255,0.9)", "rgba(255,255,255,0.35)", "rgba(255,255,255,0)"]} | |
| locations={[0, 0.25, 1]} | |
| style={{position: "absolute", height: "100%", width: "100%"}}/> | |
| </Animated.Image> | |
| </Animated.View> | |
| <Tabs | |
| prerenderingSiblingsNumber={3} | |
| onChangeTab={({i}) => { | |
| this.setState({height: this.heights[i], activeTab: i}) | |
| }} | |
| renderTabBar={(props) => <Animated.View | |
| style={{transform: [{translateY: this.tabY}], zIndex: 1, width: "100%", backgroundColor: "white"}}> | |
| <ScrollableTab {...props} | |
| renderTab={(name, page, active, onPress, onLayout) => ( | |
| <TouchableOpacity key={page} | |
| onPress={() => onPress(page)} | |
| onLayout={onLayout} | |
| activeOpacity={0.4}> | |
| <Animated.View | |
| style={{ | |
| flex: 1, | |
| height: 100, | |
| backgroundColor: this.tabBg | |
| }}> | |
| <TabHeading scrollable | |
| style={{ | |
| backgroundColor: "transparent", | |
| width: SCREEN_WIDTH / 2 | |
| }} | |
| active={active}> | |
| <Animated.Text style={{ | |
| fontWeight: active ? "bold" : "normal", | |
| color: this.textColor, | |
| fontSize: 14 | |
| }}> | |
| {name} | |
| </Animated.Text> | |
| </TabHeading> | |
| </Animated.View> | |
| </TouchableOpacity> | |
| )} | |
| underlineStyle={{backgroundColor: this.textColor}}/> | |
| </Animated.View> | |
| }> | |
| <Tab heading="Tab 1"> | |
| {this.tabContent(30, 0)} | |
| </Tab> | |
| <Tab heading="Tab 2"> | |
| {this.tabContent(15, 1)} | |
| </Tab> | |
| </Tabs> | |
| </Animated.ScrollView> | |
| </View> | |
| ) | |
| } | |
| } |
have problem if tab 1 have less than items tab 2
I have problem. when tabs have different height based on it's content. then it choose height of tab with max content. Give help to resolve this issue.
@andigu having problem with height of tabs, do you have any idea?
any solution for fix height ?
2019 anyone have a fix?
have problem if tab 1 have less than items tab 2
I have same issue. Extra space at the bottom of the tab with less content. Any solution?
Any body found solution to this?
Thanks
I want one tab view to have a flatlist and items in it will keep on adding as the view scrolls down (pagination) will it work in this scenario?
I have same issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Have you tested this on android? The absolute header does not appear.
"react": "^16.3.1",
"react-native": "^0.55.2",