Header ActionComponent events are not working

[maqeelqureshi]

Describe the bug

I am trying to add animated drawer button in header component. Component is rendering properly but it's events are not working. If i use header left/right icons then onPress events works fine,

    ` import { Button, Header } from "../../components"
       <Header
      titleTx="screen1.title"
      LeftActionComponent={
        <Button
          text="drawer"
          onPress={() => {
            console.log("drawer clikced")
          }}
        ></Button>

        // <DrawerIconButton
        //   onPress={() => {
        //     toggleDrawer()
        //   }}
        //   {...{ open, progress }}
        // />
      }
      onLeftPress={() => {
        console.log("onLeftPress")
      }}
    />`

Ignite version

8.1.0

Additional info

System
  platform           win32           
  arch               x64             
  cpu                8 cores          Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz 
  directory          igniteMerge   C:\\src\igniteMerge

JavaScript (and globally-installed packages)
  node                 14.18.1      C:\Program Files\nodejs\node.EXE
  npm                  8.19.2       C:\Program Files\nodejs\npm.CMD
    @ionic/cli         6.18.1      
    appcenter-cli      2.10.8      
    bundler            0.8.0       
    cordova            11.0.0      
    cors-anywhere      0.4.4       
    cost-of-modules    1.0.1       
    git                0.1.5       
    npm                8.19.2      
    react-native-cli   2.0.1       
    react-native       0.66.2      
    udemy-dl           2.0.7       
    yarn               1.22.17     
  yarn                 1.22.17      C:\Users\..\AppData\Roaming\npm\yarn.CMD 
  pnpm                 -            not installed
  expo                 46.0.15      managed

Ignite
  ignite-cli         8.1.0        C:\Users\..\AppData\Local\npm-cache\_npx\e31027f3785124a8\node_modules\.bin\ignite.CMD  
  ignite src         build        C:\Users\..\AppData\Local\npm-cache\_npx\e31027f3785124a8\node_modules\ignite-cli\build 

Android
  java               11.0.16.1    C:\Program Files\Microsoft\jdk-11.0.16.101-hotspot\bin\java.EXE      
  android home       -            C:\Users\..\AppData\Local\Android\Sdk

[frankcalise]

This is a bug found in <Header />. Because of the zIndex from the title, it makes the button hard to press. If you stick to the outer part of the button you can sometimes get it depending on the specifics of your button. You can visibly see the issue with the element inspector:

Green is padding from the label, blue is where text would show. It overpowers the button label in this case. If you press at the top or bottom edge the onPress fires correctly.

[frankcalise]

@maqeelqureshi in <DrawerIconButton /> add a zIndex: 2 to the $container style and let me know if that fixes things for you, seems to be solving the issue on my end.

@yulolimum Should we just better document the ActionComponent prop? Or just throw it in a view wrapper with a zIndex set? The reason it works for content or icon is because it is set on those styles (but we wouldn't know the specifics of a passed in ActionComponent to override the style.

 if (ActionComponent) return ActionComponent

const $actionTextContainer: ViewStyle = {
  flexGrow: 0,
  alignItems: "center",
  justifyContent: "center",
  height: "100%",
  paddingHorizontal: spacing.medium,
  zIndex: 2,
}

const $actionIconContainer: ViewStyle = {
  flexGrow: 0,
  alignItems: "center",
  justifyContent: "center",
  height: "100%",
  paddingHorizontal: spacing.medium,
  zIndex: 2,
}

[maqeelqureshi]

@frankcalise adding zIndex: 2 to the $container style fixed it. Thanks

[infinitered-circleci]

:tada: This issue has been resolved in version 8.4.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[maqeelqureshi]

Same issue in ignite 9 (IOS only).