feat!: rename customAnimationOnGesture to animationMatchesGesture (#1…

…1228)

**Motivation**
This PR renames `customAnimationOnGesture` native-stack prop to
`animationMatchesGesture` for `react-navigation` v7.

`customAnimationOnGesture` makes you think this prop takes an object
with an animation provided by the developer. In reality, it's just a
boolean flag that `animationMatchesGesture` name reflects better.

**Test plan**
<details>
<summary>Code example</summary>
<br>

```jsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import { Button, Text, View } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'papayawhip',
      }}
    >
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'tomato',
      }}
    >
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{
            animation: 'fade_from_bottom',
            animationMatchesGesture: true,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

```
</details>


https://user-images.githubusercontent.com/39658211/219395884-bcfa7905-539a-4ec9-a1e3-d5a5dd23fe42.mov

packages/native-stack/src/types.tsx

@@ -383,7 +383,7 @@ export type NativeStackNavigationOptions = {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
-   * When using `vertical` option, options `fullScreenGestureEnabled: true`, `customAnimationOnGesture: true` and `animation: 'slide_from_bottom'` are set by default.
+   * When using `vertical` option, options `fullScreenGestureEnabled: true`, `animationMatchesGesture: true` and `animation: 'slide_from_bottom'` are set by default.
    *
    * Supported values:
    * - `vertical` – dismiss screen vertically
@@ -403,10 +403,10 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  customAnimationOnGesture?: boolean;
+  animationMatchesGesture?: boolean;
   /**
    * Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same
-   * transition animation as `simple_push`. This behavior can be changed by setting `customAnimationOnGesture` prop. Achieving the
+   * transition animation as `simple_push`. This behavior can be changed by setting `animationMatchesGesture` prop. Achieving the
    * default iOS animation isn't possible due to platform limitations. Defaults to `false`.
    *
    * Doesn't affect the behavior of screens presented modally.

packages/native-stack/src/views/NativeStackView.native.tsx

@@ -145,7 +145,7 @@ const SceneView = ({
 
   let {
     animation,
-    customAnimationOnGesture,
+    animationMatchesGesture,
     fullScreenGestureEnabled,
     presentation = 'card',
   } = options;
@@ -175,15 +175,17 @@ const SceneView = ({
   if (gestureDirection === 'vertical' && Platform.OS === 'ios') {
     // for `vertical` direction to work, we need to set `fullScreenGestureEnabled` to `true`
     // so the screen can be dismissed from any point on screen.
-    // `customAnimationOnGesture` needs to be set to `true` so the `animation` set by user can be used,
+    // `animationMatchesGesture` needs to be set to `true` so the `animation` set by user can be used,
     // otherwise `simple_push` will be used.
     // Also, the default animation for this direction seems to be `slide_from_bottom`.
     if (fullScreenGestureEnabled === undefined) {
       fullScreenGestureEnabled = true;
     }
-    if (customAnimationOnGesture === undefined) {
-      customAnimationOnGesture = true;
+
+    if (animationMatchesGesture === undefined) {
+      animationMatchesGesture = true;
     }
+
     if (animation === undefined) {
       animation = 'slide_from_bottom';
     }
@@ -260,7 +262,7 @@ const SceneView = ({
       key={route.key}
       enabled
       style={StyleSheet.absoluteFill}
-      customAnimationOnSwipe={customAnimationOnGesture}
+      customAnimationOnSwipe={animationMatchesGesture}
       fullScreenSwipeEnabled={fullScreenGestureEnabled}
       gestureEnabled={
         isAndroid