Here is my login screen.
// screens/LoginScreen.js
import React, { useState, useContext } from 'react';
import {
    StyleSheet,
    Alert,
    KeyboardAvoidingView,
    Platform,
    ScrollView,
    View,
} from 'react-native';
import axios from 'axios';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {
    Text,
    TextInput,
    Button,
    Card,
    ActivityIndicator,
    useTheme,
} from 'react-native-paper';

const LoginScreen = ({ navigation }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const { signIn } = useContext(AuthContext);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(false);

    const theme = useTheme();
    const styles = getStyles(theme);

    const handleLogin = async () => {
        if (!email || !password) {
            Alert.alert('Error', 'Please enter both email and password.');
            return;
        }

        setLoading(true);
        try {
            const res = await axios.post('http://10.0.0.203:5000/api/auth/login', {
                email,
                password
            });
            const { token } = res.data;
            signIn(token);
        } catch (err) {
            console.error(err);
            setError(err.response?.data?.message || 'Login failed');
            Alert.alert('Login Failed', err.response?.data?.message || 'Invalid credentials');
        } finally {
            setLoading(false);
        }
    };

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={styles.container}
        >
            <ScrollView
                contentContainerStyle={styles.scrollContainer}
                keyboardShouldPersistTaps="handled"
            >
                <Card style={styles.card}>
                    <Card.Title
                        title="Login"
                        titleStyle={styles.cardTitle}
                        left={(props) => <Icon {...props} name="login" size={30} color={theme.colors.primary} />}
                    />
                    <Card.Content>
                        {/* Email Input */}
                        <TextInput
                            label="Email"
                            value={email}
                            onChangeText={setEmail}
                            mode="outlined"
                            style={styles.input}
                            keyboardType="email-address"
                            autoCapitalize="none"
                            left={<TextInput.Icon name="email" color={theme.colors.placeholder} />}
                            placeholderTextColor={theme.colors.placeholder}
                        />

                        {/* Password Input */}
                        <TextInput
                            label="Password"
                            value={password}
                            onChangeText={setPassword}
                            mode="outlined"
                            style={styles.input}
                            secureTextEntry
                            left={<TextInput.Icon name="lock" color={theme.colors.placeholder} />}
                            placeholderTextColor={theme.colors.placeholder}
                        />

                        {/* Error Message */}
                        {error && <Text style={[styles.errorText]}>{error}</Text>}

                        {/* Login Button */}
                        {loading ? (
                            <ActivityIndicator animating={true} color={theme.colors.primary} style={styles.loader} />
                        ) : (
                            <Button
                                mode="contained"
                                onPress={handleLogin}
                                style={styles.button}
                                contentStyle={styles.buttonContent}
                                disabled={loading}
                            >
                                Login
                            </Button>
                        )}

                        {/* Forgot Password */}
                        <Button
                            mode="text"
                            onPress={() => navigation.navigate('ForgotPassword')}
                            style={styles.forgotPassword}
                            labelStyle={{ color: theme.colors.primary }}
                        >
                            Forgot Password?
                        </Button>

                        {/* Divider */}
                        <View style={styles.dividerContainer}>
                            <View style={[styles.line, { backgroundColor: theme.colors.placeholder }]} />
                            <Text style={[styles.dividerText, { color: theme.colors.text }]}>OR</Text>
                            <View style={[styles.line, { backgroundColor: theme.colors.placeholder }]} />
                        </View>

                        {/* Social Login Buttons */}
                        <Button
                            mode="outlined"
                            icon="facebook"
                            onPress={() => {}}
                            style={styles.socialButton}
                            contentStyle={styles.socialButtonContent}
                            labelStyle={{ color: '#3b5998' }}
                        >
                            Login with Facebook
                        </Button>

                        <Button
                            mode="outlined"
                            icon="google"
                            onPress={() => {}}
                            style={styles.socialButton}
                            contentStyle={styles.socialButtonContent}
                            labelStyle={{ color: '#db4a39' }}
                        >
                            Login with Google
                        </Button>

                        {/* Register Redirect */}
                        <View style={styles.registerRedirect}>
                            <Text style={{ color: theme.colors.text, marginRight: 5 }}>Don't have an account?</Text>
                            <Button
                                mode="text"
                                onPress={() => navigation.navigate('Register')}
                                compact
                                uppercase={false}
                                labelStyle={{ color: theme.colors.primary, fontWeight: '600' }}
                            >
                                Register
                            </Button>
                        </View>
                    </Card.Content>
                </Card>
            </ScrollView>
        </KeyboardAvoidingView>
    );
};

// Dynamic styles based on the current theme
const getStyles = (theme) => StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.background, // Uses theme background
    },
    scrollContainer: {
        flexGrow: 1,
        justifyContent: 'center',
        padding: 20,
    },
    card: {
        backgroundColor: theme.colors.surface, // Uses theme surface color
        borderRadius: 10,
        padding: 10,
        elevation: 5,
    },
    cardTitle: {
        color: theme.colors.text, // Uses theme text color
        fontSize: 24,
        fontWeight: 'bold',
    },
    input: {
        backgroundColor: theme.colors.background, // Matches theme background
        marginBottom: 10,
    },
    errorText: {
        color: theme.colors.error, // Uses theme error color
        textAlign: 'center',
        marginBottom: 10,
    },
    button: {
        marginTop: 10,
        borderRadius: 25,
    },
    buttonContent: {
        paddingVertical: 8,
    },
    loader: {
        marginTop: 10,
    },
    forgotPassword: {
        marginTop: 10,
    },
    dividerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 20,
    },
    line: {
        flex: 1,
        height: 1,
        backgroundColor: theme.colors.placeholder, // Uses theme placeholder color
    },
    dividerText: {
        marginHorizontal: 10,
        color: theme.colors.text, // Uses theme text color
    },
    socialButton: {
        marginBottom: 10,
    },
    socialButtonContent: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    registerRedirect: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10,
    },
});

export default LoginScreen;


here is my app.js
// App.js
import React from 'react';
import { AuthProvider } from './context/AuthContext';
import AppNavigator from './navigation/AppNavigator';
import { Provider as PaperProvider, DarkTheme as PaperDarkTheme } from 'react-native-paper';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer, DarkTheme as NavigationDarkTheme } from '@react-navigation/native';
import merge from 'deepmerge';

// Merge react-native-paper's DarkTheme with react-navigation's DarkTheme
const CombinedDarkTheme = merge(PaperDarkTheme, NavigationDarkTheme);

// Customize the merged theme with your specific color preferences
const customDarkTheme = {
  ...CombinedDarkTheme,
  colors: {
    ...CombinedDarkTheme.colors,
    primary: '#2196F3',      // Blue as the primary color
    accent: '#03dac6',       // Accent color
    background: '#121212',   // Dark background
    surface: '#1e1e1e',      // Surface color (e.g., for cards)
    text: '#ffffff',         // Text color
    placeholder: '#cccccc',  // Lighter placeholder text color
    error: '#cf6679',        // Error text color
    // You can override more colors as needed
  },
};

const App = () => {
  return (
    <AuthProvider>
      <PaperProvider theme={customDarkTheme}>
        <StatusBar style="light" />
        <NavigationContainer theme={customDarkTheme}>
          <AppNavigator />
        </NavigationContainer>
      </PaperProvider>
    </AuthProvider>
  );
};

export default App;

why is the placeholder text and text when i type black