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> | |
| ) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have same issue