0

I am using react navigation v6 with react native. I have a custom header component that I want at the top of all of my screens in my Tab.Navigator. This custom header includes a reanimated animation when you press on the search icon which is at the top right. I think it's not working because every time a new tab is opened, the header is rendered as many times as there are tabs opened in the history. The first render begins the animation but then it's disrupted by the new render. I'm not 100% sure though. How do I prevent my header component from rerendering? Here is the wrapper for my Tab.Navigator:

<Tab.Navigator
    tabBar={(props) => <TabBar {...props} />}
    backBehavior="history"
    screenOptions={{
    header: (props) => <Header green={true} />,
        }}
    initialRouteName="HomeStack">

My prop green={true} also never changes.

Cole
  • 207
  • 2
  • 11

0 Answers0