diff --git a/packages/react-native-reanimated/src/WorkletEventHandler.ts b/packages/react-native-reanimated/src/WorkletEventHandler.ts
index 439efaad7..8b10e1810 100644
--- a/packages/react-native-reanimated/src/WorkletEventHandler.ts
+++ b/packages/react-native-reanimated/src/WorkletEventHandler.ts
@@ -1,26 +1,30 @@
 'use strict';
-import type { NativeSyntheticEvent } from 'react-native';
 import { registerEventHandler, unregisterEventHandler } from './core';
 import type {
-  EventPayload,
   ReanimatedEvent,
   IWorkletEventHandler,
+  JSEvent,
+  JSHandler,
 } from './hook/commonTypes';
 import { shouldBeUseWeb } from './PlatformChecker';
 
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
-type JSEvent<Event extends object> = NativeSyntheticEvent<EventPayload<Event>>;
-
 // In JS implementation (e.g. for web) we don't use Reanimated's
 // event emitter, therefore we have to handle here
 // the event that came from React Native and convert it.
 function jsListener<Event extends object>(
   eventName: string,
-  handler: (event: ReanimatedEvent<Event>) => void
+  handler?: (event: ReanimatedEvent<Event>) => void,
+  handlerJS?: JSHandler<Event>
 ) {
   return (evt: JSEvent<Event>) => {
-    handler({ ...evt.nativeEvent, eventName } as ReanimatedEvent<Event>);
+    if (handler) {
+      handler({ ...evt.nativeEvent, eventName } as ReanimatedEvent<Event>);
+    }
+    if (handlerJS) {
+      handlerJS(evt);
+    }
   };
 }
 
@@ -29,25 +33,30 @@ class WorkletEventHandlerNative<Event extends object>
 {
   eventNames: string[];
   worklet: (event: ReanimatedEvent<Event>) => void;
+  JSHandlers: Record<string, JSHandler<Event>>; // for native platforms we just need to keep them so PropFilter sets them to props
   #viewTags: Set<number>;
   #registrations: Map<number, number[]>; // keys are viewTags, values are arrays of registration ID's for each viewTag
   constructor(
     worklet: (event: ReanimatedEvent<Event>) => void,
-    eventNames: string[]
+    eventNames: string[],
+    JSHandlers: Record<string, JSHandler<Event>>
   ) {
     this.worklet = worklet;
     this.eventNames = eventNames;
+    this.JSHandlers = JSHandlers;
     this.#viewTags = new Set<number>();
     this.#registrations = new Map<number, number[]>();
   }
 
   updateEventHandler(
     newWorklet: (event: ReanimatedEvent<Event>) => void,
-    newEvents: string[]
+    newEvents: string[],
+    newJSHandlers: Record<string, JSHandler<Event>>
   ): void {
     // Update worklet and event names
     this.worklet = newWorklet;
     this.eventNames = newEvents;
+    this.JSHandlers = newJSHandlers;
 
     // Detach all events
     this.#registrations.forEach((registrationIDs) => {
@@ -99,32 +108,74 @@ class WorkletEventHandlerWeb<Event extends object>
     | Record<string, (event: ReanimatedEvent<ReanimatedEvent<Event>>) => void>
     | Record<string, (event: JSEvent<Event>) => void>;
 
+  JSHandlers: Record<string, JSHandler<Event>>; // web JS Handlers need to be merged with Worklet handlers
   worklet: (event: ReanimatedEvent<Event>) => void;
 
   constructor(
     worklet: (event: ReanimatedEvent<Event>) => void,
-    eventNames: string[] = []
+    eventNames: string[] = [],
+    JSHandlers: Record<string, JSHandler<Event>>
   ) {
     this.worklet = worklet;
     this.eventNames = eventNames;
+    this.JSHandlers = JSHandlers;
     this.listeners = {};
     this.setupWebListeners();
   }
 
   setupWebListeners() {
     this.listeners = {};
-    this.eventNames.forEach((eventName) => {
+
+    const eventsFromJSHandlers = Object.keys(this.JSHandlers);
+
+    // events that are both from JS and Worklet handlers
+    const sharedEvents = eventsFromJSHandlers.filter((value) =>
+      this.eventNames.includes(value)
+    );
+
+    // events from only Worklet handlers
+    const restWorkletEvents = this.eventNames.filter(
+      (value) => !eventsFromJSHandlers.includes(value)
+    );
+
+    // events from only JS handlers
+    const restJSEvents = eventsFromJSHandlers.filter(
+      (value) => !this.eventNames.includes(value)
+    );
+
+    // shared events get JS and Worklet handlers merged into a listener to put into a prop
+    sharedEvents.forEach((eventName) => {
+      this.listeners[eventName] = jsListener(
+        eventName,
+        this.worklet,
+        this.JSHandlers[eventName]
+      );
+    });
+
+    // only Worklet events get their own listeners
+    restWorkletEvents.forEach((eventName) => {
       this.listeners[eventName] = jsListener(eventName, this.worklet);
     });
+
+    // only JS events get their own listeners
+    restJSEvents.forEach((eventName) => {
+      this.listeners[eventName] = jsListener(
+        eventName,
+        undefined,
+        this.JSHandlers[eventName]
+      );
+    });
   }
 
   updateEventHandler(
     newWorklet: (event: ReanimatedEvent<Event>) => void,
-    newEvents: string[]
+    newEvents: string[],
+    newJSHandlers: Record<string, JSHandler<Event>>
   ): void {
     // Update worklet and event names
     this.worklet = newWorklet;
     this.eventNames = newEvents;
+    this.JSHandlers = newJSHandlers;
     this.setupWebListeners();
   }
 
diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
index 9eeb6bb5c..ee4e6f5e9 100644
--- a/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
+++ b/packages/react-native-reanimated/src/createAnimatedComponent/PropsFilter.tsx
@@ -67,16 +67,32 @@ export class PropsFilter implements IPropsFilter {
         has('workletEventHandler', value) &&
         value.workletEventHandler instanceof WorkletEventHandler
       ) {
-        if (value.workletEventHandler.eventNames.length > 0) {
-          value.workletEventHandler.eventNames.forEach((eventName) => {
-            props[eventName] = has('listeners', value.workletEventHandler)
-              ? (
-                  value.workletEventHandler.listeners as Record<string, unknown>
-                )[eventName]
-              : dummyListener;
-          });
+        const handler = value.workletEventHandler;
+        const isWebHandler = has('listeners', handler);
+        const hasJSHandlers = Object.keys(handler.JSHandlers).length > 0;
+
+        if (hasJSHandlers) {
+          if (isWebHandler) {
+            // on web, our and JS handlers are merged in listeners object
+            Object.keys(handler.listeners).forEach((eventName) => {
+              props[eventName] = handler.listeners[eventName];
+            });
+          } else {
+            // on mobile platforms, we just set the JS handlers to the props
+            Object.keys(handler.JSHandlers).forEach((eventName) => {
+              props[eventName] = handler.JSHandlers[eventName];
+            });
+          }
         } else {
-          props[key] = dummyListener;
+          if (handler.eventNames.length > 0) {
+            handler.eventNames.forEach((eventName) => {
+              props[eventName] = isWebHandler
+                ? (handler.listeners as Record<string, unknown>)[eventName]
+                : dummyListener;
+            });
+          } else {
+            props[key] = dummyListener;
+          }
         }
       } else if (isSharedValue(value)) {
         if (component._isFirstRender) {
diff --git a/packages/react-native-reanimated/src/hook/commonTypes.ts b/packages/react-native-reanimated/src/hook/commonTypes.ts
index a56ee922c..2df596a62 100644
--- a/packages/react-native-reanimated/src/hook/commonTypes.ts
+++ b/packages/react-native-reanimated/src/hook/commonTypes.ts
@@ -64,7 +64,7 @@ export type ReanimatedEvent<Event extends object> = ReanimatedPayload &
     ? NativeEvent
     : Event);
 
-export type EventPayload<Event extends object> = Event extends {
+type EventPayload<Event extends object> = Event extends {
   nativeEvent: infer NativeEvent extends object;
 }
   ? NativeEvent
@@ -80,10 +80,17 @@ export type RNNativeScrollEvent = NativeSyntheticEvent<NativeScrollEvent>;
 
 export type ReanimatedScrollEvent = ReanimatedEvent<RNNativeScrollEvent>;
 
+export type JSEvent<Event extends object> = NativeSyntheticEvent<
+  EventPayload<Event>
+>;
+
+export type JSHandler<Event extends object> = (event: JSEvent<Event>) => void;
+
 export interface IWorkletEventHandler<Event extends object> {
   updateEventHandler: (
     newWorklet: (event: ReanimatedEvent<Event>) => void,
-    newEvents: string[]
+    newEvents: string[],
+    newJSHandlers: Record<string, JSHandler<Event>>
   ) => void;
   registerForEvents: (viewTag: number, fallbackEventName?: string) => void;
   unregisterFromEvents: (viewTag: number) => void;
@@ -114,3 +121,10 @@ export type UseAnimatedStyleInternal<Style extends DefaultStyle> = (
     | null,
   isAnimatedProps?: boolean
 ) => AnimatedStyleHandle<Style> | JestAnimatedStyleHandle<Style>;
+
+export type UseEventInternal<Event extends object, Context> = {
+  handler: (event: ReanimatedEvent<Event>, context?: Context) => void;
+  eventNames: string[];
+  rebuild: boolean;
+  JSHandlers: Record<string, JSHandler<Event>>;
+};
diff --git a/packages/react-native-reanimated/src/hook/useComposedEventHandler.ts b/packages/react-native-reanimated/src/hook/useComposedEventHandler.ts
index a532ca9fe..9f819a11d 100644
--- a/packages/react-native-reanimated/src/hook/useComposedEventHandler.ts
+++ b/packages/react-native-reanimated/src/hook/useComposedEventHandler.ts
@@ -2,22 +2,20 @@
 import { useEvent } from './useEvent';
 import { useHandler } from './useHandler';
 import { WorkletEventHandler } from '../WorkletEventHandler';
-import type { ReanimatedEvent } from './commonTypes';
+import type {
+  JSEvent,
+  JSHandler,
+  ReanimatedEvent,
+  UseEventInternal,
+} from './commonTypes';
 import type { WorkletFunction } from '../commonTypes';
 import type { EventHandlerProcessed, EventHandlerInternal } from './useEvent';
-
-type ComposedHandlerProcessed<
-  Event extends object,
-  Context extends Record<string, unknown> = Record<string, unknown>
-> = EventHandlerProcessed<Event, Context>;
-
-type ComposedHandlerInternal<Event extends object> =
-  EventHandlerInternal<Event>;
+import { has } from '../createAnimatedComponent/utils';
 
 /**
- * Lets you compose multiple event handlers based on [useEvent](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) hook.
+ * Lets you compose multiple event handlers.
  *
- * @param handlers - An array of event handlers created using [useEvent](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) hook.
+ * @param handlers - An array of either event handlers created using [useEvent hook](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) or JS event handlers, similar to [useAnimatedScrollHandler argument](https://docs.swmansion.com/react-native-reanimated/docs/scroll/useAnimatedScrollHandler#scrollhandlerorhandlersobject-object-with-worklets).
  * @returns An object you need to pass to a coresponding "onEvent" prop on an `Animated` component (for example handlers responsible for `onScroll` event go to `onScroll` prop).
  * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useComposedEventHandler
  */
@@ -26,55 +24,188 @@ export function useComposedEventHandler<
   Event extends object,
   Context extends Record<string, unknown>
 >(
-  handlers: (EventHandlerProcessed<Event, Context> | null)[]
+  handlers: (
+    | EventHandlerProcessed<Event, Context>
+    | JSHandlersObject<Event>
+    | null
+  )[]
 ): ComposedHandlerProcessed<Event, Context>;
 
 export function useComposedEventHandler<
   Event extends object,
   Context extends Record<string, unknown>
->(handlers: (EventHandlerProcessed<Event, Context> | null)[]) {
-  // Record of handlers' worklets to calculate deps diffs. We use the record type to match the useHandler API requirements
-  const workletsRecord: Record<string, WorkletFunction> = {};
-  // Summed event names for registration
+>(
+  handlers: (
+    | EventHandlerProcessed<Event, Context>
+    | JSHandlersObject<Event>
+    | null
+  )[]
+) {
+  // Summed event names for worklet handlers registration
   const composedEventNames = new Set<string>();
   // Map that holds worklets for specific handled events
   const workletsMap: {
     [key: string]: ((event: ReanimatedEvent<Event>) => void)[];
   } = {};
+  // Record of handlers' worklets to calculate deps diffs
+  const workletsRecord: Record<string, WorkletFunction> = {};
 
-  handlers
+  function isWorkletEventHandler(
+    handler: unknown
+  ): handler is EventHandlerProcessed<Event, Context> {
+    return (
+      has('workletEventHandler', handler) &&
+      handler.workletEventHandler instanceof WorkletEventHandler
+    );
+  }
+
+  const workletHandlers = handlers
     .filter((h) => h !== null)
-    .forEach((handler) => {
-      // EventHandlerProcessed is the return type of useEvent and has to be force casted to EventHandlerInternal, because we need WorkletEventHandler object
-      const { workletEventHandler } =
-        handler as unknown as EventHandlerInternal<Context>;
-      if (workletEventHandler instanceof WorkletEventHandler) {
-        workletEventHandler.eventNames.forEach((eventName) => {
-          composedEventNames.add(eventName);
-
-          if (workletsMap[eventName]) {
-            workletsMap[eventName].push(workletEventHandler.worklet);
-          } else {
-            workletsMap[eventName] = [workletEventHandler.worklet];
-          }
-
-          const handlerName = eventName + `${workletsMap[eventName].length}`;
-          workletsRecord[handlerName] =
-            workletEventHandler.worklet as WorkletFunction;
-        });
+    .filter((h) => isWorkletEventHandler(h));
+
+  workletHandlers.forEach((handler) => {
+    // EventHandlerProcessed is the return type of useEvent and has to be force casted to EventHandlerInternal, because we need WorkletEventHandler object
+    const { workletEventHandler } =
+      handler as unknown as EventHandlerInternal<Context>;
+    if (workletEventHandler instanceof WorkletEventHandler) {
+      workletEventHandler.eventNames.forEach((eventName) => {
+        composedEventNames.add(eventName);
+
+        if (workletsMap[eventName]) {
+          workletsMap[eventName].push(workletEventHandler.worklet);
+        } else {
+          workletsMap[eventName] = [workletEventHandler.worklet];
+        }
+
+        const handlerName = eventName + `${workletsMap[eventName].length}`;
+        workletsRecord[handlerName] =
+          workletEventHandler.worklet as WorkletFunction;
+      });
+    }
+  });
+
+  const { doDependenciesDiffer } = useHandler(workletsRecord);
+
+  // Record of provided JS handlers, used for passing it further down to WorkletEventHandler
+  const JSHandlersRecord: Partial<
+    Record<JSScrollEventsOutput, JSHandler<Event>>
+  > = {};
+  // Helper map used for merging same-event JS handlers into JSHandlersRecord object
+  const JSHandlersMap: Partial<
+    Record<JSScrollEventsInput, JSHandler<Event>[]>
+  > = {};
+
+  function isJSHandler(handler: unknown): handler is JSHandlersObject<Event> {
+    return Object.keys(JSScrollEventsPropMap).reduce((acc, val) => {
+      return acc || has(val, handler);
+    }, false);
+  }
+
+  const JSHandlers: JSHandlersObject<Event>[] = handlers
+    .filter((h) => h !== null)
+    .filter((h) => isJSHandler(h)) as JSHandlersObject<Event>[];
+
+  // Setup the JSHandlersRecord object
+  if (JSHandlers) {
+    // Store callbacks for each JS event in a record
+    JSHandlers.forEach((handler) => {
+      if (handler.onScroll) {
+        if (JSHandlersMap.onScroll) {
+          JSHandlersMap.onScroll.push(handler.onScroll);
+        } else {
+          JSHandlersMap.onScroll = [handler.onScroll];
+        }
+      }
+      if (handler.onBeginDrag) {
+        if (JSHandlersMap.onBeginDrag) {
+          JSHandlersMap.onBeginDrag.push(handler.onBeginDrag);
+        } else {
+          JSHandlersMap.onBeginDrag = [handler.onBeginDrag];
+        }
+      }
+      if (handler.onEndDrag) {
+        if (JSHandlersMap.onEndDrag) {
+          JSHandlersMap.onEndDrag.push(handler.onEndDrag);
+        } else {
+          JSHandlersMap.onEndDrag = [handler.onEndDrag];
+        }
+      }
+      if (handler.onMomentumBegin) {
+        if (JSHandlersMap.onMomentumBegin) {
+          JSHandlersMap.onMomentumBegin.push(handler.onMomentumBegin);
+        } else {
+          JSHandlersMap.onMomentumBegin = [handler.onMomentumBegin];
+        }
+      }
+      if (handler.onMomentumEnd) {
+        if (JSHandlersMap.onMomentumEnd) {
+          JSHandlersMap.onMomentumEnd.push(handler.onMomentumEnd);
+        } else {
+          JSHandlersMap.onMomentumEnd = [handler.onMomentumEnd];
+        }
       }
     });
 
-  const { doDependenciesDiffer } = useHandler(workletsRecord);
+    // Merge callbacks for given event and put them in the record object
+    Object.keys(JSHandlersMap).forEach((eventInput) => {
+      const eventOutput =
+        JSScrollEventsPropMap[eventInput as unknown as JSScrollEventsInput];
+      const callbacks =
+        JSHandlersMap[eventInput as unknown as JSScrollEventsInput];
 
-  return useEvent<Event, Context>(
-    (event) => {
+      JSHandlersRecord[eventOutput] = (event: JSEvent<Event>) => {
+        callbacks?.forEach((callback) => {
+          callback(event);
+        });
+      };
+    });
+  }
+
+  // @ts-expect-error We need the internal type
+  return (useEvent as UseEventInternal<Event, Context>)(
+    (event: ReanimatedEvent<Event>) => {
       'worklet';
       if (workletsMap[event.eventName]) {
         workletsMap[event.eventName].forEach((worklet) => worklet(event));
       }
     },
     Array.from(composedEventNames),
-    doDependenciesDiffer
+    doDependenciesDiffer,
+    JSHandlersRecord
   ) as unknown as ComposedHandlerInternal<Event>;
 }
+
+type ComposedHandlerProcessed<
+  Event extends object,
+  Context extends Record<string, unknown> = Record<string, unknown>
+> = EventHandlerProcessed<Event, Context>;
+
+type ComposedHandlerInternal<Event extends object> =
+  EventHandlerInternal<Event>;
+
+type JSScrollEventsInput =
+  | 'onScroll'
+  | 'onBeginDrag'
+  | 'onEndDrag'
+  | 'onMomentumBegin'
+  | 'onMomentumEnd';
+
+type JSScrollEventsOutput =
+  | 'onScroll'
+  | 'onScrollBeginDrag'
+  | 'onScrollEndDrag'
+  | 'onMomentumScrollBegin'
+  | 'onMomentumScrollEnd';
+
+const JSScrollEventsPropMap: Record<JSScrollEventsInput, JSScrollEventsOutput> =
+  {
+    onScroll: 'onScroll',
+    onBeginDrag: 'onScrollBeginDrag',
+    onEndDrag: 'onScrollEndDrag',
+    onMomentumBegin: 'onMomentumScrollBegin',
+    onMomentumEnd: 'onMomentumScrollEnd',
+  };
+
+type JSHandlersObject<Event extends object> = Partial<
+  Record<JSScrollEventsInput, JSHandler<Event>>
+>;
diff --git a/packages/react-native-reanimated/src/hook/useEvent.ts b/packages/react-native-reanimated/src/hook/useEvent.ts
index dbd750d1f..0cda39544 100644
--- a/packages/react-native-reanimated/src/hook/useEvent.ts
+++ b/packages/react-native-reanimated/src/hook/useEvent.ts
@@ -1,7 +1,11 @@
 'use strict';
 import { useRef } from 'react';
 import { WorkletEventHandler } from '../WorkletEventHandler';
-import type { IWorkletEventHandler, ReanimatedEvent } from './commonTypes';
+import type {
+  IWorkletEventHandler,
+  JSHandler,
+  ReanimatedEvent,
+} from './commonTypes';
 
 /**
  * Worklet to provide as an argument to `useEvent` hook.
@@ -46,18 +50,20 @@ export function useEvent<
 export function useEvent<Event extends object, Context = never>(
   handler: (event: ReanimatedEvent<Event>, context?: Context) => void,
   eventNames: string[] = [],
-  rebuild = false
+  rebuild = false,
+  JSHandlers: Record<string, JSHandler<Event>> = {}
 ): EventHandlerInternal<Event> {
   const initRef = useRef<EventHandlerInternal<Event>>(null!);
   if (initRef.current === null) {
     const workletEventHandler = new WorkletEventHandler<Event>(
       handler,
-      eventNames
+      eventNames,
+      JSHandlers
     );
     initRef.current = { workletEventHandler };
   } else if (rebuild) {
     const workletEventHandler = initRef.current.workletEventHandler;
-    workletEventHandler.updateEventHandler(handler, eventNames);
+    workletEventHandler.updateEventHandler(handler, eventNames, JSHandlers);
     initRef.current = { workletEventHandler };
   }