import { Animated, useWindowDimensions } from "react-native";
import { Box } from "@/components/ui/box";
import { Image } from "@/components/ui/image";
import { Heading } from "@/components/ui/heading";
import React, { useRef } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { OnboardingBackground } from "@/nativestack-ui/onboarding/pro/onboarding-background";

const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);

export default function OnboardingBackgroundUsage() {
  const slides = [
    {
      id: "1",
      image: "https://cdn-icons-png.flaticon.com/512/17090/17090508.png",
      title: "Book Flights, Hotels & Cars",
      backgroundColor: "rgb(255 152 121)",
    },
    {
      id: "2",
      image: "https://cdn-icons-png.flaticon.com/512/7960/7960013.png",
      title: "Always Get the Best Price",
      backgroundColor: "rgb(239 233 209)",
    },
    {
      id: "3",
      image: "https://cdn-icons-png.flaticon.com/512/3759/3759086.png",
      title: "The Cheapest Travel Dates",
      backgroundColor: "rgb(255 219 131)",
    },
  ];

  const backgroundColor = useRef(new Animated.Value(0)).current;

  const bgColorInterpolation = backgroundColor.interpolate({
    inputRange: Array.from({ length: slides.length }).map((_, index) => index),
    outputRange: slides.map((x) => x.backgroundColor),
  });

  const changeBackground = (currIndex: number) => {
    Animated.timing(backgroundColor, {
      toValue: currIndex,
      duration: 150,
      useNativeDriver: false,
    }).start();
  };

  const Slide = ({ item }: { item: { image: string; title: string } }) => {
    const { width } = useWindowDimensions();
    return (
      <Box style={{ alignItems: "center", width }} className={"pt-10"}>
        <Heading className={"text-5xl text-center p-4"}>{item.title}</Heading>

        <Image
          className={"h-[300] w-full mt-12"}
          source={item.image}
          resizeMode="contain"
          alt={item.title}
        />
      </Box>
    );
  };

  return (
    <>
      <StatusBar style={"dark"}></StatusBar>
      <AnimatedSafeAreaView
        style={{ flex: 0, backgroundColor: bgColorInterpolation }}
      />
      <AnimatedSafeAreaView
        style={{ flex: 1, backgroundColor: bgColorInterpolation }}
      >
        <OnboardingBackground
          items={slides}
          renderItem={({ item }) => <Slide item={item} />}
          onSlideChange={(currentIndex) => {
            changeBackground(currentIndex);
          }}
        />
      </AnimatedSafeAreaView>
    </>
  );
}

import { useWindowDimensions } from "react-native";
import { Box } from "@/components/ui/box";
import { Image } from "@/components/ui/image";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import React from "react";
import { OnboardingBasic } from "@/nativestack-ui/onboarding/pro/onboarding-basic";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView } from "react-native-safe-area-context";

export default function OnboardingBasicUsage() {
  const slides = [
    {
      id: "1",
      image: "https://cdn-icons-png.flaticon.com/512/6418/6418361.png",
      title: "Shop with our single-use cards",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "2",
      image: "https://cdn-icons-png.flaticon.com/512/3135/3135679.png",
      title: "Start saving the easy way",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "3",
      image: "https://cdn-icons-png.flaticon.com/512/423/423786.png",
      title: "Keep your budget on track with smart analytics",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
  ];

  const Slide = ({
    item,
  }: {
    item: { image: string; title: string; subtitle: string };
  }) => {
    const { width } = useWindowDimensions();
    return (
      <Box style={{ alignItems: "center", width }} className={"pt-10"}>
        <Image
          className={"h-[230] w-full"}
          source={item.image}
          resizeMode="contain"
          alt={item.title}
        />
        <Heading
          size={"2xl"}
          className={"text-white mt-12 max-w-64 text-center"}
        >
          {item.title}
        </Heading>

        <Text size="md" className={"text-white text-center mt-3 max-w-[70%]"}>
          {item.subtitle}
        </Text>
      </Box>
    );
  };

  return (
    <SafeAreaView className={"bg-blue-600"}>
      <StatusBar style={"light"}></StatusBar>
      <OnboardingBasic
        items={slides}
        renderItem={({ item }) => <Slide item={item} />}
      />
    </SafeAreaView>
  );
}

import { useWindowDimensions } from "react-native";
import { Box } from "@/components/ui/box";
import { Image } from "@/components/ui/image";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { OnboardingSkipPaginationTop } from "@/nativestack-ui/onboarding/pro/onboarding-skip-pagination-top";

export default function OnboardingSkipPaginationTopUsage() {
  const slides = [
    {
      id: "1",
      image: "https://cdn-icons-png.flaticon.com/512/6418/6418361.png",
      title: "Shop with our single-use cards",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "2",
      image: "https://cdn-icons-png.flaticon.com/512/3135/3135679.png",
      title: "Start saving the easy way",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "3",
      image: "https://cdn-icons-png.flaticon.com/512/423/423786.png",
      title: "Keep your budget on track with smart analytics",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
  ];

  const Slide = ({
    item,
  }: {
    item: { image: string; title: string; subtitle: string };
  }) => {
    const { width } = useWindowDimensions();
    return (
      <Box style={{ alignItems: "center", width }} className={"pt-10"}>
        <Heading size={"2xl"} className={"text-white max-w-64 text-center"}>
          {item.title}
        </Heading>

        <Text size="md" className={"text-white text-center mt-3 max-w-[70%]"}>
          {item.subtitle}
        </Text>

        <Image
          className={"h-[280] w-full mt-12"}
          source={item.image}
          resizeMode="contain"
          alt={item.title}
        />
      </Box>
    );
  };

  return (
    <SafeAreaView className={"bg-blue-600"}>
      <StatusBar style={"light"}></StatusBar>
      <OnboardingSkipPaginationTop
        items={slides}
        renderItem={({ item }) => <Slide item={item} />}
      />
    </SafeAreaView>
  );
}

import { useWindowDimensions } from "react-native";
import { Box } from "@/components/ui/box";
import { Image } from "@/components/ui/image";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { OnboardingSkipTopWithPagination } from "@/nativestack-ui/onboarding/pro/onboarding-skip-top-pagination";

export default function OnboardingSkipTopWithPaginationUsage() {
  const slides = [
    {
      id: "1",
      image: "https://cdn-icons-png.flaticon.com/512/6418/6418361.png",
      title: "Shop with our single-use cards",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "2",
      image: "https://cdn-icons-png.flaticon.com/512/3135/3135679.png",
      title: "Start saving the easy way",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "3",
      image: "https://cdn-icons-png.flaticon.com/512/423/423786.png",
      title: "Keep your budget on track with smart analytics",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
  ];

  const Slide = ({
    item,
  }: {
    item: { image: string; title: string; subtitle: string };
  }) => {
    const { width } = useWindowDimensions();
    return (
      <Box style={{ alignItems: "center", width }} className={"pt-10"}>
        <Heading size={"3xl"} className={"mx-6 text-center"}>
          {item.title}
        </Heading>

        <Text size="md" className={" text-center mt-3 max-w-[70%]"}>
          {item.subtitle}
        </Text>

        <Image
          className={"h-[280] w-full mt-12"}
          source={item.image}
          resizeMode="contain"
          alt={item.title}
        />
      </Box>
    );
  };

  return (
    <SafeAreaView className={"bg-yellow-200"}>
      <StatusBar style={"light"}></StatusBar>
      <OnboardingSkipTopWithPagination
        items={slides}
        renderItem={({ item }) => <Slide item={item} />}
      />
    </SafeAreaView>
  );
}

import { useWindowDimensions } from "react-native";
import { Box } from "@/components/ui/box";
import { Image } from "@/components/ui/image";
import { Heading } from "@/components/ui/heading";
import { Text } from "@/components/ui/text";
import React from "react";
import { OnboardingSkipTop } from "@/nativestack-ui/onboarding/pro/onboarding-skip-top";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";

export default function OnboardingSkipTopUsage() {
  const slides = [
    {
      id: "1",
      image: "https://cdn-icons-png.flaticon.com/512/6418/6418361.png",
      title: "Shop with our single-use cards",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "2",
      image: "https://cdn-icons-png.flaticon.com/512/3135/3135679.png",
      title: "Start saving the easy way",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      id: "3",
      image: "https://cdn-icons-png.flaticon.com/512/423/423786.png",
      title: "Keep your budget on track with smart analytics",
      subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
  ];

  const Slide = ({
    item,
  }: {
    item: { image: string; title: string; subtitle: string };
  }) => {
    const { width } = useWindowDimensions();
    return (
      <Box style={{ alignItems: "center", width }} className={"pt-10"}>
        <Heading size={"2xl"} className={"text-white max-w-64 text-center"}>
          {item.title}
        </Heading>

        <Text size="md" className={"text-white text-center mt-3 max-w-[70%]"}>
          {item.subtitle}
        </Text>

        <Image
          className={"h-[280] w-full mt-12"}
          source={item.image}
          resizeMode="contain"
          alt={item.title}
        />
      </Box>
    );
  };

  return (
    <SafeAreaView className={"bg-blue-600"}>
      <StatusBar style={"light"}></StatusBar>
      <OnboardingSkipTop
        items={slides}
        renderItem={({ item }) => <Slide item={item} />}
      />
    </SafeAreaView>
  );
}