import * as React from "react";
import { Dimensions, Text, View, Image, StyleSheet } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, {
  ICarouselInstance,
  Pagination,
} from "react-native-reanimated-carousel";

const width = Dimensions.get("window").width; // 画面の幅
const images = [
  'https://placehold.jp/150x150.png',
  'https://placehold.jp/151x150.png',
  'https://placehold.jp/152x150.png',
  'https://placehold.jp/153x150.png',
  'https://placehold.jp/154x150.png',
  'https://placehold.jp/155x150.png',
];
// 【メモ】ローカルの画像を表示する場合はこう書く
//const images = [
//	require('@/assets/images/1.png'),
//	require('@/assets/images/2.png'),
//	require('@/assets/images/3.png'),
//	require('@/assets/images/4.png'),
//	require('@/assets/images/5.png'),
//];
function Usage() {
  const ref = React.useRef<ICarouselInstance>(null); // カルーセルの参照
  const progress = useSharedValue<number>(0); // 進行状況
  const [step, setStep] = React.useState(0); // 何枚目のスライドか

  // ページネーションが押されたときの処理
  const onPressPagination = (index: number) => {
    ref.current?.scrollTo({
      /**
       * 現在のインデックスと目標のインデックスの差を計算して、
       * カルーセルが最も近いインデックスにスクロールするようにします
       */
      count: index - progress.value,
      animated: true,
    });
  };

  return (
    <View style={styles.wrapper}>
      <Text>STEP：{step + 1}</Text>
      <View style={styles.container}>
        {/* カルーセル */}
        <Carousel
          ref={ref}
          width={width * 0.9}
          height={height * 0.6}
          data={images}
          onProgressChange={progress}
          onSnapToItem={(index) => {
            setStep(index);
          }}
          renderItem={({ item }) => (

          <View
          style={{
            flex: 1,
            borderWidth: 1,
            justifyContent: "center",
          }}
        >
          <Image
            source={{ uri: item }} // 画像のURLを指定
            style={{ width: '100%', height: '100%' }} // 画像のスタイルを指定
            // 【メモ】ローカルの画像を表示する場合
            // source={item}
          />
        </View>
        )}
      />

        {/* ページネーション */}
        <Pagination.Basic
          progress={progress}
          data={images}
          dotStyle={{ backgroundColor: "rgba(0,0,0,0.2)", borderRadius: 50 }}
          activeDotStyle={{ backgroundColor: "rgba(255,255,255,0.2)", borderRadius: 50 }}
          containerStyle={{ gap: 5, marginTop: 10 }}
          onPress={onPressPagination}
        />
      </View>
  );
}

export default Usage;

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },

  container: {
    height: height * 0.7,
  }
});

npm install @react-native-async-storage/async-storage

import { useEffect, useState } from "react";
// ここではexpo-routerで画面遷移させているが、適宜使っているナビゲーションライブラリに変更する。
import { router } from "expo-router";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function HomeScreen() {
	const [isFirstLaunch, setIsFirstLaunch] = useState<boolean | null>(null); // 初回起動かどうか

  useEffect(() => {
    /**
     * ✅初回起動かどうかをチェック
     */
    const checkFirstLaunch = async () => {
      try {
        const value = await AsyncStorage.getItem("hasLaunched");

        if (value === null) {
          // 初回起動の場合は、オンボーディングへ遷移
          setIsFirstLaunch(true);
          await AsyncStorage.setItem("hasLaunched", "true");
          router.push("/usage");
        } else {
          // 2回目以降の起動の場合は、何もしない
          setIsFirstLaunch(false);
        }
      } catch (error) {
        console.error("初回起動時のチェック失敗: ", error);
        setIsFirstLaunch(false);
      }
    };
    checkFirstLaunch();
  }, []);
  
  if (isFirstLaunch === null) {
    // 初回起動時かどうかの判定が終わるまで何も表示しない
    return null;
  }
  
   return (
    ...
	)
}