App.js

import 'react-native-gesture-handler';
import React, { useEffect, useCallback, useState } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useFonts } from 'expo-font';
import { SpaceGrotesk_700Bold, SpaceGrotesk_500Medium } from '@expo-google-fonts/space-grotesk';
import { IBMPlexMono_400Regular, IBMPlexMono_700Bold } from '@expo-google-fonts/ibm-plex-mono';

import InputScreen from './src/screens/InputScreen';
import ProcessingScreen from './src/screens/ProcessingScreen';
import PortfolioScreen from './src/screens/PortfolioScreen';
import EditorScreen from './src/screens/EditorScreen';
import ShareScreen from './src/screens/ShareScreen';

const Stack = createNativeStackNavigator();

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    SpaceGrotesk_700Bold,
    SpaceGrotesk_500Medium,
    IBMPlexMono_400Regular,
    IBMPlexMono_700Bold,
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer onReady={onLayoutRootView}>
        <StatusBar style="auto" />
        <Stack.Navigator
          initialRouteName="Input"
          screenOptions={{
            headerShown: false,
            contentStyle: { backgroundColor: '#F4F4F0' }
          }}
        >
          <Stack.Screen name="Input" component={InputScreen} />
          <Stack.Screen name="Processing" component={ProcessingScreen} />
          <Stack.Screen name="Portfolio" component={PortfolioScreen} />
          <Stack.Screen name="Editor" component={EditorScreen} />
          <Stack.Screen name="Share" component={ShareScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}