React Navigator's StackNavigator and a screen

ScreenName.tsx

import React, { useEffect, useState, useContext, FC } from 'react'
import { StyleSheet, SafeAreaView, FlatList } from 'react-native'
import { StackNavigationProp } from '@react-navigation/stack'
import { RouteProp } from '@react-navigation/native'
import { HomeScreenStackParamList } from '../navigation/navigationTypes'

interface Props {
  navigation: StackNavigationProp<ScreenNameStackParamList, 'Home'>
  route: RouteProp<ScreenNameStackParamList, 'Home'>
}

/**
 * Screen component description
 *
 * @returns Screen
 */
const HomeScreen: FC<Props> = ({ route, navigation }) => {
  // From the previous screen
  const initialData = route?.params?.data

  // Context
  const { fromContext } = useContext(ContextName)

  // Custom hooks
  const { output } = useCustomHook()

  // Internal state
  const [data, setData] = useState<DataType>(initialData)

  useEffect(() => {
    let mounted = true
    // Declaration
    const init = async (): Promise<void> => {
      const result = await getResult(fromContext)
      // protect delayed effects that could happen after that the component un-mount
      if (mounted) setData(result)
    }
    // Execution
    init(fromContext)
    // cleanup
    return (): void => {
      mounted = false
    }
  }, [fromContext])

  // Component JSX
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.inContainer}
        data={data}
        renderItem={(item): JSX.Element => <RenderItem item={item} />}
        keyExtractor={(item): string => item.id}
      />
    </SafeAreaView>
  )
}

/// Styles ///
const styles = StyleSheet.create({
  container: {
    flex: 1, // full space
    flexDirection: 'row', // elements disposition
    justifyContent: 'center', // following flexDirection
    alignItems: 'center', // perpendicular to flexDirection
  },
  inContainer: {
    alignSelf: 'center', // following flex direction
  },
})

export default HomeScreen

StackNavigator.tsx

import React, { FC } from 'react'
import { StatusBar } from 'react-native'

// Screens
import HomeScreen from '../screens/HomeScreen'
import PostScreen from '../screens/content/PostScreen'

// Components
import Logo from '../components/Logo'

// Navigation
import { createStackNavigator } from '@react-navigation/stack'
import screenOptions from '../constants/ScreenOptions'
import { HomeStackParamList } from '../screens/HomeScreen'

// Create the stack navigator
const HomeStack = createStackNavigator<HomeStackParamList>()

/**
 * Home "stack navigator"
 * This is the navigator for everything located under "home"
 */
const StackNavigator: FC = () => {
  return (
    <>
      <StatusBar backgroundColor={colors.background} barStyle="dark-content" />
      <HomeStack.Navigator screenOptions={screenOptions}>
        <HomeStack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitle: (props): JSX.Element => <Logo {...props} />,
          }}
        />
        <HomeStack.Screen name="Post" component={PostScreen} options={{ headerTransparent: true, title: '' }} />
      </HomeStack.Navigator>
    </>
  )
}

export default StackNavigator