I keep getting two errors no matter what I do. (Sorry the code is a little messy)


`import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet, Image, Animated, Switch, TouchableOpacity, Button,  } from "react-native"; // Make sure to import Animated from react-native
import { Magnetometer } from "expo-sensors";
import { useNavigation } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import SettingsScreen from "./SettingsScreen";

const App: React.FC = () => {
    const [heading, setHeading] = useState<number>(0);
    const [darkMode, setDarkMode] = useState<boolean>(false);
    const rotateValue = new Animated.Value(0);
    const navigation = useNavigation();

    useEffect(() => {
        let subscription: any;

        const degreeUpdateRate = 3;

        const startMagnetometer = async () => {
            const isAvailable = await Magnetometer.isAvailableAsync();
            if (isAvailable) {
                subscription = Magnetometer.addListener((data) => {
                    const { x, y, z } = data;

                    const magneticHeading = Math.atan2(y, x) * (180 / Math.PI);

                    setHeading(magneticHeading);

                    // Rotate the compass image
                    Animated.timing(rotateValue, {
                        toValue: magneticHeading,
                        duration: 100,
                        useNativeDriver: false,
                    }).start();
                });

                Magnetometer.setUpdateInterval(degreeUpdateRate);
            } else {
                console.log("Magnetometer is not available.");
            }
        };

        startMagnetometer();

        return () => {
            subscription?.remove();
        };
    }, []);

    const rotateStyle = {
        transform: [{ rotate: `${-heading}deg` }],
    };

    const toggleDarkMode = () => {
        setDarkMode((prevMode) => !prevMode);
    };

    return (
        <View style={[styles.container, darkMode && styles.darkMode]}>
            <Text style={[styles.appName, darkMode && styles.darkText]}>Prom Date Finder</Text>
            <View style={styles.compassContainer}>
                <Animated.Image
                    source={require("./images/compassarrowonly.png")}
                    style={[styles.compassImage, rotateStyle]}
                />
            </View>
            {/* <TouchableOpacity style={styles.settingsButton} onPress={() => navigation.navigate("Settings")}>
            <Text style={styles.settingsButtonText}>Settings</Text>
            </TouchableOpacity> */}
        **    <Button
              title="Settings"
             onPress={() => navigation.navigate("Settings")}
             style={styles.settingsButton}
/>**


            <View style={styles.switchContainer}>
                <Text style={[styles.switchText, darkMode && styles.darkText]}>Dark Mode</Text>
                <Switch
                    value={darkMode}
                    onValueChange={toggleDarkMode}
                />
            </View>
        </View>
    );
};

//Styles

export default App;`

I’m trying to make it where the button takes me to the settings page
Ive been through everything I can think of. I keep getting an error on the “Settings” saying that the string is not assignable to parameter of type. Along with an error on the style. I also tried this which didn’t work either. <TouchableOpacity style={styles.settingsButton} onPress={() => navigation.navigate(“Settings”)}>
<Text style={styles.settingsButtonText}>Settings</Text>
</TouchableOpacity>