Access navigation prop from navigationOpstions with funcional components

Question

I want to add a openDrawer button at my nested stack navigation header, and for this I need to access navigation prop from navigationOpstions with funcional components.

Thats my code:

import React from 'react'
import { StatusBar, TouchableOpacity, Text } from "react-native"
import { Container } from "./styles"
import HomeHeader from "./Header"
import HomeBody from "./Body"
import HomeFooter from "./Footer"

import Icon from "react-native-vector-icons/AntDesign"

import CoBrandConfig from "../../../config/CoBrand/config"

export default function Perfil ({ navigation }, props) {

  return(
    <Container>
      <StatusBar barStyle={`${CoBrandConfig.Home.HOME_STATUSBAR_CONTENT}`}
        backgroundColor={CoBrandConfig.Home.HOME_STATUSBAR_COLOR} />
      <TouchableOpacity onPress={() => navigation.navigate("PerfilEditar")}>
        <Text>EDITAR</Text>
      </TouchableOpacity>
      <HomeHeader />
      <HomeBody />
      <HomeFooter />
    </ Container>
  )
}

Perfil.navigationOptions = {
  headerLeft: <Icon.Button name={"menuunfold"} size={24} color={"#f2f2f2"} backgroundColor={"#229182"}
  onPress={() => this.navigation.navigate(openDrawer)}/>,
}

Answer 1

You can assign Perfil.navigationOptions to a function which takes in an object containing navigation, and returns the navigationOptions object.

Perfil.navigationOptions = ({ navigation }) => ({
  headerLeft: <Icon.Button name={"menuunfold"} size={24} color={"#f2f2f2"} 
                 backgroundColor={"#229182"}
                 onPress={() => navigation.navigate(openDrawer)}/>
})