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 = (
{new Array(20).fill(null).map((_, i) => - Item {i}
)}
);
const tabY = Animated.add(this.scroll, this.headerY);
return (
{Platform.OS === "ios" &&
}
<Text style={{color: "white"}}>
Collapsing Navbar
</Text>
}>
{tabContent}
{tabContent}
);
}
}