gistfile1.md

TouchableOpacity in headerLeft not working with headerTransparent: true

Steps to reproduce:

1- Create a Stack navigator with headerLeft component containing a TouchableOpacity
2- Set headerTransparent: true in screen options
3- Run on iOS/Android (specify which you tested)
4- Try to press the TouchableOpacity in headerLeft

Expected: TouchableOpacity onPress should fire and console.log should appear

Actual: TouchableOpacity is not clickable, no console.log output, touch events are blocked

Minimal Code:

import { Stack, useRouter } from 'expo-router';
import React from 'react';
import { View } from 'react-native';
import { Icon } from '@/components/ui/icon';
import { ChevronLeft } from 'lucide-react-native';
import { TouchableOpacity } from 'react-native';

export default function Layout() {
  const router = useRouter();
  return (
    <Stack screenOptions={{}}>
      <Stack.Screen
        name="index"
        options={{
          title: 'Contacts',
          headerLeft: ({ canGoBack, href }) => (
            <View pointerEvents="box-none">
              <TouchableOpacity
                onPress={() => {
                  console.log("clicked")
                }}>
                <View className="h-10 w-10 items-center justify-center rounded-full bg-secondary">
                  <Icon as={ChevronLeft} />
                </View>
              </TouchableOpacity>
            </View>
          ),
          headerTransparent: true,
          headerTitle: '',
        }}
      />
    </Stack>
  );
}

this gist created for expo issue