Add listeners bindings across navigators

Author: Alejandro Lara

src/BottomTabs.res

@@ -96,10 +96,19 @@ and headerParams = {
   layout: layout,
 }
 
+type listeners = {
+  ...Core.eventListeners,
+  tabPress?: navigationEvent<unit> => unit,
+  tabLongPress?: navigationEvent<unit> => unit,
+  transitionStart?: navigationEvent<unit> => unit,
+  transitionEnd?: navigationEvent<unit> => unit,
+}
+
 type navigatorProps = {
   id?: string,
   initialRouteName?: string,
   screenOptions?: screenOptionsParams => options,
+  screenListeners?: screenOptionsParams => listeners,
   backBehavior?: backBehavior,
   detachInactiveScreens?: bool,
   tabBar?: unit => React.element,
@@ -111,6 +120,7 @@ type screenProps<'params> = {
   name: string,
   navigationKey?: string,
   options?: screenOptionsParams => options,
+  listeners?: screenOptionsParams => listeners,
   initialParams?: 'params,
   getId?: getIdOptions => option<string>,
   component?: React.component<screenProps>,
@@ -167,6 +177,9 @@ module Navigation = {
     @string
     [
       | #tabPress(navigationEvent<unit> => unit)
+      | #tabLongPress(navigationEvent<unit> => unit)
+      | #transitionStart(navigationEvent<unit> => unit)
+      | #transitionEnd(navigationEvent<unit> => unit)
     ],
   ) => unsubscribe = "addListener"
 }

src/Core.res

@@ -54,6 +54,15 @@ type stateEventData = {state: navigationState}
 
 type action
 
+type beforeRemoveEventData = {action: action}
+
+type eventListeners = {
+  focus?: navigationEvent<unit> => unit,
+  blur?: navigationEvent<unit> => unit,
+  state?: navigationEvent<stateEventData> => unit,
+  beforeRemove?: navigationEvent<beforeRemoveEventData> => unit,
+}
+
 type layoutNavigatorParams = {
   state: navigationState,
   navigation: navigation,
@@ -100,6 +109,7 @@ module Navigation = {
       | #focus(navigationEvent<unit> => unit)
       | #blur(navigationEvent<unit> => unit)
       | #state(navigationEvent<stateEventData> => unit)
+      | #beforeRemove(navigationEvent<beforeRemoveEventData> => unit)
     ],
   ) => unsubscribe = "addListener"
 }

src/Drawer.res

@@ -90,12 +90,18 @@ type contentComponentProps = {
   descriptors: descriptors,
 }
 
+type listeners = {
+  ...Core.eventListeners,
+  drawerItemPress?: navigationEvent<unit> => unit,
+}
+
 type drawerStatus = [#"open" | #closed]
 
 type navigatorProps = {
   id?: string,
   initialRouteName?: string,
   screenOptions?: screenOptionsParams => options,
+  screenListeners?: screenOptionsParams => listeners,
   backBehavior?: backBehavior,
   defaultStatus?: drawerStatus,
   detachInactiveScreens?: bool,
@@ -109,6 +115,7 @@ type screenProps<'params> = {
   name: string,
   navigationKey?: string,
   options?: screenOptionsParams => options,
+  listeners?: screenOptionsParams => listeners,
   initialParams?: 'params,
   getId?: getIdOptions => option<string>,
   component?: React.component<screenProps>,

src/MaterialBottomTabs.res

@@ -35,10 +35,17 @@ type options = {
   tabBarTestID?: string,
 }
 
+type listeners = {
+  ...Core.eventListeners,
+  tabPress?: navigationEvent<unit> => unit,
+  tabLongPress?: navigationEvent<unit> => unit,
+}
+
 type navigatorProps = {
   id?: string,
   initialRouteName?: string,
   screenOptions?: screenOptionsParams => options,
+  screenListeners?: screenOptionsParams => listeners,
   backBehavior?: backBehavior,
   shifting?: bool,
   labeled?: bool,
@@ -53,6 +60,7 @@ type screenProps<'params> = {
   name: string,
   navigationKey?: string,
   options?: screenOptionsParams => options,
+  listeners?: screenOptionsParams => listeners,
   initialParams?: 'params,
   getId?: getIdOptions => option<string>,
   component?: React.component<screenProps>,
@@ -112,6 +120,7 @@ module Navigation = {
     @string
     [
       | #tabPress(navigationEvent<unit> => unit)
+      | #tabLongPress(navigationEvent<unit> => unit)
     ],
   ) => unsubscribe = "addListener"
 }

src/MaterialTopTabs.res

@@ -76,10 +76,17 @@ type tabBarProps = {
   jumpTo: string => unit,
 }
 
+type listeners = {
+  ...Core.eventListeners,
+  tabPress?: navigationEvent<unit> => unit,
+  tabLongPress?: navigationEvent<unit> => unit,
+}
+
 type navigatorProps = {
   id?: string,
   initialRouteName?: string,
   screenOptions?: screenOptionsParams => options,
+  screenListeners?: screenOptionsParams => listeners,
   backBehavior?: backBehavior,
   tabBarPosition?: tabBarPosition,
   keyboardDismissMode?: keyboardDismissMode,
@@ -95,6 +102,7 @@ type screenProps<'params> = {
   name: string,
   navigationKey?: string,
   options?: screenOptionsParams => options,
+  listeners?: screenOptionsParams => listeners,
   initialParams?: 'params,
   getId?: getIdOptions => option<string>,
   component?: React.component<screenProps>,
@@ -154,6 +162,7 @@ module Navigation = {
     @string
     [
       | #tabPress(navigationEvent<unit> => unit)
+      | #tabLongPress(navigationEvent<unit> => unit)
     ],
   ) => unsubscribe = "addListener"
 }

src/NativeStack.res

@@ -171,10 +171,20 @@ and headerParams = {
   back: backOptions,
 }
 
+type screenEventData = {closing: bool}
+
+type listeners = {
+  ...Core.eventListeners,
+  transitionStart?: navigationEvent<screenEventData> => unit,
+  transitionEnd?: navigationEvent<screenEventData> => unit,
+  gestureCancel?: navigationEvent<unit> => unit,
+}
+
 type navigatorProps = {
   id?: string,
   initialRouteName?: string,
   screenOptions?: screenOptionsParams => options,
+  screenListeners?: screenOptionsParams => listeners,
   layout?: layoutNavigatorParams => React.element,
   children?: React.element,
 }
@@ -183,6 +193,7 @@ type screenProps<'params> = {
   name: string,
   navigationKey?: string,
   options?: screenOptionsParams => options,
+  listeners?: screenOptionsParams => listeners,
   initialParams?: 'params,
   getId?: getIdOptions => option<string>,
   component?: React.component<screenProps>,
@@ -228,8 +239,6 @@ module Make = (): NavigatorModule => {
   }
 }
 
-type screenEventData = {closing: int}
-
 module Navigation = {
   @send
   external setOptions: (navigation, options) => unit = "setOptions"
@@ -255,6 +264,7 @@ module Navigation = {
     [
       | #transitionStart(navigationEvent<screenEventData> => unit)
       | #transitionEnd(navigationEvent<screenEventData> => unit)
+      | #gestureCancel(navigationEvent<unit> => unit)
     ],
   ) => unsubscribe = "addListener"
 }

src/Stack.res

@@ -154,10 +154,22 @@ and headerParams = {
   styleInterpolator: headerStyleInterpolator,
 }
 
+type screenEventData = {closing: bool}
+
+type listeners = {
+  ...Core.eventListeners,
+  transitionStart?: navigationEvent<screenEventData> => unit,
+  transitionEnd?: navigationEvent<screenEventData> => unit,
+  gestureStart?: navigationEvent<unit> => unit,
+  gestureEnd?: navigationEvent<unit> => unit,
+  gestureCancel?: navigationEvent<unit> => unit,
+}
+
 type navigatorProps = {
   id?: string,
   initialRouteName?: string,
   screenOptions?: screenOptionsParams => options,
+  screenListeners?: screenOptionsParams => listeners,
   detachInactiveScreens?: bool,
   layout?: layoutNavigatorParams => React.element,
   children?: React.element,
@@ -167,6 +179,7 @@ type screenProps<'params> = {
   name: string,
   navigationKey?: string,
   options?: screenOptionsParams => options,
+  listeners?: screenOptionsParams => listeners,
   initialParams?: 'params,
   getId?: getIdOptions => option<string>,
   component?: React.component<screenProps>,
@@ -212,8 +225,6 @@ module Make = (): NavigatorModule => {
   }
 }
 
-type screenEventData = {closing: int}
-
 module Navigation = {
   @send
   external setOptions: (navigation, options) => unit = "setOptions"