javascript – The onPress button in my native app isnt working for some motive

import { useState } from "react";
import {
  View,
  ScrollView,
  SafeAreaView,
  Textual content,
  TouchableOpacity,
  StyleSheet,
  Modal,
} from "react-native";
import { Stack, useRouter } from "expo-router";
import { COLORS, icons, photos, SIZES } from "../constants";
import {
  Nearbyjobs,
  Popularjobs,
  ScreenHeaderBtn,
  Welcome,
} from "../parts";

const Dwelling = () => {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState("");
  const [openNav, setOpenNav] = useState(false);

  const toggleNavigation = () => {
    setOpenNav(false);
  };

  return (
    <SafeAreaView type={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
      <Stack.Display screen
        choices={{
          headerStyle: {
            backgroundColor: COLORS.lightWhite,
          },
          headerShadowVisible: false,
          headerLeft: () => (
            <TouchableOpacity onPress={toggleNavigation}>
              <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <ScreenHeaderBtn iconUrl={photos.profile} dimension="100%" />
          ),
          headerTitle: "Jobbed",
        }}
      />

      <ScrollView showsVerticalScrollIndicator={false}>
        {openNav ? (
          <Textual content>Nav is working</Textual content>
        ) : (
          <Textual content>Not working error !!!!!</Textual content>
        )}
        <View type={{ flex: 1, padding: SIZES.medium }}>
          <Welcome
            searchTerm={searchTerm}
            setSearchTerm={setSearchTerm}
            handleClick={() => {
              if (searchTerm) {
                router.push(`/search/${searchTerm}`);
              }
            }}
          />
          <Popularjobs />
          <Nearbyjobs />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const kinds = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: "middle",
    alignItems: "middle",
    backgroundColor: "rgba(0, 0, 0, 0.5)", // semi-transparent background
  },
  menu: {
    backgroundColor: COLORS.lightWhite,
    padding: SIZES.medium,
    borderRadius: 10,
  },
});

export default Dwelling;

i wish to have a navbar part however im testing it with simply an atypical view for now, the onPress doesnt set off the use state and that i dont know why. See how im testing it.

   {openNav ? (
          <Textual content>Nav is working</Textual content>
        ) : (
          <Textual content>Not working error !!!!!</Textual content>
        )}

The overall code is working cos it exhibits the choice of when the state is fake, the issue now’s the onpress isnt trigeering the operate to alter the state