React Native Hooks

Question

I have these two classes and want to move to two functions without using this. Only with Hoocks(useNavigation).

Página Home:

import React, { Component } from 'react'
import { Text, View, SafeAreaView, StatusBar, TouchableOpacity } from 'react-native';
import { CustomHeader } from '../CustomHeader'

export class HomeScreen extends Component{
    render(){

            return (
              <SafeAreaView style={{ flex: 1}}>
                    <CustomHeader title="Home" isHome={true} navigation={this.props.navigation}/>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text>Home!</Text>
                        <TouchableOpacity
                         style={{marginTop:20}}
                         onPress={() => this.props.navigation.navigate('HomeDetail')}
                        >
                            <Text>Go Home Detail</Text>
                        </TouchableOpacity>
                    </View>
              </SafeAreaView>
            );

    }
}

Custom header inserted inside the Home:

import React, { Component } from 'react'
import { Text, View, SafeAreaView, StatusBar, TouchableOpacity } from 'react-native';
import { MaterialIcons, MaterialCommunityIcons, Ionicons, AntDesign } from '@expo/vector-icons'

export class CustomHeader extends Component{
    render(){
        return(
            <View style={{flexDirection: 'row', height: 50, }}>
                <StatusBar hidden={true}/>
                <View style={{flex:1, justifyContent: 'center'}}>
                {
                    this.props.isHome?
                        <TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
                        <MaterialIcons name='menu' size={40} style={{marginLeft:9}} /> 
                        </TouchableOpacity>
                    :
                        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => this.props.navigation.goBack()}>
                        <AntDesign name='back' size={40} style={{marginLeft: 9}}/>
                        <Text>Back</Text>
                        </TouchableOpacity>

        }
                </View>
                <View style={{flex:1.5, justifyContent:'center'}}>
                    <Text style={{textAlign:'center'}}>{this.props.title}</Text>
                </View>
                <View style={{flex:1, }}></View>
            </View>

        )
    }
}

Answer 1

Altered code:

import React, {  } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, SafeAreaView } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import CustomHeader  from '../components/CustomHeader'

export default function HomeScreen(){
    const navigation = useNavigation()
    return(
        <View style={{ flex: 1}}>
                    <CustomHeader title="Home" isHome={true}/>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text>Home!</Text>
                        <TouchableOpacity
                         style={{marginTop:20}}
                         onPress={() => navigation.navigate('Profile')}
                        >
                            <Text>Go Profile</Text>
                        </TouchableOpacity>
                    </View>
              </View>
    )
}

Header:

import React, { Component } from 'react'
import { Text, View, SafeAreaView, StatusBar, TouchableOpacity } from 'react-native';
import { MaterialIcons, MaterialCommunityIcons, Ionicons, AntDesign } from '@expo/vector-icons'
import { useNavigation } from '@react-navigation/native'

export default function CustomHeader(props){
    const navigation = useNavigation()
        return(
            <View style={{flexDirection: 'row', height: 50, }}>
                <StatusBar hidden={true}/>
                <View style={{flex:1, justifyContent: 'center'}}>
                {
                    props.isHome?
                        <TouchableOpacity onPress={() => navigation.openDrawer()}>
                        <MaterialIcons name='menu' size={40} style={{marginLeft:9}} /> 
                        </TouchableOpacity>
                    :
                        <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => navigation.goBack()}>
                        <AntDesign name='back' size={40} style={{marginLeft: 9}}/>
                        <Text>Back</Text>
                        </TouchableOpacity>

        }
                </View>
                <View style={{flex:1.5, justifyContent:'center'}}>
                    <Text style={{textAlign:'center'}}>{props.title}</Text>
                </View>
                <View style={{flex:1, }}></View>
            </View>

        )
    }