ActionBar Blocking Events on Android by default

[AndriusZal]

Issue Description

I would like to report an issue regarding the ActionBar element in NativeScript on Android. During my testing, I've observed that the ActionBar element blocks events for the rootView component unless I add an event listener specifically to the action bar. This behavior seems to affect Android only; on iOS, I don't encounter this issue.

Specifically, when I add an event listener to the action bar, I can see that events are bubbling up properly. However, this solution becomes cumbersome when dealing with a large number of pages, as I need to add an empty event listener to each action bar separately. Moreover, since I might need to create pages dynamically, this approach becomes impractical.

I believe that this issue may hinder the development process, especially for projects with complex navigation structures or dynamic page creation requirements. It would be ideal if events could propagate from the action bar to the rootView component without the need for additional event listeners or other flags.

I appreciate your attention to this matter and would be grateful for any assistance or insights on how to address this issue.

Thank you.

Reproduction

It can be reproduced easily by adding event listener to rootView when it gets initialised. When the app is running, the event is triggered anywhere on the screen except the ActionBar element. When I hide the ActionBar element, all screen is accessible. On iOS this issue is not applicable.

Relevant log output (if applicable)

No response

Environment

OS: macOS 14.4.1
CPU: (12) x64 Apple M2 Pro
Shell: /bin/zsh
node: 21.7.2
npm: 10.3.0
nativescript: 8.7.0

# android
java: 18.0.2.1
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 15.3/15E204a
cocoapods: 1.15.2
python: 2.7.18
python3: 3.11.5
ruby: 2.7.6
platforms: 
  - DriverKit 23.4
  - iOS 17.4
  - macOS 14.4
  - tvOS 17.4
  - visionOS 1.1
  - watchOS 10.4

Dependencies

"dependencies": {
  "@nativescript/core": "~8.7.0",
  "@nativescript/theme": "~3.0.2"
},
"devDependencies": {
  "@nativescript/android": "8.7.0",
  "@nativescript/ios": "8.7.0",
  "@nativescript/webpack": "~5.0.19"
}

Please accept these terms

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• This is a bug report
• I agree to follow this project's Code of Conduct

[CatchABus]

That seems to be the native behaviour as explained here: https://stackoverflow.com/questions/30425786/how-to-click-views-behind-a-toolbar

We can probably use the solution described.

[AndriusZal]

If I understand correctly, this solution advises me to create a separate class with toolbar extension and use that class to create each toolbar. Is there a possibility to have a solution from NativeScript side that I would be able to keep my implementation on JS?

[AndriusZal]

UPDATE: apparently, not only ActionBar element don't pass the events to the parent element by default. After some more testing I've found that that if you wrap your elements in ScrollView, all the events around the screen will not be passed as well. In this example, I have attached event listener to the rootView and I will only be able to trigger event if I press on the button because it has another event listener attached.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="My App" icon="" />
    <ScrollView>
        <StackLayout class="p-20">
            <Label text="Tap the button" class="h1 text-center" />
            <Button text="TAP" tap="{{ onTap }}" class="-primary" />
            <Label text="{{ message }}" class="h2 text-center" textWrap="true" />
        </StackLayout>
    </ScrollView>
</Page>

If I remove ScrollView, then I will get events across all screen except ActionBar:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar title="My App" icon="" />
      <StackLayout class="p-20">
          <Label text="Tap the button" class="h1 text-center" />
          <Button text="TAP" tap="{{ onTap }}" class="-primary" />
          <Label text="{{ message }}" class="h2 text-center" textWrap="true" />
      </StackLayout>
</Page>