How to use the @react-navigation/native.useNavigation function in @react-navigation/native

export const useReadEffect = (publicKey, timeout) => {
	// timeout is the duration (in ms) that the user must stay on the page to set messages as read
	const navigation = useNavigation()

	const ctx = useMsgrContext()

	const fake = useConversation(publicKey)?.fake || false

	useEffect(() => {
		if (fake) {
			return
		}
		let timeoutID = null
		const handleStart = () => {
			if (timeoutID === null) {
				timeoutID = setTimeout(() => {
					timeoutID = null
					ctx.client.conversationOpen({ groupPk: publicKey }).catch((err) => {
						console.warn('failed to open conversation,', err)

export const useReadEffect = (publicKey: Maybe, timeout: Maybe) => {
	// timeout is the duration (in ms) that the user must stay on the page to set messages as read
	const navigation = useNavigation()

	const ctx = useMsgrContext()

	const conv = useConversation(publicKey)
	const fake = (conv && (conv as any).fake) || false

	useEffect(() => {
		if (fake) {
			return
		}
		let timeoutID: ReturnType | null = null
		const handleStart = () => {
			if (timeoutID === null) {
				let t = timeout
				if (typeof t !== 'number') {
					t = 1000

export const Home: React.FC = () => {
	const account = useAccount()
	const [{ flex, background, row, margin }] = useStyles()
	const navigation = useNativeNavigation()

	return (
		<>

const InvalidScanDismissButton: React.FC<{}> = () => {
	const _styles = useStylesInvalidScan()
	const [{ row, margin, color, padding, text }] = useStyles()
	const navigation = useNavigation()

	return (
		
			{(t: any): React.ReactNode => (

}> = ({ conversationPublicKey }) => {
	const ctx = useMsgrContext()
	const conversation = ctx.conversations[conversationPublicKey as string]
	const services = useAccountServices()
	const navigation = useNavigation()
	const [{ margin, color, flex, padding }] = useStyles()
	const { t } = useTranslation()

	const replicationStatus = getAllReplicationStatusForConversation(conversation, services)

	return (

function Screen(): React.ReactElement {
  const [rooms, setRooms] = useState(initRooms);
  const navigation = useNavigation();

  const onItemClick = (itemId: string): void => {
    navigation.navigate('Chat', { chatId: itemId });
  };

  const renderItem = (item: Chatroom, index: number): React.ReactElement => {
    return (
       onItemClick(item.id)}
      />
    );
  };
  return (

function RootNavigator(): ReactElement {
  const navigation = useNavigation();
  const { state } = useProfileContext();
  const modalEl = useRef(null);
  state.modal = modalEl;
  return (

const BodyDevTools: React.FC<{}> = () => {
	const _styles = useStylesDevTools()
	const [{ padding, flex, margin, color, text }] = useStyles()
	const { navigate } = useNavigation()
	const navigation = useNativeNavigation()
	const ctx = useMsgrContext()
	const { t } = useTranslation()

	const items =
		t('settings.devtools.tor-button', {
			option: '',
		})?.length &&
		t('settings.devtools.tor-disabled-option')?.length &&
		t('settings.devtools.tor-optional-option')?.length &&
		t('settings.devtools.tor-required-option')?.length
			? [
					{
						label: t('settings.devtools.tor-button', {
							option: t('settings.devtools.tor-disabled-option'),
						}),
						value: t('settings.devtools.tor-disabled-option'),

export default function useCompatNavigation<
  T extends NavigationProp
>() {
  const navigation = useNavigation();
  const route = useRoute();

  return React.useMemo(
    () =>
      createCompatNavigationProp(
        navigation,
        route as any
      ) as CompatNavigationProp,
    [navigation, route]
  );
}

const HomeBodySettings: React.FC<{}> = () => {
	const [{ flex, color, padding, text, margin, column }] = useStyles()
	const navigation = useNativeNavigation()
	const ctx = useMsgrContext()
	const isPrefMode = ctx.persistentOptions.preset.value === 'performance'
	const enableNotif = ctx.persistentOptions.notifications.enable

	const items: any = Object.entries(languages).map(([key, attrs]) => ({
		label: attrs.localName,
		value: key,
	}))

	items.push({ label: 'Debug', value: 'cimode' })
	return (
		
			{(t: any): React.ReactNode => (