feat: emit appear and dismiss events for native stack

example/package.json

@@ -23,7 +23,7 @@
     "react-native-paper": "^3.4.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "react-native-tab-view": "2.11.0",
     "react-native-unimodules": "^0.7.0",
     "react-native-web": "^0.11.7"

packages/drawer/package.json

@@ -44,7 +44,7 @@
     "react-native-gesture-handler": "^1.5.3",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {

packages/native-stack/package.json

@@ -30,14 +30,14 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.8.0",
     "del-cli": "^3.0.0",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": "^2.0.0-alpha.8"
+    "react-native-screens": "^2.0.0-alpha.25"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/native-stack/src/navigators/createNativeStackNavigator.tsx

@@ -20,6 +20,7 @@ import NativeStackView from '../views/NativeStackView';
 import {
   NativeStackNavigatorProps,
   NativeStackNavigationOptions,
+  NativeStackNavigationEventMap,
 } from '../types';
 
 function NativeStackNavigator(props: NativeStackNavigatorProps) {
@@ -34,7 +35,7 @@ function NativeStackNavigator(props: NativeStackNavigatorProps) {
     StackNavigationState,
     StackRouterOptions,
     NativeStackNavigationOptions,
-    {}
+    NativeStackNavigationEventMap
   >(StackRouter, {
     initialRouteName,
     children,

packages/native-stack/src/types.tsx

@@ -12,6 +12,17 @@ import {
   StackRouterOptions,
 } from '@react-navigation/routers';
 
+export type NativeStackNavigationEventMap = {
+  /**
+   * Event which fires when the screen appears.
+   */
+  appear: { data: undefined };
+  /**
+   * Event which fires when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down).
+   */
+  dismiss: { data: undefined };
+};
+
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
@@ -20,7 +31,7 @@ export type NativeStackNavigationProp<
   RouteName,
   StackNavigationState,
   NativeStackNavigationOptions,
-  {}
+  NativeStackNavigationEventMap
 > & {
   /**
    * Push a new screen onto the stack.
@@ -45,7 +56,10 @@ export type NativeStackNavigationProp<
   popToTop(): void;
 };
 
-export type NativeStackNavigationHelpers = NavigationHelpers<ParamListBase, {}>;
+export type NativeStackNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  NativeStackNavigationEventMap
+>;
 
 export type NativeStackNavigationConfig = {};
 

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import {
-  // @ts-ignore
   ScreenStackHeaderConfig,
-  // @ts-ignore
   ScreenStackHeaderRightView,
   // eslint-disable-next-line import/no-unresolved
 } from 'react-native-screens';

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

@@ -3,7 +3,6 @@ import { View, StyleSheet } from 'react-native';
 import { StackNavigationState, StackActions } from '@react-navigation/routers';
 
 import {
-  // @ts-ignore
   ScreenStack,
   Screen as ScreenComponent,
   ScreenProps,
@@ -16,13 +15,7 @@ import {
   NativeStackDescriptorMap,
 } from '../types';
 
-const Screen = (ScreenComponent as unknown) as React.ComponentType<
-  ScreenProps & {
-    stackPresentation?: 'push' | 'modal' | 'transparentModal';
-    stackAnimation?: 'default' | 'fade' | 'none';
-    onDismissed?: () => void;
-  }
->;
+const Screen = (ScreenComponent as unknown) as React.ComponentType<ScreenProps>;
 
 type Props = {
   state: StackNavigationState;
@@ -49,7 +42,18 @@ export default function NativeStackView({
             style={StyleSheet.absoluteFill}
             stackPresentation={presentation}
             stackAnimation={animation}
+            onAppear={() => {
+              navigation.emit({
+                type: 'appear',
+                target: route.key,
+              });
+            }}
             onDismissed={() => {
+              navigation.emit({
+                type: 'dismiss',
+                target: route.key,
+              });
+
               navigation.dispatch({
                 ...StackActions.pop(),
                 source: route.key,

packages/stack/package.json

@@ -44,7 +44,7 @@
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.5.3",
     "react-native-safe-area-context": "^0.6.2",
-    "react-native-screens": "^2.0.0-alpha.22",
+    "react-native-screens": "^2.0.0-alpha.25",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {

yarn.lock

@@ -13574,10 +13574,10 @@ react-native-safe-area-view@^0.14.6:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
-react-native-screens@^2.0.0-alpha.22:
-  version "2.0.0-alpha.22"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.22.tgz#67cde460153985e400e0280ed3a0e5be07b0dc5a"
-  integrity sha512-2U++QrTf8H989ekHbgFuia8LLd8/+SbXra+rqDAOihCNRLFi91+y5QGgc7DP4Ic9MtHTaYRtWopyfyUo4ybD0A==
+react-native-screens@^2.0.0-alpha.25:
+  version "2.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.25.tgz#790d273b41d8dde37aa3e43bc662444aff18cd20"
+  integrity sha512-IxKOqPxIWwyJhFOvfkxU/NSFzM5PRiyWWL8g0WCPozVU1KNEtJQp7j0sONkTLGQDkGwLbDu0kuGawT1zXMnE5A==
   dependencies:
     debounce "^1.2.0"