[iOS] Absolutely positioned elements above header are not pressable

[fredericocurti]

Description

Views placed in the header region render correctly on top of the header but don't receive touch events — they're visible yet completely non-interactive. A Pressable inside the header band does nothing on tap; an identical one just below the band works fine.

Probable cause: react-native-screens mounts a UIKit UINavigationBar layered above all RN content. RN can draw over the transparent bar, but UIKit's -hitTest:withEvent: returns the bar for any touch in its bounds, so the touch is consumed before reaching the RN view. zIndex and pointerEvents can't help — the bar is a native sibling above RN's reach.

Current behavior: The header blocks interactions

no.fix.mov

Expected: Taps on empty header area (not on a back/bar button) pass through to the RN views rendered behind the header.

with.fix.mov

Steps to reproduce

Position an absolutely positioned Pressable in the header area - Touch events do not register there

Snack or a link to a repository

https://github.com/fredericocurti/rn-screens-transparent-header-repro

Screens version

4.25.2

React Native version

0.85.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kkafar]

cc @kligarski, isn't it the problem you investigated recently?

[kligarski]

Hi, @fredericocurti. Thank you for reporting the issue.

The cause you described is more-or-less correct - in native-stack which is handled by UIKit's UINavigationController, UINavigationBar is attached above the displayed content therefore any touches in the header area will be handled by the header. This is the native behavior - that's how it works in bare UIKit app, without react-native. Please see the UIKit docs about hitTest:withEvent: method for more details.

UIKit reproduction (no `react-native`/`react-native-screens`)

import UIKit

@main
final class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        true
    }

    // Scene-based lifecycle (iOS 13+): tells UIKit to use SceneDelegate,
    // with no storyboard involved.
    func application(
        _ application: UIApplication,
        configurationForConnecting connectingSceneSession: UISceneSession,
        options: UIScene.ConnectionOptions
    ) -> UISceneConfiguration {
        let config = UISceneConfiguration(
            name: "Default Configuration",
            sessionRole: connectingSceneSession.role
        )
        config.delegateClass = SceneDelegate.self
        return config
    }
}


import UIKit

final class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(
        _ scene: UIScene,
        willConnectTo session: UISceneSession,
        options connectionOptions: UIScene.ConnectionOptions
    ) {
        guard let windowScene = scene as? UIWindowScene else { return }

        let window = UIWindow(windowScene: windowScene)
        let root = ReproViewController()
        window.rootViewController = UINavigationController(rootViewController: root)
        self.window = window
        window.makeKeyAndVisible()
    }
}


import UIKit

final class ReproViewController: UIViewController {

    private var headerTaps = 0 {
        didSet { headerButton.updateTitle(taps: headerTaps, label: "TAP ME (in header band)") }
    }
    private var bodyTaps = 0 {
        didSet { bodyButton.updateTitle(taps: bodyTaps, label: "TAP ME (below header band)") }
    }

    private let scrollView = UIScrollView()
    private let stack = UIStackView()
    private let headerButton = PillButton()
    private let bodyButton = PillButton()

    private let colors: [UIColor] = [
        UIColor(red: 1.00, green: 0.42, blue: 0.42, alpha: 1), // #FF6B6B
        UIColor(red: 1.00, green: 0.66, blue: 0.30, alpha: 1), // #FFA94D
        UIColor(red: 1.00, green: 0.83, blue: 0.23, alpha: 1), // #FFD43B
        UIColor(red: 0.41, green: 0.86, blue: 0.49, alpha: 1), // #69DB7C
        UIColor(red: 0.22, green: 0.85, blue: 0.66, alpha: 1), // #38D9A9
        UIColor(red: 0.30, green: 0.67, blue: 0.97, alpha: 1), // #4DABF7
        UIColor(red: 0.46, green: 0.56, blue: 0.99, alpha: 1), // #748FFC
        UIColor(red: 0.59, green: 0.46, blue: 0.98, alpha: 1), // #9775FA
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Transparent header"
        view.backgroundColor = .white

        configureTransparentNavBar()
        layoutScrollingBands()
        layoutOverlayButtons()
    }

    // MARK: - headerTransparent: true, UIKit-native

    private func configureTransparentNavBar() {
        guard let nav = navigationController else { return }
        let appearance = UINavigationBarAppearance()
        appearance.configureWithTransparentBackground() // no fill, no shadow
        nav.navigationBar.standardAppearance = appearance
        nav.navigationBar.scrollEdgeAppearance = appearance
        nav.navigationBar.compactAppearance = appearance

        // Content already extends under the bar by default; spelled out
        // here for clarity.
        edgesForExtendedLayout = .all
        extendedLayoutIncludesOpaqueBars = true
    }

    private func layoutScrollingBands() {
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])

        stack.axis = .vertical
        stack.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(stack)
        NSLayoutConstraint.activate([
            stack.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            stack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            stack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
        ])

        for color in colors {
            let band = UIView()
            band.backgroundColor = color
            band.translatesAutoresizingMaskIntoConstraints = false
            band.heightAnchor.constraint(equalToConstant: 120).isActive = true
            stack.addArrangedSubview(band)
        }
    }

    // MARK: - Floating overlay buttons, same offsets as the RN repro

    private func layoutOverlayButtons() {
        headerButton.onTap = { [weak self] in self?.headerTaps += 1 }
        bodyButton.onTap = { [weak self] in self?.bodyTaps += 1 }

        headerButton.updateTitle(taps: 0, label: "TAP ME (in header band)")
        bodyButton.updateTitle(taps: 0, label: "TAP ME (below header band)")

        for button in [headerButton, bodyButton] {
            button.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview(button)
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        }

        // Same offsets as the RN repro: 60pt (inside header band) vs 300pt.
        headerButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 60).isActive = true
        bodyButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 300).isActive = true
    }
}

// MARK: - Pill-shaped tappable view, styled to match the RN buttons

final class PillButton: UIView {

    var onTap: (() -> Void)?

    private let titleLabel = UILabel()
    private let countLabel = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.black.withAlphaComponent(0.82)
        layer.cornerRadius = 24

        titleLabel.textColor = .white
        titleLabel.font = .boldSystemFont(ofSize: 15)
        countLabel.textColor = .white
        countLabel.alpha = 0.85
        countLabel.font = .systemFont(ofSize: 13)

        let textStack = UIStackView(arrangedSubviews: [titleLabel, countLabel])
        textStack.axis = .vertical
        textStack.alignment = .center
        textStack.spacing = 2
        textStack.translatesAutoresizingMaskIntoConstraints = false
        textStack.isUserInteractionEnabled = false
        addSubview(textStack)
        NSLayoutConstraint.activate([
            textStack.topAnchor.constraint(equalTo: topAnchor, constant: 12),
            textStack.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12),
            textStack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            textStack.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
        ])

        addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
    }

    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }

    func updateTitle(taps: Int, label: String) {
        titleLabel.text = label
        countLabel.text = "taps: \(taps)"
    }

    @objc private func handleTap() {
        UIView.animate(withDuration: 0.1, animations: { self.alpha = 0.5 }) { _ in
            UIView.animate(withDuration: 0.1) { self.alpha = 1 }
        }
        onTap?()
    }
}

UIKit_4245.mov

If you want to add any custom views over the header, please use headerTitle/headerLeft/headerRight. Here is your reproduction example adapted to this approach:

Example with `headerTitle`

import * as React from 'react';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';

const Stack = createNativeStackNavigator();

const renderHeaderTapButton = () => <HeaderTapButton />;

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Repro"
          component={ReproScreen}
          options={{
            headerTransparent: true,
            headerTitle: renderHeaderTapButton,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HeaderTapButton() {
  const [taps, setTaps] = useState(0);
  return (
    <Pressable
      style={({ pressed }) => [styles.btnVisual, pressed && styles.pressed]}
      onPress={() => setTaps(n => n + 1)}
      hitSlop={8}>
      <Text style={styles.btnText}>TAP ME (headerTitle)</Text>
      <Text style={styles.count}>taps: {taps}</Text>
    </Pressable>
  );
}

function ReproScreen() {
  const [bodyTaps, setBodyTaps] = useState(0);

  return (
    <View style={styles.root}>
      <ScrollView contentContainerStyle={styles.scroll}>
        {COLORS.map((c, i) => (
          <View key={i} style={[styles.band, { backgroundColor: c }]} />
        ))}
      </ScrollView>

      <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
        <Pressable
          style={({ pressed }) => [
            styles.btnVisual,
            styles.inBody,
            pressed && styles.pressed,
          ]}
          onPress={() => setBodyTaps(n => n + 1)}>
          <Text style={styles.btnText}>TAP ME (below header band)</Text>
          <Text style={styles.count}>taps: {bodyTaps}</Text>
        </Pressable>
      </View>
    </View>
  );
}

const COLORS = [
  '#FF6B6B',
  '#FFA94D',
  '#FFD43B',
  '#69DB7C',
  '#38D9A9',
  '#4DABF7',
  '#748FFC',
  '#9775FA',
];

const styles = StyleSheet.create({
  root: { flex: 1 },
  scroll: { paddingBottom: 80 },
  band: { height: 120 },
  btnVisual: {
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 24,
    backgroundColor: 'rgba(0,0,0,0.82)',
    alignItems: 'center',
  },
  inBody: {
    position: 'absolute',
    alignSelf: 'center',
    top: 300,
  },
  pressed: { opacity: 0.5 },
  btnText: { color: '#fff', fontSize: 15, fontWeight: '700' },
  count: { color: '#fff', fontSize: 13, opacity: 0.85, marginTop: 2 },
});

4245.mov

There might a possibility to disable user interaction directly on the navigation bar but we don't think this is a valid use case and we're currently not planning to implement it.

If you have any further questions, please let us know.

[fredericocurti]

@kligarski Thanks for the quick response here:
Just want to raise that there's a compelling use case for this, since anything placed in the headerTitle removes the progressive blur effect at the top, leaving us with no way of achieving that effect while having a custom node in the center
This is also made worse because visually elements are rendered above the native header layer (shadows/elevation and all) but the presses don't work. You can even place a expo-glass-effect view there, it becomes interactive (liquid glass fidget and press behavior works) but the Press events don't.