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

}> = ({ id, convKind, members, previousMessageId, nextMessageId, convPK }) => {
	const ctx = useMsgrContext()
	const inte = useInteraction(id, convPK)
	const previousMessage = useInteraction(previousMessageId, convPK)
	const nextMessage = useInteraction(nextMessageId, convPK)
	const client: any = useClient()
	const navigation = useNativeNavigation()
	const _styles = useStylesMessage()
	const [{ row, margin, padding, column, text, border, color, flex }, { scaleSize }] = useStyles()
	const lastInte = useLastConvInteraction(convPK, interactionsFilter)
	if (!inte) {
		return null
	}
	let monitorPayload
	if (inte.type === messengerpb.AppMessage.Type.TypeMonitorMetadata) {
		/* typespb.MonitorGroup.TypeEventMonitor */
		const monitorEvent = inte.payload.event
		switch (monitorEvent.type) {
			case eventMonitorTypes.TypeEventMonitorAdvertiseGroup:
				const msgAdvertise = `local peer advertised ${monitorEvent.advertiseGroup.peerId.substr(
					monitorEvent.advertiseGroup.peerId.length - 10,
				)} on ${monitorEvent.advertiseGroup.driverName}, with ${
					monitorEvent.advertiseGroup.maddrs.length

export default function useScrollToTop(
  ref: React.RefObject<ScrollableWrapper>
) {
  const navigation = useNavigation();
  const route = useRoute();

  React.useEffect(() => {
    let current = navigation;

    // The screen might be inside another navigator such as stack nested in tabs
    // We need to find the closest tab navigator and add the listener there
    while (current && current.dangerouslyGetState().type !== 'tab') {
      current = current.dangerouslyGetParent();
    }

    if (!current) {
      return;
    }

    const unsubscribe = current.addListener(

}> = ({ inte, msgBorderColor, isFollowedMessage, msgBackgroundColor, msgTextColor }) => {
	const {
		payload: { body: message },
	} = inte

	const client = useClient()
	const navigation = useNativeNavigation()
	const [{ margin, padding, column, border }, { scaleSize }] = useStyles()
	const [isReadMore, setReadMore] = useState(false)

	useEffect(() => {
		message && setReadMore(message.length > READ_MORE_MESSAGE_LENGTH)
	}, [message])

	return (
		<View
			style={[
				border.radius.top.medium,
				inte.isMine ? border.radius.left.medium : border.radius.right.medium,
				msgBorderColor,
				inte.isMine && border.scale(2),
				padding.horizontal.scale(inte.isMine ? 11 : 13),
				padding.vertical.scale(inte.isMine ? 7 : 9),

const DeleteAccountContent: React.FC<{}> = () => {
	const { deleteAccount } = useMsgrContext()
	const _styles = useStylesDeleteAccount()
	const [{ row, margin, background, border, color, padding, text, column }] = useStyles()
	const navigation = useReactNavigation()
	const [deleteConfirmation, setDeleteConfirmation] = useState<string>()
	const confirmed = deleteConfirmation === DELETE_STR

	return (
		<Translation>
			{(t: any): React.ReactNode => (
				<>
					<DeleteAccountError error={t('settings.delete-account.first-desc')} />
					<View style={[padding.horizontal.medium, padding.bottom.medium]}>
						<Text style={[text.color.red, text.align.center, text.bold.small]}>
							{t('settings.delete-account.desc')}
						</Text>
					</View>
					<View style={[column.justify]}>
						<TextInput
							style={[