The onPress button in my native app isnt working for some reason

Question

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

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

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

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

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

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

export default Home;

i want to have a navbar component but im testing it with just an ordinary view for now, the onPress doesnt trigger the use state and i dont know why. See how im testing it.

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

The general code is working cos it shows the option of when the state is false, the problem now is the onpress isnt trigeering the function to change the state

Answer 1

It would appear that you ScreenHeaderBtn component contains another "clickable" element, that being said it's hard to tell without the source code, which is taking priority over TouchableOpacity. This means that the onPress is being sent to the child component(s) instead of the TouchableOpacity.

Here is an example with a non-pressable child, where the intended event occurs:

<TouchableOpacity onPress={onPress}>  
  <Text>Hi</Text>
</TouchableOpacity>

Although, with a Button instead it no longer will work:

<TouchableOpacity onPress={onPress}>
  <Button title="Hi" />
</TouchableOpacity>