App.js

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View, Button, StyleSheet } from 'react-native';
import { Feather } from '@expo/vector-icons';

// Import navigators and providers
import MainNavigator from './src/navigation/MainNavigator';
import { EmergencyProvider } from './src/context/EmergencyContext';
import { AuthProvider } from './src/context/AuthContext';

// Mock Auth Screen with login button
const AuthScreen = ({ navigation }) => (
  <View style={styles.authContainer}>
    <View style={styles.logoContainer}>
      <Text style={styles.logoTextPrimary}>Pashu</Text>
      <Text style={styles.logoTextSecondary}>AI</Text>
    </View>
    <Text style={styles.subtitle}>Help street animals with confidence</Text>
    
    <View style={styles.buttonContainer}>
      <Button 
        title="Mock Login (Skip Authentication)" 
        onPress={() => navigation.navigate('MainApp')}
      />
    </View>
    
    <Text style={styles.devNote}>
      Development Note: This button bypasses authentication for testing
    </Text>
  </View>
);

// Mock Emergency Screen
const EmergencyScreen = ({ navigation }) => (
  <View style={styles.screenContainer}>
    <View style={styles.header}>
      <Button title="Back" onPress={() => navigation.goBack()} />
      <Text style={styles.headerTitle}>Help an Animal</Text>
      <View style={{width: 50}}></View>
    </View>
    <Text style={styles.screenContent}>Emergency Screen Content</Text>
  </View>
);

// Create stack navigator
const Stack = createStackNavigator();

// Root App component
export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <AuthProvider>
          <EmergencyProvider>
            <Stack.Navigator initialRouteName="Auth">
              <Stack.Screen 
                name="Auth" 
                component={AuthScreen} 
                options={{ headerShown: false }}
              />
              <Stack.Screen 
                name="MainApp" 
                component={MainNavigator} 
                options={{ headerShown: false }}
              />
            </Stack.Navigator>
          </EmergencyProvider>
        </AuthProvider>
        <StatusBar style="auto" />
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

// Styles
const styles = StyleSheet.create({
  authContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: 'white',
  },
  logoContainer: {
    flexDirection: 'row',
    marginBottom: 10,
  },
  logoTextPrimary: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#5B61F4',
  },
  logoTextSecondary: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#36B37E',
  },
  subtitle: {
    fontSize: 16,
    color: '#666666',
    marginBottom: 40,
  },
  buttonContainer: {
    width: '100%',
    marginBottom: 20,
  },
  devNote: {
    fontSize: 12,
    color: 'gray',
    marginTop: 20,
    textAlign: 'center',
  },
  screenContainer: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#EEEEEE',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
  },
  screenContent: {
    fontSize: 16,
    textAlign: 'center',
    marginTop: 20,
  },
});