151 lines
3.7 KiB
TypeScript
151 lines
3.7 KiB
TypeScript
|
|
import {
|
|
Animated,
|
|
} from 'react-native';
|
|
|
|
import Screen from './Screen';
|
|
import { HEADERHEIGHT, LISTMARGIN } from '../constants';
|
|
import Card from './Card';
|
|
|
|
import React from 'react';
|
|
import { useState } from 'react'
|
|
import AnimatedListHeader from './AnimatedListHeader';
|
|
|
|
|
|
|
|
const SearchScreenInfo = () => {
|
|
|
|
const properties = [{
|
|
id: 1,
|
|
images: [
|
|
"https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
|
"https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
|
|
],
|
|
rentLow: 3750,
|
|
rentHigh: 31054,
|
|
bedroomLow: 1,
|
|
bedroomHigh: 5,
|
|
name: "The Hamilton",
|
|
street: "555 NE 34th St",
|
|
city: "Miami",
|
|
state: "Florida",
|
|
zip: 33137,
|
|
tags: ["Parking"],
|
|
},
|
|
{
|
|
id: 2,
|
|
images: [
|
|
"https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
|
"https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
|
|
],
|
|
rentLow: 3750,
|
|
rentHigh: 31054,
|
|
bedroomLow: 1,
|
|
bedroomHigh: 5,
|
|
name: "The Hamilton",
|
|
street: "555 NE 34th St",
|
|
city: "Miami",
|
|
state: "Florida",
|
|
zip: 33137,
|
|
tags: ["Parking"],
|
|
},
|
|
{
|
|
id: 3,
|
|
images: [
|
|
"https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
|
"https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
|
|
],
|
|
rentLow: 3750,
|
|
rentHigh: 31054,
|
|
bedroomLow: 1,
|
|
bedroomHigh: 5,
|
|
name: "The Hamilton",
|
|
street: "555 NE 34th St",
|
|
city: "Miami",
|
|
state: "Florida",
|
|
zip: 33137,
|
|
tags: ["Parking"],
|
|
},
|
|
{
|
|
id: 4,
|
|
images: [
|
|
"https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
|
"https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
|
|
],
|
|
rentLow: 3750,
|
|
rentHigh: 31054,
|
|
bedroomLow: 1,
|
|
bedroomHigh: 5,
|
|
name: "The Hamilton",
|
|
street: "555 NE 34th St",
|
|
city: "Miami",
|
|
state: "Florida",
|
|
zip: 33137,
|
|
tags: ["Parking"],
|
|
},
|
|
{
|
|
id: 5,
|
|
images: [
|
|
"https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
|
|
"https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
|
|
],
|
|
rentLow: 3750,
|
|
rentHigh: 31054,
|
|
bedroomLow: 1,
|
|
bedroomHigh: 5,
|
|
name: "The Hamilton",
|
|
street: "555 NE 34th St",
|
|
city: "Miami",
|
|
state: "Florida",
|
|
zip: 33137,
|
|
tags: ["Parking"],
|
|
},
|
|
];
|
|
|
|
const [scrollAnimation] = useState(new Animated.Value(0));
|
|
|
|
|
|
return (
|
|
<Screen>
|
|
|
|
<AnimatedListHeader scrollAnimation={scrollAnimation} />
|
|
|
|
|
|
{/* Main FlatList to handle scrolling to view the properties listing */}
|
|
|
|
<Animated.FlatList
|
|
//Code to animate the header
|
|
|
|
onScroll={Animated.event([
|
|
{
|
|
nativeEvent: {
|
|
contentOffset: {
|
|
y: scrollAnimation
|
|
},
|
|
},
|
|
},
|
|
],
|
|
{useNativeDriver: true}
|
|
)}
|
|
contentContainerStyle={{paddingTop: HEADERHEIGHT - 20}}
|
|
bounces={false}
|
|
scrollEventThrottle={16}
|
|
data={properties}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
showsVerticalScrollIndicator={false}
|
|
style={{ marginHorizontal: LISTMARGIN }}
|
|
renderItem={({item}) => (
|
|
|
|
<Card property={item}/>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
</Screen>
|
|
)
|
|
}
|
|
|
|
export default SearchScreenInfo
|
|
|