diff --git a/__typetests__/common.tsx b/__typetests__/common.tsx
index 2d7faff7c76..a91cbfc452b 100644
--- a/__typetests__/common.tsx
+++ b/__typetests__/common.tsx
@@ -317,49 +317,87 @@ function DerivedValueTest() {
 }
 
 // useAnimatedScrollHandler
-function AnimatedScrollHandlerTest() {
-  const translationY = useSharedValue(0);
-  const scrollHandler = useAnimatedScrollHandler((event) => {
-    translationY.value = event.contentOffset.y;
+function AnimatedScrollHandlerTest1() {
+  const CustomScrollView = Animated.createAnimatedComponent(ScrollView);
+  const CustomFlatList = Animated.createAnimatedComponent(FlatList);
+  const scrollHandler1 = useAnimatedScrollHandler((event) => {
+    console.log(event.contentOffset.x);
+    console.log(event.eventName);
   });
-  // We allow using colors in useAnimatedStyle but it's not a part
-  // of a public API hence we expect an error here.
-  // @ts-expect-error color cannot be a number
-  const stylez = useAnimatedStyle(() => {
-    return {
-      color: 'red',
-      backgroundColor: 0x00ff00,
-      transform: [
-        {
-          translateY: translationY.value,
-        },
-        {
-          rotate: `${Math.PI}rad`,
-        },
-      ],
-    };
-  });
-  // @ts-expect-error Valid rotation is a string (either radians or degrees)
-  const style2 = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          rotate: Math.PI,
-        },
-      ],
-    };
+  const scrollHandler2 = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      console.log(event.contentOffset.x);
+      console.log(event.eventName);
+    },
+    // @ts-expect-error Properly detects wrong event name.
+    onWrongEvent: (event) => {
+      console.log(event.contentOffset.x);
+      console.log(event.eventName);
+    },
   });
-  // @ts-expect-error color cannot be an object
-  const style3 = useAnimatedStyle(() => {
-    return {
-      color: {},
-    };
+
+  return (
+    <>
+      <Animated.ScrollView onScroll={scrollHandler1} />
+      <Animated.ScrollView onScroll={scrollHandler2} />
+      <CustomScrollView onScroll={scrollHandler1} />
+      <CustomScrollView onScroll={scrollHandler2} />
+      <Animated.FlatList
+        onScroll={scrollHandler1}
+        data={[]}
+        renderItem={null}
+      />
+      <Animated.FlatList
+        onScroll={scrollHandler2}
+        data={[]}
+        renderItem={null}
+      />
+      <CustomFlatList onScroll={scrollHandler1} data={[]} renderItem={null} />
+      <CustomFlatList onScroll={scrollHandler2} data={[]} renderItem={null} />
+    </>
+  );
+}
+
+function AnimatedScrollHandlerTest2() {
+  const CustomScrollView = Animated.createAnimatedComponent(ScrollView);
+  const CustomFlatList = Animated.createAnimatedComponent(FlatList);
+  const scrollHandler = useAnimatedScrollHandler(
+    // @ts-expect-error `event` is a `ReanimatedEvent`.
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      // @ts-expect-error `event` is a `ReanimatedEvent`.
+      console.log(event.contentOffset.x);
+      // @ts-expect-error `event` is a `ReanimatedEvent`.
+      console.log(event.eventName);
+    }
+  );
+  return (
+    <>
+      <Animated.ScrollView onScroll={scrollHandler} />
+      <CustomScrollView onScroll={scrollHandler} />
+      <Animated.FlatList onScroll={scrollHandler} data={[]} renderItem={null} />
+      <CustomFlatList onScroll={scrollHandler} data={[]} renderItem={null} />
+    </>
+  );
+}
+
+function AnimatedScrollHandlerTest3() {
+  const CustomScrollView = Animated.createAnimatedComponent(ScrollView);
+  const CustomFlatList = Animated.createAnimatedComponent(FlatList);
+
+  const x = useSharedValue(0);
+  // This cast works because it's narrowing.
+  const scrollHandler = useAnimatedScrollHandler((event: NativeScrollEvent) => {
+    console.log(event.contentOffset.x);
+    // @ts-expect-error This gives error because of the cast.
+    console.log(event.eventName);
   });
   return (
-    <View style={styles.container}>
-      <Animated.View style={[styles.box, stylez]} />
-      <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16} />
-    </View>
+    <>
+      <Animated.ScrollView onScroll={scrollHandler} />
+      <CustomScrollView onScroll={scrollHandler} />
+      <Animated.FlatList onScroll={scrollHandler} data={[]} renderItem={null} />
+      <CustomFlatList onScroll={scrollHandler} data={[]} renderItem={null} />
+    </>
   );
 }
 
@@ -1289,7 +1327,7 @@ function testSetGestureState() {
   Test Animated style
 */
 
-function TestUseAnimatedStyleStyle1() {
+function TestUseAnimatedStyle1() {
   const sv = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1299,7 +1337,7 @@ function TestUseAnimatedStyleStyle1() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle2() {
+function TestUseAnimatedStyle2() {
   const sv = useSharedValue(true);
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
@@ -1310,7 +1348,7 @@ function TestUseAnimatedStyleStyle2() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle3() {
+function TestUseAnimatedStyle3() {
   const sv = useSharedValue({ width: 0 });
   const animatedStyle = useAnimatedStyle(() => {
     return sv.value;
@@ -1318,7 +1356,7 @@ function TestUseAnimatedStyleStyle3() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle4() {
+function TestUseAnimatedStyle4() {
   const sv = useSharedValue({ width: true });
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
@@ -1327,7 +1365,7 @@ function TestUseAnimatedStyleStyle4() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle5() {
+function TestUseAnimatedStyle5() {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateX: 0 }],
@@ -1336,7 +1374,7 @@ function TestUseAnimatedStyleStyle5() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle6() {
+function TestUseAnimatedStyle6() {
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1346,7 +1384,7 @@ function TestUseAnimatedStyleStyle6() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle7() {
+function TestUseAnimatedStyle7() {
   const sv = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1356,7 +1394,7 @@ function TestUseAnimatedStyleStyle7() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle8() {
+function TestUseAnimatedStyle8() {
   const sv = useSharedValue(0);
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
@@ -1367,7 +1405,7 @@ function TestUseAnimatedStyleStyle8() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle9() {
+function TestUseAnimatedStyle9() {
   const sv = useSharedValue({ translateX: 0 });
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1377,7 +1415,7 @@ function TestUseAnimatedStyleStyle9() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle10() {
+function TestUseAnimatedStyle10() {
   const sv = useSharedValue({ rotate: 0 });
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
@@ -1388,7 +1426,7 @@ function TestUseAnimatedStyleStyle10() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle11() {
+function TestUseAnimatedStyle11() {
   const sv = useSharedValue([{ translateX: 0 }]);
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1398,7 +1436,7 @@ function TestUseAnimatedStyleStyle11() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle12() {
+function TestUseAnimatedStyle12() {
   const sv = useSharedValue([{ rotate: 0 }]);
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
@@ -1409,7 +1447,7 @@ function TestUseAnimatedStyleStyle12() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle13() {
+function TestUseAnimatedStyle13() {
   const sv = useSharedValue(0);
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1423,7 +1461,7 @@ function TestUseAnimatedStyleStyle13() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle14() {
+function TestUseAnimatedStyle14() {
   const sv = useSharedValue(0);
 
   // @ts-expect-error properly detects illegal type
@@ -1438,7 +1476,7 @@ function TestUseAnimatedStyleStyle14() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle15() {
+function TestUseAnimatedStyle15() {
   const sv = useSharedValue({ width: 0, height: 0 });
 
   const animatedStyle = useAnimatedStyle(() => {
@@ -1450,7 +1488,7 @@ function TestUseAnimatedStyleStyle15() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle16() {
+function TestUseAnimatedStyle16() {
   const sv = useSharedValue({ width: 0 });
 
   // @ts-expect-error properly detects illegal type
@@ -1463,7 +1501,7 @@ function TestUseAnimatedStyleStyle16() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle17() {
+function TestUseAnimatedStyle17() {
   const sv = useSharedValue({ shadowOffset: { width: 0, height: 0 } });
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -1473,7 +1511,7 @@ function TestUseAnimatedStyleStyle17() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle18() {
+function TestUseAnimatedStyle18() {
   const sv = useSharedValue({ shadowOffset: { width: 0 } });
   // @ts-expect-error properly detects illegal type
   const animatedStyle = useAnimatedStyle(() => {
@@ -1484,7 +1522,7 @@ function TestUseAnimatedStyleStyle18() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle19() {
+function TestUseAnimatedStyle19() {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       flexWrap: 'wrap',
@@ -1494,7 +1532,7 @@ function TestUseAnimatedStyleStyle19() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle20() {
+function TestUseAnimatedStyle20() {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       flexWrap: 'wrap' as const,
@@ -1503,7 +1541,7 @@ function TestUseAnimatedStyleStyle20() {
   return <Animated.View style={animatedStyle} />;
 }
 
-function TestUseAnimatedStyleStyle21() {
+function TestUseAnimatedStyle21() {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       overflow: 'scroll',
@@ -1520,7 +1558,7 @@ function TestUseAnimatedStyleStyle21() {
   );
 }
 
-function TestUseAnimatedStyleStyle22() {
+function TestUseAnimatedStyle22() {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       overflow: 'hidden',
@@ -1535,6 +1573,14 @@ function TestUseAnimatedStyleStyle22() {
   );
 }
 
+function TestUseAnimatedStyle23() {
+  const animatedStyle = useAnimatedStyle(() => ({
+    // @ts-expect-error Passing a number here will work,
+    // but we don't allow for it as a part of API.
+    backgroundColor: 0x000000,
+  }));
+}
+
 function TestInlineStyles1() {
   const animatedIndex = useSharedValue(0);
   const backgroundColor = useDerivedValue(() => {
@@ -1730,6 +1776,12 @@ function TestInlineStyles24() {
   );
 }
 
+function TestInlineStyles25() {
+  // @ts-expect-error Passing a number here will work,
+  // but we don't allow for it as a part of API.
+  return <Animated.View style={{ backgroundColor: 0x000000 }} />;
+}
+
 // test style prop of Animated components
 
 declare const RNStyle: ViewStyle;