【1分で分かる】React Nativeでアプリの初回起動時のみ特定の処理をする

概要

React Native（もしくはExpo）でアプリの初回起動時のみ特定の処理を実行する方法を紹介する。😊

結論

✅AsyncStorageを使って初回起動フラグを保存すればOK。

初回起動時かどうか判定する方法

1️⃣AsyncStorageをインストール

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

2️⃣初回起動時かどうか判定する

「初回起動時に開くページ」にコピペするだけでOK！

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App: React.FC = () => {
	// 初回起動フラグ
  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');
        } else {
	        // 初回起動フラグを立てない
          setIsFirstLaunch(false);
        }
      } catch (error) {
        console.error('Error checking app launch status: ', error);
        setIsFirstLaunch(false);
      }
    };

    checkFirstLaunch();
  }, []);

	// 初回起動フラグ読み込み中は何も表示しない
  if (isFirstLaunch === null) {
    return null;
  }

  return (
    <View>
      {isFirstLaunch ? (
        <Text>初回起動です！</Text>
      ) : (
        <Text>2回目以降の起動です！</Text>
      )}
    </View>
  );
};

export default App;