How to use the @react-navigation/stack.HeaderStyleInterpolators.forFade function in @react-navigation/stack

inputRange: [0, 1],
					outputRange: [0, 0.5],
				}),
			},
		}
	},
}

const ModalScreenOptions: StackNavigationOptions = {
	headerShown: false,
	cardStyle: { backgroundColor: 'transparent' },
	transitionSpec: {
		open: TransitionSpecs.TransitionIOSSpec,
		close: TransitionSpecs.TransitionIOSSpec,
	},
	headerStyleInterpolator: HeaderStyleInterpolators.forFade,
	cardStyleInterpolator: ({ current }: StackCardInterpolationProps) => {
		return {
			cardStyle: {
				opacity: current.progress,
			},
		}
	},
}

function useLinking() {
	const [url, setUrl] = useState(null)
	const [error, setError] = useState()

	async function initialUrl() {
		try {
			const linkingUrl = await Linking.getInitialURL()

import * as RawComponents from '@berty-tech/components'
import mapValues from 'lodash/mapValues'
import { useMsgrContext } from '@berty-tech/store/hooks'
import { Routes } from './types'
import { MessengerAppState } from '@berty-tech/store/context'
import { dispatch, navigate } from '@berty-tech/navigation/rootRef'

const CustomTransitionOptions: StackNavigationOptions = {
	headerShown: false,
	gestureEnabled: true,
	gestureDirection: 'horizontal',
	transitionSpec: {
		open: TransitionSpecs.TransitionIOSSpec,
		close: TransitionSpecs.TransitionIOSSpec,
	},
	headerStyleInterpolator: HeaderStyleInterpolators.forFade,
	cardStyleInterpolator: ({ current, next, layouts }: StackCardInterpolationProps) => {
		return {
			cardStyle: {
				transform: [
					{
						translateX: current.progress.interpolate({
							inputRange: [0, 1],
							outputRange: [layouts.screen.width, 0],
						}),
					},
					{
						scale: next
							? next.progress.interpolate({
									inputRange: [0, 1],
									outputRange: [1, 0.9],
							  })