monday-2023.09.25.tsx

import React from "react";
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedRef,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  scrollTo,
} from "react-native-reanimated";
import {
  View,
  Text,
  Image,
  useWindowDimensions,
  StyleSheet,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";

const cardHeight = 100;
const fashionImages = [
  require(`../assets/images/fashion/5.png`),
  require(`../assets/images/fashion/1.png`),
  require(`../assets/images/fashion/2.png`),
  require(`../assets/images/fashion/3.png`),
  require(`../assets/images/fashion/4.png`),
];

const Slide = ({
  image,
  index,
  slideWidth,
  slideHeight,
  scrollOffset,
}: any) => {
  const animatedStyle = useAnimatedStyle(() => {
    const input = scrollOffset.value / slideWidth;
    const inputRange = [index - 1, index, index + 1];
    return {
      opacity: interpolate(input, inputRange, [1, 1, 0.1], Extrapolate.CLAMP),
      transform: [
        {
          translateX: interpolate(input, inputRange, [
            -slideWidth * 1.15,
            -slideWidth * 0.25,
            -200,
          ]),
        },
        { translateY: interpolate(input, inputRange, [10, 0, 0]) },
      ],
      zIndex: -(index + 1),
    };
  });
  return (
    <Animated.View
      key={index}
      style={[
        {
          width: slideWidth,
          height: slideHeight,
          backgroundColor: "black",
          borderRadius: 20,
        },
        animatedStyle,
      ]}
    >
      <Image
        source={image}
        style={{ width: slideWidth, height: slideHeight, borderRadius: 20 }}
      />
    </Animated.View>
  );
};
const FashionWeek = () => {
  const { width, height } = useWindowDimensions();
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const scrollOffset = useSharedValue(0);
  const smallRef = useAnimatedRef<Animated.ScrollView>();

  const slideWidth = width * 0.66;
  const slideHeight = height * 0.66;
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollOffset.value = event.contentOffset.x;
    },
  });
  useDerivedValue(() => {
    const indexScrolled = scrollOffset.value / slideWidth;
    scrollTo(smallRef, 0, indexScrolled * cardHeight, false);
  });

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#dddbd0" }}>
      <StatusBar style="dark" />
      <Animated.View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        <Animated.ScrollView ref={smallRef} style={styles.cardScrollView}>
          <View style={styles.textContainer}>
            <Text style={styles.text}>DABA</Text>
            <Text style={styles.subText}>Monday September 25 2023</Text>
          </View>
          <View style={styles.textContainer}>
            <Text style={styles.text}>VINNECHI</Text>
            <Text style={styles.subText}>Tuesday September 26 2023</Text>
          </View>
          <View style={styles.textContainer}>
            <Text style={styles.text}>BUUBUBBY</Text>
            <Text style={styles.subText}>Wednesday September 27 2023</Text>
          </View>
          <View style={styles.textContainer}>
            <Text style={styles.text}>GVVBI</Text>
            <Text style={styles.subText}>Thursday September 28 2023</Text>
          </View>
          <View style={styles.textContainer}>
            <Text style={styles.text}>SMOLMANE</Text>
            <Text style={styles.subText}>Friday September 29 2023</Text>
          </View>
        </Animated.ScrollView>
        <Animated.ScrollView
          ref={scrollRef}
          horizontal
          showsHorizontalScrollIndicator={false}
          snapToInterval={slideWidth}
          decelerationRate={"fast"}
          onScroll={scrollHandler}
          scrollEventThrottle={1}
          style={{ flex: 1 }}
          contentContainerStyle={{
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Animated.View
            style={{
              width: width * 0.33,
              height: slideHeight,
            }}
          ></Animated.View>
          {fashionImages.map((image, index) => (
            <Slide
              key={image}
              image={image}
              index={index}
              slideWidth={slideWidth}
              slideHeight={slideHeight}
              scrollOffset={scrollOffset}
            />
          ))}
        </Animated.ScrollView>
      </Animated.View>
    </SafeAreaView>
  );
};

export default FashionWeek;

const styles = StyleSheet.create({
  textContainer: {
    height: cardHeight,
  },
  text: {
    fontFamily: "HoeflerText-Black",
    fontSize: 40,
  },
  subText: {
    fontFamily: "Helvetica",
    fontSize: 20,
  },
  cardScrollView: {
    maxHeight: 70,
    flex: 1,
    marginHorizontal: 20,
    marginTop: 20,
  },
});