[{"data":1,"prerenderedAt":98},["ShallowReactive",2],{"/2025/12/28-react-navigation-handle-header-button-click-on-child-screen-or-component":3},{"id":4,"title":5,"body":6,"date":89,"description":67,"extension":90,"meta":91,"navigation":92,"path":93,"robots":94,"seo":95,"stem":96,"__hash__":97},"posts/2025/12/28 React-navigation-handle-header-button-click-on-child-screen-or-component.md","28 React Navigation Handle Header Button Click On Child Screen Or Component",{"type":7,"value":8,"toc":86},"minimark",[9,18,25,28,31,33,36,38,55,68,70,73],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"react-navigation-handle-header-button-click-on-child-screen-or-component","React Navigation Handle Header Button Click on Child Screen or Component",[19,20,21],"notes",{},[22,23,24],"p",{},"This is a repost from my old blog. First posted in 11/11/2020.",[26,27],"br",{},[22,29,30],{},"I have a react native application which I need to handle header button / action button click on the detail screen. And the journey to solve it was not a short one.",[26,32],{},[22,34,35],{},"On the parent screen, I have defined a stack navigation and set the header button. Then I need to handle the header button click on the child screen. I read about passing the function as parameter but it's not easy. There are also options to useEffect or ref, but none of them are working for me.",[26,37],{},[22,39,40,41,49,50,54],{},"In the end, the one that works for me and pretty clean too is by using ",[42,43,48],"code",{"className":44},[45,46,47],"bg-gray-200","p-2","rounded","React.useLayoutEffect"," and ",[42,51,53],{"className":52},[45,46,47],"navigation.setOptions",":",[56,57,58],"code-block",{},[59,60,65],"pre",{"className":61,"code":63,"language":64},[62],"language-text","const ChildScreen = ({navigation, route}) => {\n  React.useLayoutEffect(() => {\n    navigation.setOptions({\n      headerRight: () => (\n        \u003CButton onPress={() => ...} title=\"Right\" />\n      ),\n    });\n  }, [navigation]);\n  \n  return (...)\n};\n","text",[42,66,63],{"__ignoreMap":67},"",[26,69],{},[22,71,72],{},"Reference:",[22,74,75],{},[76,77,80],"span",{"className":78},[79],"text-blue-600",[81,82,83],"a",{"href":83,"rel":84},"https://reactnavigation.org/docs/header-buttons/#header-interaction-with-its-screen-component",[85],"nofollow",{"title":67,"searchDepth":87,"depth":87,"links":88},2,[],"2025-12-28T00:00:00.000Z","md",{},true,"/2025/12/28-react-navigation-handle-header-button-click-on-child-screen-or-component",null,{"title":5,"description":67},"2025/12/28 React-navigation-handle-header-button-click-on-child-screen-or-component","TKEpo6d2oZUwVTM0RTO9WQHiKbzjhZNkvgVbn0uaADQ",1785167452039]