App.tsx

import React, { useEffect, useState } from 'react';
import { StatusBar, View, ActivityIndicator } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Provider, useDispatch, useSelector } from 'react-redux';
import Toast from 'react-native-toast-message';
import { store, RootState } from './src/store';
import { RootNavigator } from './src/navigation/RootNavigator';
import { restoreUserSession } from './src/store/slices/authSlice';
import { AppDispatch } from './src/store';

function AppContent() {
  const dispatch = useDispatch<AppDispatch>();
  const { loading } = useSelector((state: RootState) => state.auth);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // Restore user session on app launch
    const bootstrapAsync = async () => {
      try {
        await dispatch(restoreUserSession());
      } catch (e) {
        console.error(e);
      } finally {
        setIsReady(true);
      }
    };

    bootstrapAsync();
  }, [dispatch]);

  if (!isReady) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#FF6B6B" />
      </View>
    );
  }

  return (
    <SafeAreaProvider>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <RootNavigator isLoading={loading} />
      <Toast />
    </SafeAreaProvider>
  );
}

function App() {
  return (
    <Provider store={store}>
      <AppContent />
    </Provider>
  );
}

export default App;