onPress Event is not firing in expo react-native

July 15, 2024

I’m following the youtube tutorial react native full course (2:32:54) but when i code along the onPress event isnot firining for me, i asked in ai and search other stackoverflow post nothing working for me.my code is exactly same as instructor’s. only diffrence i’m running in iOS simulator.can anyone help me on this?

import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { Image, TouchableOpacity, View } from "react-native";

export default function Introduction({ business }) {
  return (
    <View>
      <View
        style={{
          position: "absolute",
          zIndex: 10,
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          width: "100%",
          padding: 20,
        }}
      >
        <TouchableOpacity onPress={() => console.log("Pressed")}>
          <Ionicons name="arrow-back-circle" size={40} color="white" />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => console.log("Pressed")}>
          <Ionicons name="heart-outline" size={40} color="white" />
        </TouchableOpacity>
      </View>
      <Image
        source={{ uri: business?.imageUrl }}
        style={{
          width: "100%",
          height: 340,
        }}
      />
    </View>
  );
}

>Solution :

Looks like the status bar from your phone is getting the way as your buttons are positioned at the top of your screen. You can hide it using StatusBar component to make your buttons work as expected:

...
import { Image, TouchableOpacity, View, StatusBar } from "react-native";

export default function Introduction({ business }) {
  return (
    <View>
      <StatusBar hidden={true} />

      ...
    </View>
  );
}