med-f38372681b2c-reanimated-scrollview-boilerplate.tsx

import React from "react";
import { View, SafeAreaView, Text, Dimensions, ScrollView } from "react-native";
import Ionicons from "@expo/vector-icons/Ionicons";

const { width, height } = Dimensions.get("screen");

const textColor = "#2A3B38";
const slideWidth = width * 0.75;
const slideHeight = height * 0.5;

const slides = [
  {
    text: "Code",
    icon: "code-slash",
  },
  {
    text: "Enjoy Life",
    icon: "cafe",
  },
  {
    text: "@useRNRocket",
    icon: "rocket-sharp",
  },
];

const Slide = ({ slide, index }: any) => {
  return (
    <View
      key={index}
      style={[
        {
          flex: 1,
          width: slideWidth,
          height: slideHeight,
          paddingVertical: 10,
        },
      ]}
    >
      <View
        style={{
          padding: 10,
          alignItems: "center",
          borderColor: textColor,
          borderWidth: 3,
          borderRadius: 10,
          height: "100%",
          justifyContent: "center",
        }}
      >
        <Ionicons name={slide.icon} size={100} color={textColor} />
        <Text
          style={{
            color: textColor,
            fontSize: 30,
            fontWeight: "bold",
          }}
        >
          {slide.text}
        </Text>
      </View>
    </View>
  );
};

const AnimatedScrollView = () => {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: "space-around" }}>
      <ScrollView
        scrollEventThrottle={1}
        horizontal
        snapToInterval={slideWidth}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{
          alignItems: "center",
          paddingHorizontal: (width - slideWidth) / 2,
          justifyContent: "center",
        }}
      >
        {slides.map((slide, index) => {
          return <Slide key={index} index={index} slide={slide} />;
        })}
      </ScrollView>
    </SafeAreaView>
  );
};

export default AnimatedScrollView;