187 lines
4.6 KiB
TypeScript
187 lines
4.6 KiB
TypeScript
import {
|
|
Animated,
|
|
StyleSheet,
|
|
LayoutChangeEvent,
|
|
View,
|
|
TouchableOpacity,
|
|
Platform,
|
|
FlatList,
|
|
} from 'react-native'
|
|
|
|
import React, { useState } from 'react'
|
|
import { HEADERHEIGHT, LISTMARGIN } from '../constants'
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { appTheme } from '../theme';
|
|
import { Button, Text } from '@ui-kitten/components';
|
|
import Row from './Row';
|
|
|
|
const AnimatedListHeader = ({scrollAnimation}:{scrollAnimation: Animated.Value}) => {
|
|
|
|
|
|
|
|
const [offsetAnimation] = useState(new Animated.Value(0));
|
|
const [clampedScroll, setClampedScroll] = useState(
|
|
Animated.diffClamp(
|
|
Animated.add(
|
|
scrollAnimation.interpolate({
|
|
inputRange: [0,1],
|
|
outputRange: [0,1],
|
|
extrapolateLeft: "clamp"
|
|
}),
|
|
offsetAnimation
|
|
),
|
|
0,
|
|
1
|
|
)
|
|
)
|
|
|
|
const navbarTranslate = clampedScroll.interpolate({
|
|
inputRange : [0, HEADERHEIGHT],
|
|
outputRange: [0, -HEADERHEIGHT],
|
|
extrapolate: "clamp",
|
|
});
|
|
|
|
const onLayout = (event: LayoutChangeEvent) => {
|
|
let { height } = event.nativeEvent.layout;
|
|
|
|
setClampedScroll(
|
|
Animated.diffClamp(
|
|
Animated.add(
|
|
scrollAnimation.interpolate({
|
|
inputRange: [0,1],
|
|
outputRange: [0,1],
|
|
extrapolateLeft: "clamp"
|
|
}),
|
|
offsetAnimation
|
|
),
|
|
0,
|
|
height
|
|
)
|
|
)
|
|
|
|
}
|
|
|
|
const filterButtons = [
|
|
{
|
|
iconName: "filter-variant",
|
|
onPress: () => console.log("filter all"),
|
|
},
|
|
{
|
|
label: "Price",
|
|
onPress: () => console.log("price"),
|
|
},
|
|
{
|
|
label: "Move In Date",
|
|
onPress: () => console.log("move in date"),
|
|
},
|
|
{
|
|
label: "Pets",
|
|
onPress: () => console.log("pets"),
|
|
},
|
|
];
|
|
|
|
|
|
return (
|
|
<Animated.View
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
left: 0,
|
|
zIndex: 1000,
|
|
height: HEADERHEIGHT,
|
|
backgroundColor: "#fff",
|
|
transform: [{ translateY: navbarTranslate }],
|
|
}}
|
|
onLayout={onLayout}
|
|
>
|
|
<View style={styles.AnimatedHeaderStyle}>
|
|
|
|
<TouchableOpacity style={styles.TouchableOpacityStyle} onPress={() => console.log("navigate to the input screen")}>
|
|
|
|
<Row style={styles.RowStyle}>
|
|
<MaterialCommunityIcons name="magnify" color={appTheme["color-primary-500"]} size={28} />
|
|
<Text style={styles.Text}>Find a Location</Text>
|
|
</Row>
|
|
|
|
</TouchableOpacity>
|
|
|
|
<FlatList
|
|
style={styles.FlatListStyle}
|
|
data={filterButtons}
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
renderItem={({ item, index }) => {
|
|
if (item.iconName) {
|
|
return <Button
|
|
appearance={'ghost'}
|
|
style={[styles.Searchbtn, {width: 48}]}
|
|
onPress={item.onPress}
|
|
accessoryLeft={
|
|
<MaterialCommunityIcons
|
|
name={item.iconName as any}
|
|
size={20}
|
|
color={appTheme["color-primary-500"]}
|
|
/>
|
|
}
|
|
>
|
|
|
|
</Button>
|
|
}
|
|
return <Button
|
|
appearance={'ghost'}
|
|
style={styles.Searchbtn}
|
|
onPress={item.onPress}
|
|
>
|
|
{item.label}
|
|
|
|
</Button>
|
|
|
|
}}
|
|
keyExtractor={(_, index) => index.toString()}
|
|
>
|
|
|
|
|
|
|
|
</FlatList>
|
|
|
|
</View>
|
|
|
|
|
|
</Animated.View>
|
|
)
|
|
}
|
|
|
|
export default AnimatedListHeader
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
AnimatedHeaderStyle: {
|
|
marginHorizontal: LISTMARGIN
|
|
},
|
|
TouchableOpacityStyle: {
|
|
marginTop: Platform.OS === "ios" ? 50 : 5,
|
|
borderWidth: 1,
|
|
borderColor: appTheme["search-border-default"],
|
|
borderRadius: 30,
|
|
padding: 10,
|
|
},
|
|
RowStyle: {
|
|
alignItems: "center"
|
|
},
|
|
Text: {
|
|
marginLeft: 10
|
|
|
|
},
|
|
Searchbtn: {
|
|
borderRadius: 30,
|
|
borderColor: appTheme["search-border-default"],
|
|
marginHorizontal: 3,
|
|
|
|
},
|
|
FlatListStyle: {
|
|
marginTop: 10
|
|
}
|
|
|
|
|
|
}) |