feat: add transitionStart and transitionEnd events

react-navigation · Aug 5, 2019 · 8924b07 · 8924b07
1 parent f4b716a
commit 8924b07
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -13,6 +13,11 @@ import {
   Route,
 } from '@navigation-ex/core';
 
+export type StackNavigationEventMap = {
+  transitionStart: { closing: boolean };
+  transitionEnd: { closing: boolean };
+};
+
 export type StackNavigationState = NavigationState;
 
 export type StackNavigationProp<
@@ -22,7 +27,8 @@ export type StackNavigationProp<
   ParamList,
   RouteName,
   StackNavigationState,
-  StackNavigationOptions
+  StackNavigationOptions,
+  StackNavigationEventMap
 > & {
   /**
    * Push a new screen onto the stack.
@@ -124,8 +130,6 @@ export type StackNavigationOptions = HeaderOptions &
       vertical?: number;
       horizontal?: number;
     };
-    onTransitionStart?: (props: TransitionCallbackProps) => void;
-    onTransitionEnd?: (props: TransitionCallbackProps) => void;
   };
 
 export type StackNavigationConfig = {

diff --git a/packages/stack/src/views/Stack/Stack.tsx b/packages/stack/src/views/Stack/Stack.tsx
@@ -262,25 +262,22 @@ export default class Stack extends React.Component<Props, State> {
   private handleTransitionStart = (
     { route }: { route: Route<string> },
     closing: boolean
-  ) => {
-    const { descriptors } = this.props;
-    const descriptor = descriptors[route.key];
-
-    descriptor &&
-      descriptor.options.onTransitionStart &&
-      descriptor.options.onTransitionStart({ closing });
-  };
+  ) =>
+    this.props.navigation.emit({
+      type: 'transitionStart',
+      data: { closing },
+      target: route.key,
+    });
 
   private handleTransitionEnd = (
     { route }: { route: Route<string> },
     closing: boolean
-  ) => {
-    const descriptor = this.props.descriptors[route.key];
-
-    descriptor &&
-      descriptor.options.onTransitionEnd &&
-      descriptor.options.onTransitionEnd({ closing });
-  };
+  ) =>
+    this.props.navigation.emit({
+      type: 'transitionEnd',
+      data: { closing },
+      target: route.key,
+    });
 
   render() {
     const {