feat: add support for custom screen transitions with native-stack v7

[tboba]

Motivation

This PR intents to add implementation of custom screen transitions, recently added in react-native-screens. You can find more about this feature here.

Test plan

Go to the code of the native stack in example (NativeStack.tsx) and wrap whole navigator with (import from react-native-screens/gesture-handler). After that, use goBackGesture prop on the desired screen.

Ready to paste code 🍝

```tsx import { Button, Text, useHeaderHeight } from '@react-navigation/elements'; import { type PathConfigMap, useTheme } from '@react-navigation/native'; import { createNativeStackNavigator, type NativeStackScreenProps, useAnimatedHeaderHeight, } from '@react-navigation/native-stack'; import * as React from 'react'; import { Animated, Platform, ScrollView, StyleSheet, View } from 'react-native'; import { COMMON_LINKING_CONFIG } from '../constants'; import { Albums } from '../Shared/Albums'; import { Article } from '../Shared/Article'; import { NewsFeed } from '../Shared/NewsFeed'; import { GestureDetectorProvider } from 'react-native-screens/gesture-handler'; export type NativeStackParams = { Article: { author: string } | undefined; NewsFeed: { date: number }; Albums: undefined; }; const linking: PathConfigMap = { Article: COMMON_LINKING_CONFIG.Article, NewsFeed: COMMON_LINKING_CONFIG.NewsFeed, Albums: 'albums', }; const scrollEnabled = Platform.select({ web: true, default: false }); const ArticleScreen = ({ navigation, route, }: NativeStackScreenProps) => { return ( navigation.push('NewsFeed', { date: Date.now() })} > Push feed navigation.replace('NewsFeed', { date: Date.now() })} > Replace with feed navigation.popTo('Albums')}> Pop to Albums navigation.pop()}> Pop screen

); }; const NewsFeedScreen = ({ route, navigation, }: NativeStackScreenProps) => { React.useLayoutEffect(() => { navigation.setOptions({ headerSearchBarOptions: { placeholder: 'Search', }, }); }, [navigation]); return ( navigation.push('Albums')}> Push Albums navigation.goBack()}> Go back ); }; const AlbumsScreen = ({ navigation, }: NativeStackScreenProps) => { const headerHeight = useHeaderHeight(); return ( navigation.navigate('Article', { author: 'Babel fish' }) } > Navigate to article navigation.pop(2)}> Pop by 2 ); }; const HeaderHeightView = ({ hasOffset = Platform.OS === 'ios', }: { hasOffset?: boolean; }) => { const { colors } = useTheme(); const animatedHeaderHeight = useAnimatedHeaderHeight(); const headerHeight = useHeaderHeight(); return ( {headerHeight.toFixed(2)} ); }; const Stack = createNativeStackNavigator(); export function NativeStack() { const { colors } = useTheme(); return ( ({ title: `Article by ${route.params?.author ?? 'Unknown'}`, headerLargeTitle: true, headerLargeTitleShadowVisible: false, })} initialParams={{ author: 'Gandalf' }} /> ); } NativeStack.title = 'Native Stack'; NativeStack.linking = linking; NativeStack.options = { gestureEnabled: false, }; const styles = StyleSheet.create({ buttons: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, padding: 12, }, headerHeight: { position: 'absolute', top: 0, right: 0, padding: 12, borderWidth: StyleSheet.hairlineWidth, borderRightWidth: 0, borderTopWidth: 0, borderBottomLeftRadius: 3, }, }); ```

Presentation

https://github.com/react-navigation/react-navigation/assets/23281839/cae36411-2715-4d0a-ab30-95db370fdc45

[github-actions[bot]]

The Expo app for the example from this branch is ready!

https://expo.dev/@react-navigation/react-navigation-example?serviceType=eas&distribution=expo-go&scheme=exp+react-navigation-example&channel=pr-11943&sdkVersion=50.0.0

[netlify[bot]]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	7636fe4f1f67f1326d6e76bc3734d2bc3ca0aa37
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6644b80472b56d00077616c2
😎 Deploy Preview	https://deploy-preview-11943--react-navigation-example.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tboba]

Looks like CIs are failing because of type interference from Typescript 🤔 lemme fix that quickly