import React, {Component} from "react";
import {Animated, Dimensions, 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 = 64;
const SCROLL_HEIGHT = IMAGE_HEIGHT - HEADER_HEIGHT;
const COLOR = "rgba(85,186,255, 1)";
const FADED_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: [COLOR, FADED_COLOR, "white"],
extrapolate: "clamp"
});
tabBg = this.scroll.interpolate({
inputRange: [0, SCROLL_HEIGHT],
outputRange: ["white", 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", 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 = (
{new Array(20).fill(null).map((_, i) => - Item {i}
)}
);
constructor(props) {
super(props);
this.nScroll.addListener(Animated.event([{value: this.scroll}], {useNativeDriver: false}));
}
render() {
return (
<Animated.Text style={{color: this.textColor, fontWeight: "bold"}}>
Tab Parallax
</Animated.Text>
(
onPress(page)} onLayout={onLayout}
activeOpacity={0.4}>
{name}
)}
underlineStyle={{backgroundColor: this.textColor}}/>
}>
{this.tabContent}
{this.tabContent}
)
}
}