Donhv/TabParallax.js

## TabParallax.js
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>
    )
  }
}
	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>
	)
	}
	}